“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

Last time we talked about the principle of the camera, this time in the code to practice the use of orthographic and perspective projection cameras, let’s take a look.

Orthographic camera

  • We draw a trapezoidal cylinder and use an orthographic camera to view it.
  • The previous code only needs to be changedinitCameraandinitObjectTwo parts of the code, the rest do not need to move
var cube;
function initObject() {
    // The top radius of the cylinder, the bottom radius of the cylinder, the height of the cylinder
    var geometry = new THREE.CylinderGeometry(70.100.200);
    // A non-shiny surface material can be used as a rough surface material, the reflection efficiency will be more even
    var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position = new THREE.Vector3(0.0.0);
    scene.add(mesh);
}
Copy the code
  • THREE.CylinderGeometryUsed to define cylindrical geometry
    • RadiusTop – The top radius of the cylinder, default is 1.
    • RadiusBottom – The bottom radius of the cylinder. Default is 1.
    • Height – The height of the column. Default is 1.
  • THREE.MeshLambertMaterialUsed to define a material with a rough surface, which has an even reflection efficiency
    • Color: material color
  • THREE.MeshDefining the grid model
function initCamera() {
    // To define the orthographic camera, we set the camera center point at half of the screen
    camera = new THREE.OrthographicCamera(
        window.innerWidth / -2.// Half of the distance from the center is negative
        window.innerWidth / 2.window.innerHeight / 2.window.innerHeight / -2.// Half of the distance from the center is negative
        10.1000
    );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt({ x: 0.y: 0.z: 0 });
}
Copy the code
  • We set the orthographic camera to look at half of the screen
  • The distance from the left plane to the center of the camera is negative
  • The distance from the right plane to the camera center is positive
  • The distance from the upper plane to the camera center is positive
  • The distance from the bottom plane to the camera center is negative
  • Set the camera 600 away from the center point

​

The effect is as follows Codepen sample code

Perspective projection camera

  • We just need to change the camera instance created in the code toTHREE.PerspectiveCamera, you can create perspective projection cameras
camera = new THREE.PerspectiveCamera(45, width / height, 1.10000);
Copy the code

Easy GUI library to manipulate camera angles

  • With the dat.gui.js library, you can quickly use some simple interface buttons
  • Warehouse address: github.com/dataarts/da…

Initialize the GUI operation interface

  • use
var param;
function createUI() {
    var ParamObj = function () {
        this.fov = 45
    }
    param = new ParamObj()
    var gui = new dat.GUI()
    // Add a button, parameter object, modified parameter, modified parameter range, name of label
    gui.add(param, "fov".0.180).name('Angle of view size')}Copy the code
  • Gui.add (param, “fov”, 0, 180) — Add a button, parameter objectparam, modified parametersfovAnd modify parameter ranges0-180.
  • .name — The name of the label
  • Interface effect:

  • When we pull on the blue bar, the value changes, and so does the parameter we defined

Dynamically change camera Angle

  • definechangeFovMethod, used to change perspective
  • definesetCameraFovMethod to set the camera Angle
// Set the camera Angle
function setCameraFov(fov) {
    camera.fov = fov; // Set the camera Angle
    camera.updateProjectionMatrix(); // Update the camera projection matrix
}
// How to change perspective
function changeFov() {
    setCameraFov(param.fov);
}
Copy the code
  • inanimationMethod, callchangeFovMethod, set the camera’s Angle of view every time rendering, and the Angle parameter obtained at this time is the latest Angle parameter set by the GUI
function animation() {
    changeFov();
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}
Copy the code
  • The effect is as follows:

Codepen sample code

conclusion

In this section, we mainly talk about the following contents:

  • OrthographicCamera THREE
  • 3.PerspectiveCamera
  • Use the DAT. GUI library to dynamically change the camera view