Smart Centering and Scaling after Model Import in three.js

Question

Is there a way to determine the size and position of a model and then auto-center and scale the model so that it is positioned at the origin and within the view of the camera? I

Answer 1

You can use THREE.Box3#setFromObject to get the bounding box of any Object3D, including an imported model, without having to loop through the geometries yourself. So you could do something like

var bBox = new THREE.Box3().setFromObject(collada.scene);

to get the extreme bounding box of the model; then you could use any of the techniques in the answers that gaitat linked in order to set the camera position correctly. For instance, you could follow this technique (How to Fit Camera to Object) and do something like:

var height = bBox.size().y;
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = collada.scene.position;
camera.position.set(pos.x, pos.y, dist * 1.1); // fudge factor so you can see the boundaries
camera.lookAt(pos);

Quick fiddle: http://jsfiddle.net/p19r9re2/ .

Answer 2

try geometry.center()

center: function () {

    var offset = new Vector3();

    return function center() {

        this.computeBoundingBox();

        this.boundingBox.getCenter( offset ).negate();

        this.translate( offset.x, offset.y, offset.z );

        return this;

    };

}(),