threeJS 导入的模型,如何确定相机位置及物体缩放使其正常显示

2,334 阅读1分钟

要确定相机的位置和物体的缩放比例,您需要在加载模型之后执行以下步骤:

  1. 获取模型的边界框(bounding box)

在加载模型后,您可以使用three.js中的THREE.Box3对象来获取模型的边界框。这可以通过调用THREE.Box3.setFromObject()方法并传入您加载的模型来完成。这将返回一个包围盒对象,该对象包含模型的边界框。

const boundingBox = new THREE.Box3().setFromObject(loadedModel);
  1. 计算模型的尺寸

要计算模型的尺寸,您可以使用boundingBox.getSize()方法。该方法将返回一个包含模型尺寸的向量对象。

const size = new THREE.Vector3();
boundingBox.getSize(size);
  1. 计算相机位置

现在您可以计算相机的位置。要将模型置于相机视野中心,您可以使用模型的边界框中心点。为此,您可以使用boundingBox.getCenter()方法。

然后,您可以将相机位置设置为中心点后方一定距离的位置。为了确保模型适合相机视野,您还应该将相机的near和far属性设置为足够大和足够小的值。

const cameraDistance = size.length() * 2; // 将相机放置在距离模型2倍尺寸的地方
const center = new THREE.Vector3();
boundingBox.getCenter(center);

camera.position.set(center.x, center.y, center.z - cameraDistance);
camera.near = 0.1;
camera.far = cameraDistance * 10;
  1. 计算物体缩放比例

最后,您可以计算物体的缩放比例。为了确保模型适合相机视野,您可以将其缩放为适合相机视野的大小。这可以通过将相机距离除以模型尺寸来完成。

const scale = cameraDistance / size.length();
loadedModel.scale.set(scale, scale, scale);

现在,您的模型应该位于相机视野中心,并且缩放为适合相机视野的大小。