https://github.com/mkaczmarski07/360-panorama-vr

Angular implementation of 360° Panorama Viewer with VR functions
https://github.com/mkaczmarski07/360-panorama-vr

angular deviceorientation-api equirectanguar-projection threejs vr

Last synced: 2 days ago
JSON representation

Angular implementation of 360° Panorama Viewer with VR functions

• Host: GitHub
• URL: https://github.com/mkaczmarski07/360-panorama-vr
• Owner: MKaczmarski07
• License: mit
• Created: 2023-08-26T09:55:30.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-11T18:22:44.000Z (about 1 year ago)
• Last Synced: 2024-11-24T15:09:33.336Z (2 months ago)
• Topics: angular, deviceorientation-api, equirectanguar-projection, threejs, vr
• Language: TypeScript
• Homepage:
• Size: 33 MB
• Stars: 2
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](./src/assets/images/presentation.gif)

## Official Website 🌐

[panorama.kaczmarski.dev](https://panorama.kaczmarski.dev)

## Technology Stack

[Three.js 🔗](https://threejs.org)


[Angular 🔗](https://angular.io)


[TypeScript 🔗](https://typescriptlang.org)


[Sass 🔗](https://sass-lang.com)


## 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](https://dev.opera.com/articles/w3c-device-orientation-usage/#eulerlimitations).

## 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