Series Blog-three.js Getting Started Guide (Zhang Wenli)-Camera

The camera is such an abstraction, it defines the three-dimensional space to the two-dimensional projection of the screen, with "camera" such an analogy, we can intuitively understand the projection method.
The camera is divided into orthogonal projection camera and perspective projection camera for different projection methods. We need to choose the right camera for our program.

2.2 Orthographic projection vs Perspective projection

Give a simple example of the difference between an orthographic projection and a perspective projection camera. The results obtained using the perspective projection camera are similar to what the human eye sees in the real world as "near-large" (as in (a)), and the results obtained using an orthographic projection camera are like the effects that our teachers teach us in mathematical geometry classes, for parallel lines in three-dimensional space, Projection into a two-dimensional space must also be parallel (as in (b)).

So, does your program need an orthographic projection or a perspective projection camera?
In general, orthographic projections are typically used for cartographic, modeling software so that the proportions of objects are not altered by projection, whereas for most other applications, perspective projection is often used because it is closer to the human eye observation.

2.3 Orthographic projection Camera

Parameter introduction
The orthographic projection camera (orthographic camera) is set up intuitively, and its constructors are:

These six parameters represent the position of the six faces of the space taken by the orthogonal projection camera, which is surrounded by a cuboid, which we call the visual Body (Frustum). Only objects inside the scene (the gray part of the scene) may appear on the screen, and objects outside the scene will be cut off before being displayed.

To maintain the camera's proportional ratio, you need to ensure that the ratio of (Right-left) to (Top-bottom) is consistent with the canvas width and height.
Near and far both refer to the position of the camera position in the depth plane, and the camera should not shoot the object behind it, so both values should be positive. In order to ensure that objects in the scene are not ignored by the camera too close or too far away, general near values are set smaller, far values are set larger, depending on the position of the object in the scene.
Example description
Below, we explain the setting of the orthographic projection camera through a concrete example.
Example 2.3.1
Basic settings
Set up the camera:

var New Three. Orthographiccamera ( -2, 2, 1.5, -1.5, 1, ten); Camera.position.set (0, 0, 5

Create a cube with an edge length of 1 at the origin, and in contrast to the perspective, here we use wireframe instead of solid material to see the sides behind the cube:

var New Three. Mesh (new three. Cubegeometry (1, 1, 1),        new  three. Meshbasicmaterial ({            0xff0000,            true        

The resulting effect is:

We see that the result of the orthographic projection is a square, and the back edge is completely coincident with the front, which is the difference between the orthographic projection and the perspective projection.
Ratio of length to width
Here, our canvas width is 400px, the height is 300px, the camera horizontal direction distance 4, the vertical direction distance 3, therefore the aspect ratio remains unchanged. In order to test the effect of the length-to-width ratio change, we reduced the camera's horizontal distance to 2:

var New

The resulting result is that the horizontal direction is elongated:

Camera position
Next, let's look at the effect of the camera position on the rendering results. In the previous example, we set the camera at (0, 0, 5), and because the camera is placed in the negative direction of the z-axis by default, you can see the cube at the origin. Now, if we move the camera 1 units to the right:

var New Three. Orthographiccamera ( -2, 2, 1.5, -1.5, 1, ten); Camera.position.set (

The effect is that the object appears to move to the left:

If you think about it, it's not hard to understand. Just as you stand on the right, it seems that the object is moving relative to the left.
So, when setting up an orthographic projection camera, is it necessary to ensure that left and right are the opposite number? If not, what effect would it have? Below, we will change the original parameters (-2, 2, 1.5,-1.5, 1, 10) to (-1, 3, 1.5,-1.5, 1, 10), that is, set the view body to the right:

var New Three. Orthographiccamera ( -1, 3, 1.5, -1.5, 1, ten); Camera.position.set (

The resulting results are:

This is equivalent to the effect previously obtained by moving the camera to the right.

Look at the world from a different angle
So far, we have used cameras to observe the negative direction of the z axis, so we see a square. Now, we want to try to look at this cube. We have learned to set the position of the camera, and it is advisable to set it at (4,-3, 5):

Camera.position.set (4,-3, 5);

The camera is now viewed in the negative direction of the z axis, so the cube is not observed and only a black is seen. We can use the LookAt function to specify that it looks at the origin direction:

Camera.lookat (new

So we can look at the cube:

However, it is important to note that the LookAt function accepts a Three.vector3 instance, so do not write Camera.lookat (0, 0, 0), otherwise you can not get the ideal effect, and will not error, making it difficult to find the problem.
Now, congratulations on learning to set up an orthographic camera! Although it looks simpler, adding animations, interactions, and more can add a lot to your app!

2.4 Perspective Projection Camera

Parameter introduction
The constructors of the perspective projection camera (Perspective camera) are:

Let's take a look at these parameters with a picture of the perspective camera projection.

In perspective, the gray part is the scene, which is the area of the object that may be rendered. The FOV is the angle of the viewport in the vertical direction (angular rather than radian), as shown in the side view.
Aspect equals Width/height, which is the ratio of the camera's horizontal and vertical length, usually set to the horizontal scale of the canvas.
Near and far are the closest and farthest distances from the camera to the viewing body, both positive values, and greater than near.
Example description
Below, we learn from one of the simplest examples of setting up a perspective projection camera.
Basic settings
Example 2.4.1
Set the perspective projection camera, here the canvas length 400px, width 300px, so aspect set to 400/300:

var New Three. Perspectivecamera, 400/300, 1,Camera.position.set (0, 0, 5

As with example 2.3.1, set a cube with a side length of 1 at the origin:

var New Three. Mesh (new three. Cubegeometry (1, 1, 1),        new  three. Meshbasicmaterial ({            0xff0000,            true        

The resulting results are:

The effect of the proportional 2.3.1 Square, the perspective projection can see all the 12 edges, and there are nearly large and small effect, which is the difference from the orthogonal projection.
Vertical angle
Next, let's look at the effect of the FOV change on the rendering effect. We changed the original 45 to 60 to get this effect:

Why does the cube look smaller? We see from the side view below, although the actual size of the cube has not changed, but the camera's vertical angle is set larger, the apparent body becomes larger, so the cube relative to the entire size of the viewing body becomes smaller, it seems that the square appears to be smaller.

Note that changing the FOV does not cause a change in the ratio of the picture to the other, while changing the aspect will change the proportions. This effect is similar to section 2.3, which is not repeated here.

Series Blog-three.js Getting Started Guide (Zhang Wenli)-camera