This is my first day of taking part in the More textual challenge

The three. js library provides two different kinds of cameras: orthogonal projection cameras and perspective cameras. So let’s look at the difference between an orthographic projection and a transmission projection

For orthographic projection, the length of a straight line projected on the projection plane is different depending on the Angle of placement. As for perspective projection, the result of projection is not only related to the Angle of geometry, but also related to the distance. The way people observe the world is perspective projection. For example, the farther away you observe a railway, the smaller the width between the two tracks will be felt. Both orthographic projection and perspective projection, three.js encapsulates relevant projection algorithms. We only need to choose different projection methods according to different application scenarios.

Object of OrthographicCamera

/ / const constructor format camera = new THREE. The OrthographicCamera (left = 1, right = 1, top = 1, bottom = 1, near = 0.1, far = 2000) camera.position.set(200, 300, 200); Camera.lookat (scene.position); // Set camera position. // Set camera orientation (scene object to point to)Copy the code

OrthographicCamera receives 6 parameters, respectively represented as:

Left: Left margin of the render space

Right: The right edge of the render space

Top: The upper boundary of the render space

Bottom: The lower boundary of the render space

Near: indicates how far from the camera to start rendering. It is usually set to a very small value. The default value is 0.1.

Far: indicates how far away from the camera to finish rendering. If the value is set too small, part of the scene will be invisible. The default value is 1000.

So let’s look at this picture to get a sense of what these properties are.

Tip: The ratio of the distance between the left and right boundaries and the upper and lower boundaries should be consistent with the width to height ratio of the render window on the canvas, otherwise the 3d model will be stretched in one direction at different scales

PerspectiveCamera

Const camera = new THREE.PerspectiveCamera(fov = 50, aspect = 1, near = 0.1, far = 2000); camera.position.set(200, 300, 200); Camera.lookat (scene.position); // Set camera position. // Set camera orientation (scene object to point to)Copy the code

PerspectiveCamera receive four parameters, respectively is:

Fov: Stands for field of view, which is the range of angles that can be seen. The human eye can see about 180 degrees of field of view. The default value is 45 degrees. But generally the game will be set to 60-90 degrees.

Aspect: it means the aspect ratio of the render window, if a web site only has a full screen canvas canvas and canvas only a window, so the aspect of customer value is the web page window OuDeKuan ratio, the default value is the window. The innerWidth/window. The innerHeight.

Near: indicates how far from the camera to start rendering. It is usually set to a very small value. The default is 0.1.

Far: indicates how far away the camera is from rendering. If the value is set too small, part of the scene will be invisible. The default value is 1000.

Again, let’s use a diagram to get a sense of what these properties mean.

Finally, the camera placement. For perspective projection, the smaller the distance between the camera position and the position of the observation target pointed by lookAt, the larger the magnification of the 3D model in the Scene, and the smaller the scope that the perspective projection camera can shoot. At the same time, the part of the Scene that is beyond the camera parameter constraint will be cut out. Camera.position. set(100,200,200); For (20,20,20), as a result of the test you will find that the cube geometry is zoomed in and the outside areas are cropped.

If you’re looking at the exterior of a product, place the camera outside of the geometry. If you’re looking at an interior roaming preview, place the camera inside the 3d model of the room.

Conclusion:

There are two types of cameras available in three.js: The perspective projection camera uses a more real-world perspective to render the scene, while the orthogonal projection camera provides a 3D effect that is widely used in games.