ThreeJS collada文件没有居中 [英] ThreeJS collada file not centred

问题描述

我是ThreeJS的新手，我正在尝试将collada文件加载到查看器中。我首先复制了Elf colladaLoader演示的代码。

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

我在800px的方形窗口内工作正常看起来不错。麻烦的是，当我加载任何其他.dae文件时，它不居中。

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?

推荐答案

camera.lookAt（object.position）将完成你想要的大部分工作。将相机定位在适当的距离是更主观的。我通常做这样的事情：

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);

参见 THREE.Object3D docs ，three.js r89。

See THREE.Object3D docs, three.js r89.

这篇关于ThreeJS collada文件没有居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！