“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
- threejs
- 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.
panolensjs
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:
- Three. Min. Js: pchen66. Making. IO/panolens js…
- Panolens. Min. Js: pchen66. Making. IO/panolens js…
- 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
- Container initialization
var viewer = new PANOLENS.Viewer({
controlBar: false
});
Copy the code
- Set up the
An asteroid
Initialize the
var littlePlanet = new PANOLENS.ImageLittlePlanet("https://pchen66.github.io/panolens.js/examples/asset/textures/equirectangular/planet.jpg");
Copy the code
- the
An asteroid
Put it in a container
viewer.add(littlePlanet);
Copy the code
Results show
conclusion
panolensjs
It’s a very playable onethreejs
Extension library, its official website has a lot of usepanolensjs
Implementation examples, such as usingpanolensjs
Google 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.