This is the 30th day of my participation in the August Challenge

Camera Camera

The camera is an object abstracted from three. js. With this object, we can define the display content and display different contents by moving the camera position. Here’s a look at the general camera properties and common camera objects in three.js.

OrthographicCamera and PerspectiveCamera are two kinds of cameras commonly used to capture the object model shown in the scene. They have some common properties and methods:

Since cameras are inherited from the three. Object3D object, properties like position, rotation, and scale can be set directly to the camera object. We can even use the add() method to subclass the camera object, move the camera and its subclasses will move with it, and we can use this feature to create something like a HUD-type display.

Target focus attribute and lookAt() method

Vector3: Vector3: Vector3: Vector3: Vector3: Vector3

camera.target = new THREE.Vector3(0.0.0);
camera.lookAt(new THREE.Vector3(0.0.0));
Copy the code

We can also change the orientation of the camera to position in the model grid. If the position of the object changes, the focus direction of the camera will also change:

var mesh = new THREE.Mesh(geometry, material);
camera.target = mesh.position;  / / tips
/ / or
camera.lookAt(mesh.position);
Copy the code

OrthographicCamera OrthographicCamera

Render a scene using OrthographicCamera. All objects and models are rendered according to their inherent size and precision. It is commonly used in industrial precision or 2D planes because it can fully display the size of the object.

The above picture can clearly show the range of the orthogonal camera, and the content it displays is a cube structure. Through the picture, we find that as long as we determine the six values of TOP, left, right, bottom, near and far, we can determine the area of the scene captured by the current camera, and the content outside this area will not be rendered. So, the way we create a camera is:

new THREE.OrthographicCamera( left, right, top, bottom, near, far );
Copy the code

Here we create an orthogonal camera that displays objects in a box with a length, width and height of 4 in front of the camera position in the scene:

var orthographicCamera = new THREE.OrthographicCamera(-2.2.2, -2.0.4);
// There is no need to place the camera in the scene. If you need to add child elements or other special operations, you still need to add the camera to the scene
scene.add(orthographicCamera); 
Copy the code

Under normal circumstances, the content displayed by the camera needs to be the same proportion as the content displayed by the window to display the effect that is not stretched and deformed:

var frustumSize = 1000; // Set the display to 1000 height in front of the camera
var aspect = window.innerWidth / window.innerHeight; // Calculate the aspect ratio of the scene
var orthographicCamera = new THREE.OrthographicCamera( 
  frustumSize * aspect / - 2, 
  frustumSize * aspect / 2,
  frustumSize / 2, 
  frustumSize / - 2.1.2000 
); Left, top, right, bottom
Copy the code

We can also dynamically modify some of the attributes of the orthogonal camera. Note that after the modification, we need to call the camera updateProjectionMatrix() method to update the camera memory:

var frustumSize = 1000; // Set the display to 1000 height in front of the camera
var aspect = window.innerWidth / window.innerHeight; // Calculate the aspect ratio of the scene
var orthographicCamera = new THREE.OrthographicCamera(); // Instantiate an empty orthogonal camera
orthographicCamera.left = frustumSize * aspect / - 2; // Set the left value
orthographicCamera.right = frustumSize * aspect / 2; // Set the value of right
orthographicCamera.top = frustumSize / 2; // Set the value of top
orthographicCamera.bottom = frustumSize / - 2; // Set the value of bottom
orthographicCamera.near = 1; // Set the value of NEAR
orthographicCamera.far = 2000; // Set the value of far

// Note that you must finally call the updateProjectionMatrix() method to update
orthographicCamera.updateProjectionMatrix();
Copy the code

Since the browser window can be modified at will, we sometimes need to listen for changes in the browser window, get the latest aspect ratio, and reset the related properties:

var aspect = window.innerWidth / window.innerHeight; // Retrieve the aspect ratio of the scene

// Reset left right top bottom
orthographicCamera.left = frustumSize * aspect / - 2; // Set the left value
orthographicCamera.right = frustumSize * aspect / 2; // Set the value of right
orthographicCamera.top = frustumSize / 2; // Set the value of top
orthographicCamera.bottom = frustumSize / - 2; // Set the value of bottom

// Finally, be sure to update your data
orthographicCamera.updateProjectionMatrix();

// The display area size has changed, we also need to change the renderer scale
renderer.setSize(window.innerWidth, window.innerHeight);
Copy the code

PerspectiveCamera PerspectiveCamera

Perspective camera is the most commonly used camera that simulates the perspective of the human eye. The page rendered by it is a near large and far small effect.

Let’s first look at how the render scope is generated:

  • First, we need to determine a FOV value, which is used to determine the vertical Angle of view in front of the camera. The larger the Angle, the more content we can view.
  • Then, we determine a render aspect ratio, which is best set to the aspect ratio of the display area of the page, so that we can view the generated image without the effect of stretching deformation, at this point, we can determine the previous generated content area is a four-pyramid area.
  • Finally, what we need to determine is the minimum value near and the maximum value FAR of the camera’s rendering range. Note that these two values are the distance from the camera. After determining the value, the range displayed by the camera is the range of a near small and large four-prism, and all the content we can see is within this range.
  • According to the above principle, we need to determine the current perspective camera’s rendering range by setting foV vertical Angle, aspect Angle width to height ratio and near closest rendering distance far furthest rendering distance.

Here is the creation of a perspective camera:

var perspectiveCamera = new THREE.PerspectiveCamera( 45, width / height, 1.1000 );
scene.add( perspectiveCamera );
Copy the code

We set the front Angle of view to 45 degrees, and set the width and height to the ratio of the width of the display window divided by the height, to display objects within the distance of 1 to 1000.

After creating the perspective camera properties, we can also modify them according to our personal needs, but note that after modifying the camera properties, we need to call updateProjectionMatrix() to update them:

var perspectiveCamera = new THREE.PerspectiveCamera( 45, width / height, 1.1000 );
scene.add( perspectiveCamera );

// Modify the current camera properties
perspectiveCamera.fov = 75; // Modify the camera foV
perspectiveCamera.aspect = window.innerWidth/window.innerHeight; // Modify the camera's aspect ratio
perspectiveCamera.near = 100; / / modify near
perspectiveCamera.far = 500; / / modify far

// Last update
perspectiveCamera.updateProjectionMatrix();
Copy the code

If the display window of the current scene browser changes, for example, after the width and height of the browser is changed, we need to set the scene automatic update, the following is a common case:

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight; // Reset the aspect ratio
    camera.updateProjectionMatrix(); // Update the camera
    renderer.setSize(window.innerWidth, window.innerHeight); // Update render page size
}
window.onresize = onWindowResize;
Copy the code

Camera plugin

Download: github.com/mrdoob/thre…

Usage: Select the camera and instantiate it

function initControl() {
    control = new THREE.OrbitControls(camera, renderer.domElement);
}
Copy the code

Execute the init method

function init() {  // 3d three elements
    initRenderer();   / / rendering
    initScene();  / / the scene
    initCamera();  / / camera

    initMesh();  / / object

    initControl();
    animate();  // Rotate, animate
}
Copy the code

Update is performed on each frame

function animate() {
    requestAnimationFrame(animate); // loop over the function

    mesh.rotation.x += 0.01; // A 0.01radian half turn along the x axis is 180 degrees per frame
    mesh.rotation.y += 0.02; // Rotate the grid model 0.02 radians per frame along the Y-axis
    stats.update();
    control.update();
    renderer.render(scene, camera); // Render the interface
}
Copy the code