Three.js: 获取对象的中心

创建于 2011-08-23  ·  11评论  ·  资料来源: mrdoob/three.js

我遇到了问题-单击场景中的某个对象时,相机必须以该对象为中心。 为此,我需要对象的中心坐标(y轴)。 我该如何计算? 试图求和该对象的所有顶点并将其除以顶点数,但这当然是错误的决定。

Question

最有用的评论

您可以获得几何边界框的中心:

geometry.computeBoundingBox();

var centerX = 0.5 * ( geometry.boundingBox.x[ 1 ] - geometry.boundingBox.x[ 0 ] );
var centerY = 0.5 * ( geometry.boundingBox.y[ 1 ] - geometry.boundingBox.y[ 0 ] );
var centerZ = 0.5 * ( geometry.boundingBox.z[ 1 ] - geometry.boundingBox.z[ 0 ] );

然后,您可以将相机的目标设置为对象位置加上中心:

camera.target.position.copy( object.position );
camera.target.position.addSelf( new THREE.Vector3( centerX, centerY, centerZ ) );

所有11条评论

object.position.y

在我们的模型中,它始终为0,绝对位于模型中

绝对定位是什么意思? 所有对象都在0,0,0中,但顶点簇不在中心吗?

您可以获得几何边界框的中心:

geometry.computeBoundingBox();

var centerX = 0.5 * ( geometry.boundingBox.x[ 1 ] - geometry.boundingBox.x[ 0 ] );
var centerY = 0.5 * ( geometry.boundingBox.y[ 1 ] - geometry.boundingBox.y[ 0 ] );
var centerZ = 0.5 * ( geometry.boundingBox.z[ 1 ] - geometry.boundingBox.z[ 0 ] );

然后,您可以将相机的目标设置为对象位置加上中心:

camera.target.position.copy( object.position );
camera.target.position.addSelf( new THREE.Vector3( centerX, centerY, centerZ ) );

这是我不久前写的一个小功能。 也许会对您有所帮助。

getCentroid: function ( mesh ) {

    mesh.geometry.computeBoundingBox();
    boundingBox = mesh.geometry.boundingBox;

    var x0 = boundingBox.x[ 0 ];
    var x1 = boundingBox.x[ 1 ];
    var y0 = boundingBox.y[ 0 ];
    var y1 = boundingBox.y[ 1 ];
    var z0 = boundingBox.z[ 0 ];
    var z1 = boundingBox.z[ 1 ];


    var bWidth = ( x0 > x1 ) ? x0 - x1 : x1 - x0;
    var bHeight = ( y0 > y1 ) ? y0 - y1 : y1 - y0;
    var bDepth = ( z0 > z1 ) ? z0 - z1 : z1 - z0;

    var centroidX = x0 + ( bWidth / 2 ) + mesh.position.x;
    var centroidY = y0 + ( bHeight / 2 )+ mesh.position.y;
    var centroidZ = z0 + ( bDepth / 2 ) + mesh.position.z;

    return mesh.geometry.centroid = { x : centroidX, y : centroidY, z : centroidZ };

}

您也许可以结合alteredq的数学运算(我希望我足够聪明,能够理解他的快捷方式)

我想知道...这样做会不会更简单?

geometry.centroid = new THREE.Vector3();

for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

    geometry.centroid.addSelf( geometry.vertices[ i ].position );

} 

geometry.centroid.divideScalar( geometry.vertices.length );

是的,如果您只需要一个中心,这会更简单。 如果您已经有一个边界框,或者您需要一个边界框用于其他内容,那么只计算其中心就更简单了。

嗯,现在我想知道这两种方法是否会给出相同的结果。 如果您在一侧有大量的点,而在另一侧有少量的点,则边界框的中心将是几何中心,而质心将在“重心”中,更靠近密集的点簇。

>>> points = [ 0, 10, 11, 12 ]
>>> sum(points)/float(len(points)) # centroid
8.25
>>> 0.5 * (min(points) + max(points)) # center of bounding box
6.0

我猜这两种方法对于不同的用例都是有用的。

诚然。 大多数人需要包围盒的质心。

是的,我想我毕竟不是一个真正的质心函数:

var x0 = boundingBox.x[ 0 ];
var x1 = boundingBox.x[ 1 ];
var y0 = boundingBox.y[ 0 ];
var y1 = boundingBox.y[ 1 ];
var z0 = boundingBox.z[ 0 ];
var z1 = boundingBox.z[ 1 ];

就是现在:

var x0 = boundingBox.min.x;
var x1 = boundingBox.max.x;
var y0 = boundingBox.min.y;
var y1 = boundingBox.max.y;
var z0 = boundingBox.min.z;
var z1 = boundingBox.max.z;

(截至r47)

从概念上讲,它是将两个向量相加并取一半的结果。 我不确定它是否更快,但是更...秘密地:

        c.addVectors( 
            object.children[0].geometry.boundingBox.min,
            object.children[0].geometry.boundingBox.max
        );

        c.divideScalar(2);
此页面是否有帮助?
0 / 5 - 0 等级