You can create a 360-degree panorama of a small planet in 3 lines of code. It’s super easy

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

background

Panolensjs is a very interesting threejs extension library, last time I used PanolensJS to achieve a 360-degree panorama (teach you to use 3 steps of code to achieve a 360-degree panorama, super simple), because panolensJS operation is very simple, the effect is very cool, Threejs is very friendly for novice programmers. Because the last article’s likes and favorites are not bad, so I decided to use PanolensJS to achieve a 360-degree panoramic small planet, the same code is very simple only three lines, at the same time, the effect is also very cool, without further ado, we will implement it next!

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.

panolensjsThe 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…

CSS code

Style initialization

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    background-color: #000;
}
Copy the code

The introduction of js library

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

Js code

1. Container initialization

var viewer = new PANOLENS.Viewer({ 
    controlBar: false 
    });
Copy the code

2. Set up theAn asteroidInitialize the

var littlePlanet = new PANOLENS.ImageLittlePlanet("https://pchen66.github.io/panolens.js/examples/asset/textures/equirectangular/planet.jpg");
Copy the code

3. theAn asteroidPut it in a container

viewer.add(littlePlanet);
Copy the code

Results show

conclusion

panolensjsIt’s a very playable onethreejsExtension library, its official website has a lot of usepanolensjsImplementation examples, such as usingpanolensjsGoogle Street View, or add anchor points, can add hints and operations, and so on, here I will not say too much, we can go to its official website to read, I hope to help you.