Why does setting the position of my mesh not negate the previous translation?

Question

I am creating a simple "Hello World' Three.js application and I am curious to know why this works .

Firstly, I create and show a centered "Hello World" from the code snippet below. This code snippet is responsible for centering the text and moving it back 20 units.

/* Create the scene Text */
let loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function (font) {

    /* Create the geometry */
    let geometry_text = new THREE.TextGeometry( "Hello World", {
        font: font,
        size: 5,
        height: 1,
    });
    /* Create a bounding box in order to calculate the center position of the created text */
    geometry_text.computeBoundingBox();
    let x_mid = geometry_text.boundingBox.max.x - geometry_text.boundingBox.min.x;
    geometry_text.translate(-0.5 * x_mid, 0, 0); // Center the text by offsetting half the width

    /* Currently using basic material because I do not have a light, Phong will be black */
    let material_text = new THREE.MeshBasicMaterial({
        color: new THREE.Color( 0x006699 )
    });

    let textMesh = new THREE.Mesh(geometry_text, material_text);
    textMesh.position.set(0, 0, -20);
    //debugger;

    scene.add(textMesh);
    console.log('added mesh')
} );

Now notice here that I perform the translation first

geometry_text.computeBoundingBox();
    let x_mid = geometry_text.boundingBox.max.x - geometry_text.boundingBox.min.x;
    geometry_text.translate(-0.5 * x_mid, 0, 0); 

and then the position is performed to move the mesh

    let textMesh = new THREE.Mesh(geometry_text, material_text);
    textMesh.position.set(0, 0, -20);

Now my confusion comes from that fact that if I remove my translation, then my "Hello World" text is not centered. However after my translation is completed, I am setting the position on my mesh to (0, 0, -20) , shouldn't this set_position call overwrite my previous translation and move the object to the position (0, 0, -20) , why is my text still centered eventhough my set_position is called after my translation?

Answer 1

This is because the call to THREE.TextGeometry.translate() ends up calling THREE.Geometry.applyMatrix() with the corresponding translation matrix, which bakes the transformation by directly modifying the vertex coordinates. See Geometry.js#L149 for the source.

In other words, before the call

textMesh.position.set(0, 0, -20);

the mesh transformation matrix was still the identity matrix. Mesh transformation differs from geometry transformation in that it only updates the matrix that is passed into the shader, instead of recomputing every vertex. For which one you would want to use: transforming the geometry is more expensive, but you can do it once and avoid it in the render loop (See the explanation here ).