Home > Developer > Web Develop
The camera is divided into orthogonal projection camera and perspective projection camera.
Give a simple example of the difference between an orthographic projection and a perspective projection camera. The result of using the perspective projection camera is similar to what the human eye sees in the real world as "near large and small" (as in (a));
The results obtained by using an orthographic projection camera are like the effect that our teacher teaches us in the mathematical geometry class, and for parallel lines in three-dimensional space, projection into a two-dimensional space must also be parallel (as in (b)).
(a) perspective projection, (b) orthographic projection
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. Of course, there is no right or wrong camera choice, you can use more features, choose a better effect of the camera.
The orthographic projection camera (orthographic camera) is set up intuitively, and its constructors are:
THREE.OrthographicCamera(left, right, top, bottom, near, far)
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 proportions, you need to ensure that the proportions are (right - left) (top - bottom) consistent with the canvas width and height.
nearAnd far both refer to the position of the camera position in the depth plane, and the camera should not take the object behind it, so both values should be positive. In order to ensure that the objects in the scene are not ignored by the camera too close or too far away, the general value is set to a smaller value and near far the values are set to a larger size, depending on the position of the object in the scene.
Below, we explain the setting of the orthographic projection camera through a concrete example.
Basic settings
Set up the camera:
VarCamera= NewThree.Orthographiccamera(-2, 2, 1.5, -1.5 1, 10 camera.. (0, 0 , 5); . Addcamera Create an edge-length cube at the origin, 1 in contrast to the perspective effect, where we use a wireframe material instead of a solid to see the sides behind the cube:
VarCube= NewThree.Mesh(NewThree.cubegeometry (1, 1, 1), Span class= "KWD" >new Three. Meshbasicmaterial ({ Color: 0xff0000, Wireframe: }) ); . Addcube <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "><HTML> <Head> <Scripttype= "Text/javascript"src= "Libs/three.js"></Script> <Scripttype= "Text/javascript"> functioninit () {varrenderer= Newthree. Webglrenderer ({canvas:document.getElementById ('Maincanvas') }); Renderer.setclearcolor (0x000000); varScene= Newthree. Scene (); //Camera //Canvas size is 400x300 varCamera= Newthree. Orthographiccamera (-2, 2, 1.5, -1.5, 1, Ten); Camera.position.set (0, 0, 5); //Camera.lookat (new three. Vector3 (0, 0, 0));Scene.add (camera); //a cube in the scene varCube= Newthree. Mesh (Newthree. Cubegeometry (1, 1, 1), Newthree. Meshbasicmaterial ({color:0xff0000, wireframe:true }) ); Scene.add (Cube); //Renderrenderer.render (scene, camera); } </Script> </Head> <Bodyonload= "init ()"> <CanvasID= "Maincanvas"width= "400px"Height= "300px" ></Canvas> </Body></HTML>
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 widthHere, our canvas width is 400px , the height is, the 300px 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 reduce the distance of the camera's horizontal direction to 2 :
var camera = new THREE.OrthographicCamera(-1, 1, 1.5, -1.5, 1, 10);
The resulting result is that the horizontal direction is elongated:
[+] View Original
Camera positionNext, let's look at the effect of the camera position on the rendering results. In the previous example, we set the camera to (0, 0, 5) position, and because the camera is placed in the negative direction of the z axis by default, we can see the cube at the origin. Now, if we move the camera to the right by 1 one unit:
VarCamera= New Three. Orthographiccamera (-2, 2, 1.5 -1.5, 1, 10); . Position. (1, 0 , 5 The effect is that the object appears to move to the left:
[+] View Original
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 guarantee the left right opposite number? If not, what effect would it have? Below, we will change the original parameter, that is (-2, 2, 1.5, -1.5, 1, 10) (-1, 3, 1.5, -1.5, 1, 10) , the view body is set to more right:
VarCamera= New Three. Orthographiccamera (-1, 3, 1.5 -1.5, 1, 10); . Position. (0, 0 , 5 The resulting results are:
[+] View Original
The attentive reader has found that this is equivalent to the effect previously obtained from moving the camera to the right.
Look at the world from a different angleSo 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've learned to set the location of the camera, so you might want to set it up here (4, -3, 5) :
camera.position.set(4, -3, 5);
But now the camera is looking in the negative direction of the z axis, so the cube is not visible and only a black is seen. We can lookAt specify it by function to look at the origin direction:
camera.lookAt(new THREE.Vector3(0, 0, 0));
So we can look at the cube:
[+] View Original
However, it is important to note that the lookAt function accepts an 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 for you to find the problem.
Three.js orthographic projection Camera
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
