在three.js中模型导入后智能居中和缩放 [英] Smart Centering and Scaling after Model Import in three.js

问题描述

有没有办法确定模型的大小和位置，然后自动居中和缩放模型，使其位于原点和相机的视野范围内?我发现当我从 Sketchup 导入 Collada 模型时，如果模型在 Sketchup 中没有以原点为中心，那么它在three.js 中也没有居中.虽然这是有道理的，但在导入后自动居中到原点会很好.

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 find that when I import a Collada model from Sketchup, if the model was not centered at the origin in Sketchup, then it is not centered in three.js. While that makes sense, it would be nice to auto-center to origin after importing.

我在不同的文件加载器中看到了一些关于获取导入模型边界的讨论，但我找不到任何关于如何做到这一点的参考.

I've seen some discussion in the different file loaders about getting the bounds of the imported model, but I have been unable to find any references to how to do that.

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

The scaling issue is less important, but I feel like it relates to a bounds function, which is why I asked it too.

在玩了一会儿和谷歌搜索后的更多信息......

More info after playing around a bit and a few more google searches...

加载 collada 文件的回调函数的代码现在如下所示:

The code for my callback function on loading the collada file now looks like this:

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....

这会生成一些关于模型的有趣数据.我可以获得模型的整体极端坐标，我假设(可能不正确)将接近模型的整体边界框.但是尝试对这些坐标执行任何操作(例如平均并将模型移动到平均值)会产生不一致的结果.

This is generating some interesting data about the model. I can get an overall extreme coordinate for the model, which I'm assuming (probably incorrectly) would be close to an overall bounding box for the model. But trying to do anything with those coordinates (like averaging and moving the model to the averages) generates inconsistent results.

此外，必须遍历模型的每个几何体似乎效率低下，有没有更好的方法?如果不是，这个逻辑可以应用到其他加载器吗?

Also, it seems inefficient to have to loop through every geometry for a model, is there a better way? If not, can this logic be applied to other loaders?

推荐答案

您可以使用 THREE.Box3#setFromObject 获取任何 Object3D 的边界框，包括导入的模型，而无需自己遍历几何图形.所以你可以做类似的事情

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

得到模型的极端边界框；那么您可以使用 gaitat 链接的答案中的任何技术来正确设置相机位置.例如，您可以遵循此技术(How to Fit Camera to Object)并执行以下操作:

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

快速小提琴:http://jsfiddle.net/p19r9re2/ .

这篇关于在three.js中模型导入后智能居中和缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！