ThreeJS collada file not centred

Question

I'm new to ThreeJS and I'm trying to load collada files into a viewer. I've started by copying the code for the Elf colladaLoader demo.

https://threejs.org/examples/#webgl_loader_collada

I've got that working fine inside an 800px square modal window and it looks good. Trouble is when I load any other .dae file it's not centered.

The demo is obviously created with all the right settings to put the object and the camera in the right place, but I don't know what files are going to be loaded.

Is there any way of getting the camera to look directly at the object so it's centered and position it far enough back so the object fills the container?

Answer 1

camera.lookAt( object.position ) will do most of what you want. Positioning the camera at an appropriate distance is a bit more subjective. I typically do something like this:

object.updateMatrixWorld();
const box = new THREE.Box3().setFromObject(object);
const size = box.getSize().length();
const center = box.getCenter();

object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);
camera.position.copy(center);
camera.position.x += size / 2.0;
camera.position.y += size / 5.0;
camera.position.z += size / 2.0;
camera.near = size / 100;
camera.far = size * 100;
camera.updateProjectionMatrix();
camera.lookAt(center);

See THREE.Object3D docs, three.js r89.