about three.js Matrix update in


1. Overview

Draw a face using the following code:

'use strict';

function init() {
    //console.log("Using Three.js version: " + THREE.REVISION);   

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // position and point the camera to the center of the scene
    camera.position.set(0, 0, 100);   //Camera position
    camera.up.set(0, 1, 0);         //Which direction is the top of the camera
    camera.lookAt(new THREE.Vector3(1, 2, 3));          //Which coordinate does the camera look at.

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);

    // add the output of the renderer to the html element

    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshBasicMaterial({
        color: 0xAAAAAA

    var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    // add the plane to the scene

    // rotate and position the plane    
    plane.position.set(15, 8, -10);
    plane.rotation.x = THREE.Math.degToRad(30);
    plane.rotation.y = THREE.Math.degToRad(45);
    plane.rotation.z = THREE.Math.degToRad(60);

    renderer.render(scene, camera);

The printed view matrix and model matrix are as follows:

Remove the last rendering statement:

renderer.render(scene, camera);

After that, the printed view matrix and model matrix are as follows:

It can be found that the output results of the two are not the same, which actually involves three.js The problem of matrix updating in.

2. Detailed explanation

three.js Mesh and Camera in are inherited from Object3D, which provides an interface to update the graphic matrix:

After setting the graph transformation parameters of Mesh and camera respectively, you need to call updateMatrixWorld() to ensure that the graph matrix is correct:


But in the call renderer.render After that, three.js It makes the matrix update automatically. So unless necessary, model matrix and view matrix can be updated without display. and console.log It is asynchronous operation, so it is normal to print information. If it is a single step mode, if updateMatrixWorld() is not called, the initial matrix information will be displayed.

In addition, the projection matrix of Camera also deserves attention. The perspective Camera provides an interface for updating the projection matrix:

It is clearly stated in the document that after changing the projection parameters of Camera, the updateProjectionMatrix must be called once for the effect of Camera to take effect.

Posted on Mon, 01 Jun 2020 11:39:22 -0400 by kessels1234