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 顶点转换为世界空间。您可以使用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 类中。

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 的几何图形，并返回它们的整体边界框。