CODEWITHSUNDEEP
javascriptthree.js
J.Doe
J.Doe

Reputation: 173

Why does a `Geometry` have a coordinate system and is it different to a `Mesh`?

I have been creating a simple Three.js application and so far I have a centered text in the scene that shows "Hello World". I have been copying the code examples to try and understand what is happening and so far Ihave it working but I am failing to completely understand why.

My confusion comes from reading all the Three.js tutorials describing that a Geometry object is responsible for creating the shape of the object in the scene. Therefore I did not think it would not make sense to have a position on something that is describing the shape of the mesh.

/* 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')
} );

Here is the code that I use to add to shape and my confusion comes from the following steps.

    /* 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

First, we translate the geometry to the left to center the text inside the scene.

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

Secondly, we set the position of the mesh.

My confusion comes from the fact that we need both of these operations to occur to move the mesh backwards and become centered.

However I do not understand why these operations should be done of the geometry, infact what confuses me more is that why does textMesh.position.set(0, 0, -20); not override my previously performed translation and simply move the mesh to (0,0,-20). removing my previous translation. It seems that both are required.

Upvotes: 1

Views: 133

Answers (1)

SalientBrain
SalientBrain

Reputation: 2551

AFAIK it is recommended (in scenegraph) to transform (translate, rotate, scale) the whole mesh (with simple) rather than prepare transformed geometry and use it to create "untransformed" mesh, since the mesh in second case is not transform-friendly. Basically "cumulative" transform will be just illegal, giving wrong, unexpected results. Even simple movement.

But sometimes it is useful to create transformed geometry and use it for some algos/computations or in meshes.

You are getting somehow "expected" results in your "combined transform" case because it is just particular case (for example it can work only if object position is (0, 0, 0) etc)

mesh.position.set doesn't modify geometry: it is only a property of mesh and it is used to compute final mesh triangles. This computation involves geometry and object matrix which is composed from object position, object quaternion (3D-rotation) and object scale. Object's geometry can be modified by "matrix" operations but none of such operations are performed dynamically by mesh.

Upvotes: 1

Related Questions