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。由于边界框位于局部坐标空间中，因此您需要将结果投影到世界空间以获取世界坐标中的中心，但这很容易使用父对象中的

localToWorld

方法。

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

Answer 2

尝试下面的代码：

let box = new THREE.Box3().setFromObject(myObject3D)
let sphere = box.getBoundingSphere()
let centerPoint = sphere.center

THREE.Box3().setFromObject(Object3D) 将遍历 Object3D 的几何图形，并返回其整体边界框。

Answer 3

第一个方法的更新：

getCenterPoint(mesh) {
    const middle = new THREE.Vector3();
    const geometry = mesh instanceof THREE.Mesh || mesh.isMesh ? mesh.geometry : mesh;

    geometry.computeBoundingBox();
    geometry.boundingBox.getSize(middle);

    middle.x = middle.x / 2;
    middle.y = middle.y / 2;
    middle.z = middle.z / 2;

    mesh.localToWorld(middle);
    return middle;
}