THREE. JS getting started tutorial (6) how to create your own Panorama

Translation
Three. js is a great open-source WebGL library. WebGL allows JavaScript to operate on GPUs and implement 3D in the browser. However, this technology is still in its development stage, and there is a shortage of materials. Fans should learn it through the Demo source code and the source code of Three. js.
0. Introduction
The panorama is very cool. Using Three. js to create a panorama is not that difficult.
To create a panorama, you need a software to create a panoramic image (Note: if you do not have any special devices ). I used Microsoft Photosynth software on the iPhone for production.
1. Environment texture
What is environment texture first? In WebGL or OpenGL, they are actually special cube textures. A cube texture is an observation of the entire scene (virtual or realistic). The scene is "pasted" on the internal surface of the cube. Imagine you are standing on the top of the hill, looking forward, looking left, looking right, looking up, looking down, and finally looking back. Every time you see the internal surface of the cube, you are standing at the center of the cube. If the cube is large enough, it is difficult to tell the Cube's edges and corners, and it gives you the illusion that you are in a very large environment. If you haven't figured it out, the cube maps entries on Wikipedia will be very helpful.
This is cool, but how can this be used? We can do the same as reflection and refraction. In fact, both functions are built into the GLSL and WebGL coloring language. You only 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.
Half Axis: This term serves cube textures. Because we usually use three axes to describe three-dimensional space: X axis, Y axis, and Z axis, the image used for cube texture is also identified by the Axis name. There are a total of six images, two images for each axis, one for the positive and the other for the negative.
2. Create a panoramic image
The first step in creating a panoramic image is to take a picture of the app on your mobile phone. I circled the financial district of London and took a picture in Gherkin. I got the following picture:
 
It is worth noting that this application makes the image paste on the sphere. This looks good, but now we need to paste it into the surface of a cube, so we have to deal with this picture.
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 six normal projection cameras, each of which corresponds to a half axis. Finally, I saved the images captured by these six cameras. It is complicated to complete, and there is no need to explain it here. So I wrote a Blender script file and everything was set.

To use this script file, you only need:
1. rename your panorama to environment.jpg;
2. Place the Panorama and Blender script files in the same folder;
3. Load the script file;
4. Click the Animation button on the right;
5. Wait a moment and the six images have been created.
Cool, right? Now you can rename these images to match each half 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. Add scenario
Now we have obtained the environment texture and loaded it into the scene. Three. js makes this very simple:
Copy codeThe Code is as follows:
// Specifies the url of the texture image.
Var urls = [
'The path/to/pos-x.png ',
'The path/to/neg-x.png ',
'The path/to/pos-y.png ',
'The path/to/neg-y.png ',
'The path/to/pos-z.png ',
'Path/to/neg-z.png'
],
// Package it into the desired object
Cubemap = THREE. ImageUtils.
LoadTextureCube (urls );
// Set the format to RGB.
Cubemap. format = THREE. RGBFormat;

Now you only need to specify cubemap to a material!
Copy codeThe Code is as follows:
Var material = new THREE
. MeshLambertMaterial ({
Color: 0 xffffff,
EnvMap: cubemap
});

5. Summary
In this way, it is cool to implement a panorama, especially you can make your own place as a WebGL panorama. As usual, I packed the source code for this tutorial.