javascript - 在 Three.js 中将相机聚焦在对象的中心

Question

我在 three.js 中使用 ColladaLoader 加载和对象，所以我在场景中有一堆对象。其中一些是规则形状，例如:立方体、球体等。对于这些我可以这样做:

var position = { 
  x: selectedObject.position.x, 
  y: selectedObject.position.y, 
  z: selectedObject.position.z 
};

controls.target = new THREE.Vector3(position);

其中控件是相机的 OrbitControl。相机在那个位置居中并且工作正常，问题是当对象不是规则形状，而是顶点生成的几何图形时。在这种情况下，我已经尝试了 4 种不同的方法，但没有达到预期的结果。

1.

var position = { 
  x: selectedObject.matrixWorld.getPosition().x, 
  y: selectedObject.matrixWorld.getPosition().y, 
  z: selectedObject.matrixWorld.getPosition().z 
};

2.

var centerX = selectedObject.geometry.boundingSphere.center.x;
var centerY = selectedObject.geometry.boundingSphere.center.y;
var centerZ = selectedObject.geometry.boundingSphere.center.z;

var position = { x: centerX, y: centerY, z: centerZ };

3.

getCentroid(selectedObject.geometry.vertices);

function getCentroid(vertices) {
  var x = y = z = 0;
  vertices.forEach(function (element, index, array) {
    x += element.x;
    y += element.y;
    z += element.z;
  });

  return new THREE.Vector3(
    x / (vertices.length),
    y / (vertices.length),
    z / (vertices.length)
  );
}

4.

var position = getCenter(
  getMaxnMinCenter(selectedObject.geometry.vertices), 
  selectedObject.matrixWorld
);


function getMaxnMinCenter(vertices) {
  var maxX = maxY = maxZ = vertices[0];
  var minX = minY = minZ = vertices[0];

  vertices.forEach(function (element, index, array) {
    if (element.x <= minX.x) {
      minX = element;
    }
    if (element.y <= minY.y) {
      minY = element;
    }
    if (element.z <= minZ.z) {
      minZ = element;
    }
    if (element.x > maxX.x) {
      maxX = element;
    }
    if (element.y > maxY.y) {
      maxY = element;
    }
    if (element.z > maxZ.z) {
      minZ = element;
    }
  });

  return {
    minimumX: minX,
    minimumY: minY,
    minimumZ: minZ,
    maximumX: maxX,
    maximumY: maxY,
    maximumZ: maxZ,
  }
}

请务必注意，规则形状使用 1.0 的比例，而其他对象使用 0.005 的比例。

谢谢。

Answer 1

var bb = new THREE.Box3()
bb.setFromObject(selectedObject);
bb.center(controls.target);

使用边界框找到对象的中心