sanyuered / AR-3D

A 3D website that includes a Panorama Viewer and a 3D Viewer using the device orientation control.

Chinese README

Updated

Date	Update
2022-10-29	New: Use the mouse wheel to zoom the panorama.
2022-01-02	New: Gamma color space correction.
2021-07-21	New: This project is the same as https://github.com/sanyuered/WeChat-MiniProgram-AR-3D, but it is a pure front-end website.

Visit a live example

https://sanyuered.github.io/AR-3D/

Introduction of 3D website with THREE.JS

Three.js is a JavaScript 3D library.

Three.js

Index Page

Panorama Viewer

When start a device motion, the device orientation control will rotate the screen.

When stop the device motion, use gestures to rotate the screen.

3D Viewer

We can rotate the screen by a device orientation control and gestures.

Set your image url

File: /package_panorama/photo/photo.js

// A panorama image url
const imageUrl = '../../assets/sample.jpg';

Set your model url

File: /package_3d_viewer/camera/camera.js

// a gltf model url
const modelUrl = '../../assets/robot.glb';