Three.js Study of orthogonal projection camera _javascript class Library

Objective

Three.js is a 3Djs library, the WebGL Open source framework of the more excellent one. In addition to WebGL, Three.js also provides renderer based on canvas, SVG tags, and debugging suggests using Chrome or Firefox.

1. Camera

The camera in graphics defines the projection mode of three-dimensional space to a two-dimensional screen.

The camera is divided into orthographic projection camera and perspective projection camera for projection mode.

2. The difference and application range of two kinds of cameras

Orthogonal projection:

Perspective projection:

Orthographic projections are like those in math class, and perspective projection has a basic point that the objects in the distance are smaller and smaller than the objects near them.

Orthographic projections are commonly used for cartography and modeling software, whereas for most other applications, perspective projections are usually used.

3. Orthogonal projection camera

The constructor of the orthogonal projection camera:

Three.orthographiccamera (Left,right,top,bottom,near,far)

The six parameters represent the position of the six faces taken by the orthogonal projection camera respectively.

Thenear represents the vertical distance between the near plane and the camera center point , and thefar represents the vertical distance between the far plane and the camera center point .

To maintain the horizontal ratio of the camera, the ratio of (Right-left) to (top-bottom) should be consistent with the width of the canvas ratio.

The values for near and far that are visible from the diagram should be positive and far>near. If the last two values are (0,0), that is, the near and far values are the same, the view body depth is not, the entire visual body is pressed into a plane, it will show incorrect.

4. Orthogonal projection Camera Example

Source:

<! DOCTYPE html>  

Where the THREE.MeshBasicMaterial wireframe Property (the underlying grid material) is true, renders the material as a wireframe.

You can see that the edges behind the current position will coincide exactly with the preceding:

　　4.1 Change the width ratio of sight view

Here the canvas ratio is 4:3, the camera's horizontal distance is 4, and the vertical distance is 3, so the height-to-width ratio remains unchanged (1:1).

If the camera's horizontal distance is reduced to 2,

var camera = new THREE. Orthographiccamera ( -1,1,1.5,-1.5,1,10);

The object will be stretched:

The camera's range of vision narrowed, resulting in the square in the range of the horizontal increase in the field, so the representation of the cube widened.

　　4.2 Change camera position

The camera position in the example is (0,0,5), because the camera is placed by default in the negative direction of the z axis, so you can see the cube at the origin.

Move the camera position to the right 1 units:

var camera = new THREE. Orthographiccamera ( -2,2,1.5,-1.5,1,10);

Camera.position.set (1,0,5);

The camera faces the object, so the camera moves to the right and the object is shifted to the left:

　　4.3 Change the position of the view body

Set the view to the right:

var camera = new THREE. Orthographiccamera ( -1,3,1.5,-1.5,1,10);

Camera.position.set (1,0,5);

The same as moving the camera right.

　　4.4 Change Camera angle

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

Camera.lookat (New THREE. Vector3 (0, 0, 0));

But now the camera is observed in the negative direction of the z axis, so the cube is not visible, only a black one. We can specify it by the LookAt function to look at the origin direction:

Camera.lookat (New THREE. Vector3 (0, 0, 0));

Note that the lookAt function accepts an instance of a THREE.Vector3 , and does not writecamera.lookAt(0, 0, 0)

Well, the above is three.js study of the orthogonal projection camera all content, hope to learn three.js help you, small series will also update on the Three.js article, please continue to pay attention to cloud habitat community.