3d - 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位于本地空间中。如果你想要世界空间的中心，你必须将你的中间顶点转换到世界空间。您可以使用the 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 版本中，有 a convenience method getCenter在 THREE.Box3 类中。由于边界框位于局部坐标空间中，因此您需要将结果投影到世界空间以获取世界坐标中的中心，但这可以通过父对象中的 localToWorld 方法轻松实现。

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