Threejs. Loaded mesh position behaves different from simple geometry mesh

Question

I am trying to place a mesh at a specific position. When testing, it appears that I can not get the mesh to the exact positions that I want. As such I tried to place my mesh so that the left-most point of my mesh touched the left border of my canvas. I can get this working for a simple sphere, but the same method does not work for my loaded mesh. I do not understand.

First, I create a simple scene.

// bottom-left is 0,0
const camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 3);
//adding light
const ambient = new THREE.AmbientLight(0x404040, 0.8); // soft white light
scene.add(ambient);

camera.position.z = 1;
renderer.setSize(
    600, 600 // I made sure to keep it square
);

I then load in my mesh using objectLoader

objectLoader.load(
    // resource URL is first parameter
    'some/url/to/my/object/',

    // callback, when resource is loaded
    function (object) {

        scene.add(object);

        object.scale.set(0.3, 0.3, 0.3) 
        object.position.set(0.5,0.5, 0) // initial position at the center


        // Now, I try to move the object so that the left-most point in the mesh
        // touches the edge of the canvas

        // Get the width of the mesh object
        var box = new THREE.Box3().setFromObject(object);
        let width = box.max.x - box.min.x 
        // Set left-edge of mesh to touch the canvas edge
        object.position.x = width * 0.5;      
        
        // I do the exact same thing, but now I set the right-edge of the mesh
        // to the edge of the canvas
        const object2 = object.clone()
        scene.add(object2)

        object.position.x = 1 - (width * 0.5)
    })

As far as I understand, this should work. However, it does not work as can be seen on the image. For object, on the left, the toes are actually beyond the left edge. For object2 on the right, the most-right point on the mesh is actually towards the left of the edge.

It appears as if there is some offset that applies to both object equally. It appears that both objects are offset by about 0.035. I am trying to figure out where this seemingly arbitrary offset is coming from.

As I was trying to debug this, I tried to replace the mesh with a simple sphere geometry. Strangely enough, with a simple sphere the translation described above works perfectly.

const geometry = new THREE.SphereGeometry( 0.1, 32, 16 );
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// get the exact width of the sphere
var sphereBox = new THREE.Box3().setFromObject(sphere);
let sphereBox_width = sphereBox.max.x - sphereBox.min.x
// position the sphere so that the edge of the sphere touches the edge of the canvas
sphere.position.x = sphereBox_width * 0.5;
sphere.position.y = 0.8; // arbitrary

// second sphere for the other edge
const sphere2 = sphere.clone()
scene.add(sphere2);
sphere2.position.x = 1 - (sphereBox_width * 0.5); // same but other side

Same code implementation, just a different object and now it does work.

How can I place my object and object2 meshes exactly at the border, like I do for the spheres? Why does it work for the sphere and not for the human figures?

user_7052826 · Answer

Took me quite some time, but I figured out the underlying cause.

I was moving the meshes in relation to the geometrical center of the mesh. Instead, threejs appears to use volumetric center as default.

For symmetrical meshes, these two will be identical. For non-symmetrical there can be a large deviation. In my case the deviation was quite small, making it difficult to figure out.

The center of a mesh can be set to its geographical center (i.e., width * 0.5, height * 0.5) by the following:

  mesh.geometry.center() # mesh being the mesh object

Threejs. Loaded mesh position behaves different from simple geometry mesh

1 Answers