Foreword
In the perspective projection camera PerspectiveCamera depth understanding Three.js in that article to explain the working principle of perspective projection camera and the corresponding answers to some parameters, the article also said that would explain the separate Three.js in another commonly used camera orthogonal camera OrthographicCamera , this article will explain in detail the working principle of orthogonal camera and the corresponding parameters of its usage, of course, in order to give readers a more intuitive understanding of orthogonal camera, I'll make a camera associated with the orthogonal demo to give readers an intuitive feel the charm of orthogonal camera.
Rationale
Three.js in-depth understanding of the perspective projection camera PerspectiveCamera article mentioned orthogonal cameras and perspective projection camera is the biggest difference between the projected size of the object is not affected by distance, he said bluntly point is the perspective projection camera projection object through the point (below a), corresponding to our eyes, the greater the distance, the smaller portion can be seen. Orthogonal projection object through the camera plane (below B), regardless of distance, projected onto the two-dimensional plane of the line is always parallel, so the size of the object looks will feel not affected.
Orthogonal camera Parameter Description
Realize a simple camera orthogonal code is as follows:
1 var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 ); 2 scene.add( camera );
new new THREE . OrthographicCamera () constructor is used to create an orthogonal camera, the constructor has six parameters, namely, left , right , Top , bottom , near , FAR .
left - the left side of view of the camera cone.
right - the right side of the camera frustum.
Top - view of the camera on the side of the pyramid.
bottom - bottom side view of the camera cone.
near - camera frustum proximal face.
FAR - camera frustum distal face.
Wherein, left value can not be greater than the right value, and left and right value must be located in the camera position on both sides of the x coordinate, or will not see the image. Corresponding to the top and bottom too, bottom value can not be greater than the top value, and is located in the camera position coordinate value y on both sides, or will not see the projected image. near and far are used to set the camera proximal and distal faces, is often said that the closest distance and a maximum distance. near smaller the value, the greater the projected image, whereas the smaller. However, near the maximum value of the projected object is not a factor of the size, the maximum size of the object projected impact or left , right , Top , bottom four parameters, but also on the shape of the projection of the object, it is provided, when these four parameters, left and right distance between the top andbottom ratio of the distance between the canvas and the original must be equal to the ratio of canvas, or will result in deformation of the shape of the projection object.
In order to better understand the orthogonal camera, I wrote a small Demo , the following code, the code we set the unified position of the camera corresponds xyz coordinates 0,15,70. To be able to have sex than in the scene I created a grid, creating a yellow sphere on the grid. Next, we turn relatively lower projection under different circumstances.
1 var scene = new THREE.Scene(); 2 console.log(scene) 3 var dom = document.getElementById('starry-frame'); 4 //var camera = new THREE.OrthographicCamera( dom.clientWidth / - 15, dom.clientWidth / 15, dom.clientHeight / 15, dom.clientHeight / - 15, 1, 1000 ); 5 var camera = new THREE.PerspectiveCamera( 45, dom.clientWidth / dom.clientHeight, 0.1, 1000 ); 6 camera.position.set(0,15,70); 7 var renderer = new THREE.WebGLRenderer(); 8 renderer.setSize( dom.clientWidth, dom.clientHeight ); 9 dom.appendChild( renderer.domElement ); 10 var geometry = new THREE.SphereGeometry( 5, 32, 32 ); 11 var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); 12 var sphere = new THREE.Mesh( geometry, material ); 13 sphere.position.set(0,5,0) 14 scene.add( sphere ); 15 var gridHelper = new THREE.GridHelper(50, 60); 16 gridHelper.rotation.y = -Math.PI / 2; 17 scene.add(gridHelper); 18 function render() { 19 renderer.render(scene,camera) 20 requestAnimationFrame(render) 21 } 22 render()
1 is a perspective projection camera model
Wherein the first map is disposed sphere position is 0,5,0; second view is set sphere position 0,5, -30. As can be seen, in the perspective projection mode, the size of the object from the camera as the object distance is changed, the smaller the size the greater the distance of the object.
2 orthogonal projection in left , right distance from the Top , bottom ratio of the distance of the original canvas canvas proportional relationship.
First picture shows left , right distance from the Top , bottom ratio of the distance of the original canvas canvas equal proportions; second photo shows left , right distance from the Top , bottom distance ratio than the original canvas large proportion; third picture shows the left , right distance from the Top , bottom distance ratio is less than the original canvas canvas ratio. From which we can draw the proportion must be consistent with the original proportions when using orthogonal camera, to prevent deformation of the graphic mapping out.
3 orthogonal camera left , right addition, Top and bottom added value to the camera position in the X , Y -coordinate relationship.
The first graph represents the left and right relative to the camera is smaller than the value x coordinate; second view showing left and right value is added is greater than the camera coordinate value x; third picture shows the top and bottom phase value is greater than the camera y coordinate values; the picture shows the fourth top and bottom addition value is smaller than the camera y coordinate values. It can be seen that the left , right and Top , bottom with the center coordinate value of the camera when there are cheaper and the position of the object image are larger error.
4 orthogonal camera left , right , Top , bottom value and the relationship between the camera coordinate.
left value is greater than the camera x -coordinate value, right smaller than the camera x -coordinate value, Top is greater than the camera y coordinate value, bottom is smaller than the camera y -coordinate value will result in the camera are not mapped image object, as shown below, can be seen in a dark scene.
Examples of orthogonal camera
Talk about the original intention of doing this instance, simply in order to understand the principles of orthogonal example above tells the camera through it, so following this example just to be able to give readers a better understanding of the orthogonal camera before going to write . In order to better understand Three.js orthogonal camera, so we browse the corresponding cases in the official website, the feeling whether it is a scene, or visual came good, plus my daughter was particularly fond of Three.js in instances the bird, so I decided to merge the two together, strength, purely to please daughter likes to know her daughter does not bother me happy to learn, but also hope readers generosity. Examples of the mobile mountain orthogonal camera is used, it can be seen that in any event moved, height and size corresponding to the mountains are will not change, a bird flying in the air by the perspective projection camera.
Example diagram is as follows:
Examples Preview Address: in-depth understanding of the orthogonal camera OrthographicCamera Three.js
Download example: in-depth understanding of the orthogonal camera OrthographicCamera Three.js
After words
I hope this helps to explain reading this blog readers! ! !