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.

panorama.kaczmarski.dev

Three.js 🔗
Angular 🔗
TypeScript 🔗
Sass 🔗

• 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.

• 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.

Here's a step-by-step guide to help you get started with the project.

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)

Let's start with installing all dependencies. Move to the app main workspace and run:

npm i

To create a localhost port you should type:

ng serve

Your application is ready at port 4200.

http:https://localhost:4200/

• 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