360 Panorama VR

Angular implementation of 360° Panorama Viewer with VR functions

MKaczmarski07
3
3
TypeScript

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.

presentation

Official Website 🌐

panorama.kaczmarski.dev

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 i

To create a localhost port you should type:

ng serve

Your 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