'threejs get center of object

I have trying to retrieve and plot the centerpoint of some objects but I keep getting the same value for all my objects which is x=0, y=0 and z=0. So my centerpoint is always the centerpoint of the scene. I'm currently reading up on 3D computer matrixes so I'm a bit novice in this area. Do I need to update the scene somehow or update some matrix after every added object or something?

function initBoxes(){
    var box = new THREE.Mesh(geometry, material);
    box.position.set(0, 2, 2);
    getCenterPoint(box);

    var box2 = new THREE.Mesh(geometry, material);
    box2.position.set(0, 6, 6);
    getCenterPoint(box2);
}

function getCenterPoint(mesh) {
    var middle = new THREE.Vector3();
    var geometry = mesh.geometry;

    geometry.computeBoundingBox();

    middle.x = (geometry.boundingBox.max.x + geometry.boundingBox.min.x) / 2;
    middle.y = (geometry.boundingBox.max.y + geometry.boundingBox.min.y) / 2;
    middle.z = (geometry.boundingBox.max.z + geometry.boundingBox.min.z) / 2;

    return middle;
}
3dthree.js


Solution 1:[1]

The object boundingBox is in local space. If you want the center in world space you have to translate your middle vertex to world space. You can do that easily with the THREE.Object3D localToWorld method like this:

function getCenterPoint(mesh) {
    var middle = new THREE.Vector3();
    var geometry = mesh.geometry;

    geometry.computeBoundingBox();

    middle.x = (geometry.boundingBox.max.x + geometry.boundingBox.min.x) / 2;
    middle.y = (geometry.boundingBox.max.y + geometry.boundingBox.min.y) / 2;
    middle.z = (geometry.boundingBox.max.z + geometry.boundingBox.min.z) / 2;

    mesh.localToWorld( middle );
    return middle;
}

Update:

In the newer three.js versions there is a convenience method getCenter inside the THREE.Box3 class.

function getCenterPoint(mesh) {
    var geometry = mesh.geometry;
    geometry.computeBoundingBox();
    var center = new THREE.Vector3();
    geometry.boundingBox.getCenter( center );
    mesh.localToWorld( center );
    return center;
}

Solution 2:[2]

try the code below:

let box = new THREE.Box3().setFromObject(myObject3D)
let sphere = box.getBoundingSphere()
let centerPoint = sphere.center

THREE.Box3().setFromObject(Object3D) will traverse the Object3D's geometries, and return their holistic bounding Box.

Solution 3:[3]

Update of first Method:

getCenterPoint(mesh) {
        let middle = new THREE.Vector3();
        let geometry = mesh instanceof THREE.Mesh || mesh.isMesh ? mesh.geometry : mesh;

        geometry.computeBoundingBox();
        geometry.boundingBox.getSize(middle);

        middle.x = middle.x / 2;
        middle.y = middle.y / 2;
        middle.z = middle.z / 2;

        mesh.localToWorld(middle);
        return middle;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 211 - Anthony Sychev

Related Questions