THREE.JS introductory tutorial (6) Creating your own panorama implementation steps_Basic knowledge

Translation
Three.js is a great open source WebGL library. WebGL allows JavaScript to operate the GPU and achieve true 3D on the browser side. However, this technology is still in the development stage, and the information is extremely scarce. Enthusiasts basically have to learn through the Demo source code and the source code of Three.js itself.
0. Introduction
Panoramas are very cool. Making your own panorama isn't that difficult with Three.js.
To make a panorama, you need a software to make a panorama picture (Translator's Note: If you don't have those special equipment). I used Microsoft Photosynth software on my iPhone to create it.
1. Environment texture
First of all, what is environment texture? In WebGL or OpenGL they are actually a special cube texture. A cube texture is an observation of an entire scene (virtual or real), with the scene's appearance "pasted" to the interior surface of the cube. Imagine you are standing on the top of a mountain, looking forward, to the left, to the right, up, down, and finally back. Every time you see the inner surface of the "cube" you are standing in the center of the cube. If the cube is large enough, it will be difficult to distinguish the edges and corners of the cube, giving you the illusion that you are in a large environment. If you haven't figured it out yet, the Wikipedia entry on cube maps can be very helpful.
This is cool, but how does it work? We can do things like reflection and refraction, and in fact the functions for both are already built into GLSL, the shader language of WebGL. You just need to pass 6 texture images to the shader, each representing an inner surface of the cube, and then tell WebGL that this is a cube texture, and then you can use the above effect.
Semi-axis: This term is used for cube textures. Because we usually use three axes to describe three-dimensional space: x-axis, y-axis, and z-axis, the pictures used for cube textures are also identified by the names of the axes. There are six pictures in total, two pictures for each axis, one for the positive half-axis and one for the negative half-axis.
2. Create a panorama
The first step in creating a panorama is to go outside and take a photo using an app on your phone. I walked around London's financial district and then took a photo in Gherkin. I got the following image:

It’s worth pointing out that this app makes the image stick to a sphere. This looks good, but we now need to attach it to the inner surface of a cube, so we'll have to work on the image a bit more.
3. Convert to cube
I will briefly introduce this part. I loaded the photo I just obtained into a 3D modeling software, such as Maya or Blender, and pasted it onto the inner surface of a sphere. Then I created 6 orthographic cameras, each corresponding to a semi-axis. Finally I saved the images captured by these 6 cameras. How to complete it is quite complicated and there is no need to explain it here, so I wrote a Blender script file and everything was set up.

To use this script file you only need to :
1. Rename your own panorama to environment.jpg;
2. Combine the panorama and Blender script files Place it in the same folder;
3. Load the script file;
4. Click the Animation button on the right;
5. Wait a moment, 6 images have been created.
Very cool, right? Now you can rename the images to match each semi-axis. For example:
•0001.png → pos-z.png
•0002.png → neg-x.png
•0003.png → neg-z.png
•0004.png → pos-x.png
•0005.png → neg-y.png
•0006.png → pos-y.png
4. Join the scene
Now we have The environment texture is obtained and then loaded into the scene. Three.js makes this very easy:

Copy the code The code is as follows:

// URL of texture image
var urls = [
'path/to/pos-x.png',
'path/to/neg-x.png',
'path/to/pos -y.png',
'path/to/neg-y.png',
'path/to/pos-z.png',
'path/to/neg-z.png'
],
// Package into the object we need
cubemap = THREE.ImageUtils.
loadTextureCube(urls);
// Set the format to RGB
cubemap.format = THREE .RGBFormat;

Now you only need to assign the cubemap to a material!

Copy code The code is as follows:

var material = new THREE
.MeshLambertMaterial({
color: 0xffffff,
envMap: cubemap
});

5. Summary
That’s it, it’s cool to implement a panorama, especially you can make your own place as a WebGL panorama. As usual, I packaged the source code for this tutorial