我正在开发一个Web应用程序,它使用three.js来显示各种大小和形状不同的对象 . 一次只显示一个对象 . 无论物体的大小或形状如何,我都希望将相机设置在一致的位置 . 到目前为止,我已经尝试实现下面的代码,该代码采用形状的大小,并根据我的相机的所需位置计算比率,并将其乘以矢量位置 . 我知道相机位置需要是动态的,但我不确定这是否是实现它的正确方法 .

function setStartingCameraPosition(camera, vector3) {
  camera.position.set(vector3.x * 0.96, -vector3.y * 1.72, vector3.z * 0.61);
     camera.up = new THREE.Vector3(0, 0, 1);
  }


 var box = new THREE.Box3().setFromObject(group);
      var vector3 = new THREE.Vector3();
      vector3 = box.size(); 
      box.center(group.position); // this re-sets the mesh position
      group.position.multiplyScalar(-1);
      //topview(camera, vector3);
      setStartingCameraPosition(camera, vector3);

我还附上了一些图片,以便更好地参考我正在尝试做的事情 .

这是其中一种形状 . 这个相机位置大致是我需要的 .

One of the shapes inside a canvas. This is roughly the desired camera position

这是在同一画布中加载的另一个形状 . 它类似于上面相机的位置,但不是很精确 . 两种形状都有不同的尺寸,所以我需要根据物体的大小来补偿相机的位置 .

Another shape inside the canvas. It is close to being in the same position but not quite.

希望这足以说明我的问题 . 感谢您抽出宝贵时间阅读它 .