Translation sequence
Three.js is a great open source WebGL Library, WebGL allows JavaScript to manipulate the GPU, realizing the true meaning of 3D at the browser end. But at present this technology is still in the development stage, the material is extremely scarce, the amateur learns basically to through the demo source code and three.js own source code to study.
0. Introduction
Panorama is very cool. It's not so difficult to make a panoramic picture of yourself using Three.js.
To make a panorama, you need a piece of software to make a panoramic picture (if you don't have those special devices). I use the Microsoft Photosynth software on the iphone to make it.
1. Environment Texture
First, what is the environmental texture? They are actually special cube textures in WebGL or OpenGL. A cube texture is an observation of the entire scene (virtual or realistic), and the appearance of the scene is "affixed" to the inner surface of the cube. Imagine you are standing on the top of the mountain, looking forward, look to the left, look right, look up, look down, and look backwards. Every time you see the inner surface of the cube, you stand at the center of the cube. If the cube is large enough, it's hard to tell the edges and corners of the cube and give you the illusion that you are in a very large environment. If you haven't figured it out, then the cube maps entries on Wikipedia will be very helpful.
It's cool, but how does it work? We can act as reflections and refraction, and in fact the functions of both are already built into the GLSL,WEBGL shader language. All you have to do is pass the shader 6 texture pictures, 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 serves the cube texture. Because we usually use three axes to describe three-dimensional space: The x axis, the y axis, the z axis, the picture used for the cube texture is also identified by the name of the axis. Altogether six pictures, each axis two pictures, a positive half axis one, a negative half axis one.
2. Create a panoramic picture
The first step in creating a panoramic picture is to get out of the open and use the apps on your phone to take a picture. I took a round in the financial District of London and took a picture in Gherkin. I got the following picture:
It is worth pointing out that this application makes the picture the kind that is attached to the sphere. It looks good, but we now need to put it on the inner surface of a cube, so we have to deal with this picture.
3. Convert to Cube
Let me briefly introduce this part. I loaded the photo I just received into a 3D modeling software, such as Maya or blender, and then pasted it onto the inner surface of a sphere. Then I created 6 cameras with orthographic projections, each of which corresponds to a half axis. Finally I saved the images captured by these 6 cameras. Concrete how to complete more complex, there is no need to explain here, so I wrote a blender script file, everything is set up.
using this script file you just need to：
1. Rename your own panoramic view to environment.jpg;
2. Put panorama and Blender script files under the same folder;
3. load script file;
4. Click on the right side of the Animation button;
5. Wait a while, 6 images have been created.
Pretty cool, huh? Now you can rename the images so that they match each of the half axes. Like this:
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 Scene
Now we've got the environment texture and load it into the scene. Three.js makes this very simple:
Copy Code code as follows:
The URL of the 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 '
],
Packed into the objects we need
CubeMap = THREE. Imageutils.
Loadtexturecube (URLs);
Set the format to RGB
Cubemap.format = THREE. Rgbformat;
Now you just have to assign the cubemap to a material.
Copy Code code as follows:
var material = new THREE
. Meshlambertmaterial ({
COLOR:0XFFFFFF,
Envmap:cubemap
});
5. Summary
That's it, it's cool to realize a panoramic view, especially if you can make your own place into a WebGL panorama. As always, I packed up the source code for this tutorial.
