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.
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.
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://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