“This is the 19th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

background

Talking about 360-degree panorama, I firmly believe that it will not be unfamiliar to those who are fond of shooting. Compared with general shooting, 360-degree panorama is interactive and immersive experience.

The 360-degree panorama allows customers to watch random angles in the scene without dead angles, and can be dragged around and around casually, and can also be changed to larger or smaller, so that customers can watch the scene as they actually do, just as if they are in the scene. Whether it is urban street view, tourist attractions or interior space design, The hotel rooms are able to be displayed using 360-degree panoramic shots. VR panorama is undoubtedly the best way to choose a display when you must truly, comprehensively and visually represent a scene.

technology

  1. threejs
  2. panolensjs

introduce

1. threejs

Threejs is a Third-Party WebGL library written in JavaScript. Provides a lot of 3D display capabilities.

2. panolensjs

Panolensjs is based on Threejs, a 3D framework, and its main research areas are panorama, virtual reality and potentially augmented reality.

The document

Making: github.com/pchen66/pan…

Documents: pchen66. Making. IO/Panolens / # D…

implementation

To prepare

Before we start writing code, we need to prepare a few things:

  1. Three. Min. Js: pchen66. Making. IO/panolens js…
  2. Panolens. Min. Js: pchen66. Making. IO/panolens js…
  3. 360 images: pchen66. Making. IO/panolens js…

start

1. Create an HTML and folder as shown below

The HTML code

Create a container

    <div id="container"></div>
Copy the code

CSS code

 html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

#container {
    width: 100%;
    height: 100%;
}
Copy the code

Introducing JS plugins

<script src="./js/three.min.js"></script>
 <script src="./js/panolens.min.js"></script>
Copy the code

Js code

  1. Initialize container and partial Settings
let viewer = new PANOLENS.Viewer({
    container: document.querySelector('#container'),
    controlButtons: ['fullscreen'.'setting'.'video'].autoRotate: true.// Auto play
    autoRotateActivationDuration: 2000./ / the length
    autoRotateSpeed: 0.3 / / speed
});
Copy the code
  1. Add images (if the image address is online)
let panorama = new PANOLENS.ImagePanorama('https://pchen66.github.io/panolens.js/examples/asset/textures/equirectangular/view.jpg');
Copy the code
  1. Put the picture in a container
viewer.add(panorama);
Copy the code
  1. The effect is as follows:

Related articles

Vue3.0 + TS + Threejs 3D text (Hello Juejin) and demo details

Rotate the Nuggets logo with Threejs