I am using the following code to scale and center a msgpack pressed object loaded using the ObjectLoader and it is not working. I think that my object has a rotation on it, and hence causing weird behaviors. On some objects, it successfully centers, but on others the centering is offset and scaling isn't right either.

In this snippet, result is the scene from the ObjectLoader. My thought was that the object was not very well formed, but I'm not sure. I wanted the table on the image or any other user entered mesh to be on the top of the grid, centered and scaled so that the maximum size is 1 unit.

Each square measures 0.25, the axis are at 0,0,0 .png

    // result is a threejs scene        
    var geometry = result.children[0].geometry;
    var mesh = result.children[0];
    geometryputeBoundingBox();
    var middle = new THREE.Vector3();
    middle.x        = ( geometry.boundingBox.max.x + geometry.boundingBox.min.x ) / 2;
    middle.y        = -geometry.boundingBox.min.y;
    middle.z        = ( geometry.boundingBox.max.z + geometry.boundingBox.min.z ) / 2;
    middle.negate();
    mesh.position.copy(middle);
    // scales the mesh up to maxsize
    var maxSize = 1;
    // gets the biggest axis
    var maxVal = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
    if (maxVal < geometry.boundingBox.max.y - geometry.boundingBox.min.y) {
        maxVal = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
    }
    if (maxVal < geometry.boundingBox.max.z - geometry.boundingBox.min.z) {
        maxVal = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
    // scales the current size proportional to the maxval, times maxsize
    mesh.scale.divideScalar(maxVal * maxSize);

    self.scene.add(result);

I am using the following code to scale and center a msgpack pressed object loaded using the ObjectLoader and it is not working. I think that my object has a rotation on it, and hence causing weird behaviors. On some objects, it successfully centers, but on others the centering is offset and scaling isn't right either.

In this snippet, result is the scene from the ObjectLoader. My thought was that the object was not very well formed, but I'm not sure. I wanted the table on the image or any other user entered mesh to be on the top of the grid, centered and scaled so that the maximum size is 1 unit.

Each square measures 0.25, the axis are at 0,0,0 https://i.sstatic/fkKYC.png

    // result is a threejs scene        
    var geometry = result.children[0].geometry;
    var mesh = result.children[0];
    geometry.puteBoundingBox();
    var middle = new THREE.Vector3();
    middle.x        = ( geometry.boundingBox.max.x + geometry.boundingBox.min.x ) / 2;
    middle.y        = -geometry.boundingBox.min.y;
    middle.z        = ( geometry.boundingBox.max.z + geometry.boundingBox.min.z ) / 2;
    middle.negate();
    mesh.position.copy(middle);
    // scales the mesh up to maxsize
    var maxSize = 1;
    // gets the biggest axis
    var maxVal = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
    if (maxVal < geometry.boundingBox.max.y - geometry.boundingBox.min.y) {
        maxVal = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
    }
    if (maxVal < geometry.boundingBox.max.z - geometry.boundingBox.min.z) {
        maxVal = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
    // scales the current size proportional to the maxval, times maxsize
    mesh.scale.divideScalar(maxVal * maxSize);

    self.scene.add(result);

• javascript
• html
• 3d
• three.js

• The bounding box is the red square around the object. – Diogo Bernini Milagres Commented Aug 17, 2015 at 19:47

1 Answer 1

Instead of calling geometry.puteBoundingBox(); call geometry.center(); then you don't need the middle.x or middle.z and you can just call mesh.translateY() rather than fiddling with middle at all