360° VR Panorama Viewer
Angular implementation of an interactive 360 panorama viewer, allowing for watching an illusion of the three-dimensional world, using eqirectangular image superimposed on the sphere. User can move the camera with mouse or finger as well as using gyroscpope sensor in mobile devices, getting VR-like experience.
Official Website 🌐
Technology Stack
Three.js 🔗
Angular 🔗
TypeScript 🔗
Sass 🔗
How does it works?
Creating 3D background
- The background is actually a textured sphere created with Three.js. The geometry of the sphere is reversed so that the texture is inside the solid.
- The camera is placed inside the sphere, which gives the effect of a three-dimensional world.
VR functionality
- The VR effect is achieved by using a gyroscope in the mobile device.
- Angular communicates with the sensor using the Device Orientation API.
- the data retrieved from the API is transformed into a rotation quanterion that rotates the Three.js camera depending on the position of the device in space.
⚠️ Important - In order to correctly represent rotation in 3D space using Device Orientation API, it is necessary to use quanterions or rotation matrices. Basing the rotations on pure sensor data (so-called Euler angles), we may encounter the Gimball Lock problem. This is perfectly described in this article.
Installation Guide ⚙️
Here's a step-by-step guide to help you get started with the project.
Prerequisites
Before you begin, make sure you have the following installed on your machine:
- Node.js (version 14.0 or later)
- npm package manager (version 6.0 or later)
Installation
Let's start with installing all dependencies. Move to the app main workspace and run:
npm iTo create a localhost port you should type:
ng serveYour application is ready at port 4200.
http://localhost:4200/License and Copyrights 📜
- The application is publicly available under the MIT license.
- The project is educational and is not used for commercial purposes.
- Image used as background was generated by AI