threejs获得对象的中心

Question

我试图检索并绘制一些对象的中心点,但我为所有对象保持相同的值,即x = 0,y = 0和z = 0.所以我的中心点始终是场景的中心点.我正在阅读3D计算机矩阵,所以我在这方面有点新手.我是否需要以某种方式更新场景或在每个添加的对象之后更新一些矩阵？

function initBoxes(){
    var box = new THREE.Mesh(geometry, material);
    box.position.set(0, 2, 2);
    getCenterPoint(box);

    var box2 = new THREE.Mesh(geometry, material);
    box2.position.set(0, 6, 6);
    getCenterPoint(box2);
}

function getCenterPoint(mesh) {
    var middle = new THREE.Vector3();
    var geometry = mesh.geometry;

    geometry.computeBoundingBox();

    middle.x = (geometry.boundingBox.max.x + geometry.boundingBox.min.x) / 2;
    middle.y = (geometry.boundingBox.max.y + geometry.boundingBox.min.y) / 2;
    middle.z = (geometry.boundingBox.max.z + geometry.boundingBox.min.z) / 2;

    return middle;
}

Answer 1

对象boundingBox在本地空间中.如果您希望中心位于世界空间中,则必须将middle顶点转换为世界空间.您可以使用以下THREE.Object3D localToWorld方法轻松完成此操作:

function getCenterPoint(mesh) {
    var middle = new THREE.Vector3();
    var geometry = mesh.geometry;

    geometry.computeBoundingBox();

    middle.x = (geometry.boundingBox.max.x + geometry.boundingBox.min.x) / 2;
    middle.y = (geometry.boundingBox.max.y + geometry.boundingBox.min.y) / 2;
    middle.z = (geometry.boundingBox.max.z + geometry.boundingBox.min.z) / 2;

    mesh.localToWorld( middle );
    return middle;
}

更新:

在较新的版本three.js所有一个方便的方法getCenter内部THREE.Box3类.

function getCenterPoint(mesh) {
    var geometry = mesh.geometry;
    geometry.computeBoundingBox();   
    center = geometry.boundingBox.getCenter();
    mesh.localToWorld( center );
    return center;
}