Preface
Three.js is a 3Djs library, one of the most excellent webGL open source frameworks. In addition to webGL, Three.js also provides a renderer based on Canvas and SVG tags. It is recommended to use Chrome or Firefox for debugging.
1. Camera
The camera in graphics defines how three-dimensional space to two-dimensional screens are projected.
For projection methods, cameras are divided into orthogonal projection cameras and perspective projection cameras.
2. The difference and scope of application of the two cameras
Orthogonal projection:
Perspective projection:
Orthogonal projection is like a pictured in mathematics class; while perspective projection has a basic point, that is, objects in the distance are smaller than objects in the near, and are larger and smaller in the near.
For drawing and modeling software, orthogonal projection is usually used; for most other applications, perspective projection is usually used.
3. Orthogonal projection camera
The constructor of an orthogonal projection camera:
Three.OthographicCamera(left,right,top,bottom,near,far)
The six parameters represent the positions of the six faces captured by the orthogonal projection camera.
Among them, near represents the vertical distance between the near plane and the center point of the camera ; far represents the vertical distance between the far plane and the center point of the camera .
To maintain the horizontal and vertical ratio of the camera , the ratio of (right-left) to (top-bottom) must be consistent with the aspect ratio of canvas.
As can be seen from the figure, the values of near and far should be positive, and far>near . If the last two values are (0, 0), that is, the values near and far are the same, the depth of the viewing body is gone, and the entire viewing body is pressed into a plane, the display will be incorrect.
4. Orthogonal projection camera example
Source code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"><title>3.js test 2</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x0000000); var scene = new THREE.Scene(); // Set the camera var camera = new THREE.OthographicCamera(-2, 2, 1.5, -1.5, 1, 10); camera.position.set(0, 0, 5); //camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // Create a cube var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }) ); scene.add(cube); // render renderer.render(scene, camera); } </script> </body></html> Where, if the wireframe property of THREE.MeshBasicMaterial is true , the material will be rendered into a wireframe.
You can see that the edge behind the current position will completely coincide with the one in front:
4.1 Change the length and width ratio of the view
Here, the aspect ratio of canvas is 4:3, the horizontal distance of the camera is 4, and the vertical distance is 3, so the length and width ratio remains unchanged (1:1).
If the horizontal distance of the camera is reduced to 2,
var camera = new THREE.OthographicCamera(-1,1,1.5,-1.5,1,10);
Objects will be lengthened:
The camera's field of view has become narrower, resulting in an increase in the lateral proportion of the cube within the field of view, which is manifested as a widening of the cube.
4.2 Change the camera position
The camera position in the example is (0,0,5). Since the camera is placed in the negative direction of the z-axis by default, you can see the cube at the origin.
Move the camera position by 1 unit to the right:
var camera = new THREE.OthographicCamera(-2,2,1.5,-1.5,1,10); camera.position.set(1,0,5);
The camera faces the object, so the camera moves right and the object being illuminated moves left:
4.3 Change the position of the view
Set the view to the right:
var camera = new THREE.OthographicCamera(-1,3,1.5,-1.5,1,10); camera.position.set(1,0,5);
Just like moving the camera right.
4.4 Change the camera angle
camera.position.set(4,-3,5); camera.lookAt(new THREE.Vector3(0, 0, 0));
But now the camera is observing along the negative direction of the z-axis, so the cube cannot be observed, only a piece of black is seen. We can specify the direction of the origin through the lookAt function:
camera.lookAt(new THREE.Vector3(0, 0, 0));
Note that lookAt function accepts an instance of THREE.Vector3 , do not write it as camera.lookAt(0, 0, 0)
Okay, the above is the entire content of Three.js learning orthogonal projection camera. I hope it will be helpful for everyone to learn Three.js. The editor will update articles about Three.js one after another. Please continue to pay attention to Wulin.com.