在three.js中导入模型后实现智能居中和缩放

Question

有没有办法确定模型的大小和位置，然后自动将模型居中并缩放，以便它位于原点并在相机视图内？我发现当我从Sketchup导入Collada模型时，如果模型在Sketchup中不是居中在原点，则在three.js中也不是居中的。虽然这很有道理，但在导入后自动居中到原点会很好。

我在不同文件加载器中看到了一些关于获取导入模型范围的讨论，但我找不到任何参考资料来了解如何实现。

缩放问题不太重要，但我觉得它与边界函数有关，这就是为什么我也问了它的原因。

编辑：

经过一番尝试和更多的谷歌搜索后，我的回调函数加载collada文件的代码现在看起来像这样：

loader.load(mURL, function colladaReady( collada ) {

dae = collada.scene;
skin = collada.skins[ 0 ];

dae.scale.x = dae.scale.y = dae.scale.z = 1;
dae.updateMatrix();

//set arbitrary min and max for comparison              
var minX = 100000;
var minY = 100000;
var minZ = 100000;
var maxX = 0;
var maxY = 0;
var maxZ = 0;

var geometries = collada.dae.geometries;               
for(var propName in geometries){
if(geometries.hasOwnProperty(propName) && geometries[propName].mesh){
    dae.geometry = geometries[propName].mesh.geometry3js;
    dae.geometry.computeBoundingBox();
    bBox = dae.geometry.boundingBox;
    if(bBox.min.x < minX) minX = bBox.min.x;
    if(bBox.min.y < minY) minY = bBox.min.x;
    if(bBox.min.z < minZ) minZ = bBox.min.z;
    if(bBox.max.x > maxX) maxX = bBox.max.x;
    if(bBox.max.y > maxY) maxY = bBox.max.x;
    if(bBox.max.z > maxZ) maxZ = bBox.max.z;
}
}
//rest of function....

这会产生有关模型的一些有趣数据。我可以获得模型的整体极限坐标，我认为这可能与模型的整体边界框接近。但是，尝试对这些坐标执行任何操作（例如对平均值进行平均并将模型移动到平均值）会生成不一致的结果。

另外，需要循环遍历每个几何体来获取模型，这似乎效率低下。是否有更好的方式？如果没有，这种逻辑是否适用于其他加载程序？

- shadyhill

---

这些链接可能会有所帮助： https://dev59.com/QGUq5IYBdhLWcg3wSepm http://stackoverflow.com/questions/20059612/calculate-camera-zoom-required-for-object-to-fit-in-screen-height https://dev59.com/hGXWa4cB1Zd3GeqPOZZo https://dev59.com/72Qn5IYBdhLWcg3w7KvS - gaitat

Answer 1

您可以使用THREE.Box3#setFromObject来获取任何Object3D的边界框，包括导入的模型，而无需自己循环遍历几何图形。因此，您可以执行以下操作：

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

要获取模型的极限边界框，然后您可以使用gaitat链接答案中的任何技术来正确设置摄像机位置。例如，您可以遵循此技术（如何将相机适配到对象）并执行以下操作：

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

快速示例：http://jsfiddle.net/p19r9re2/。

- caseygrun

Answer 2

尝试使用 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;

    };

}(),

- Rusty Rob