根据三个.js

时间:2017-09-08 13:41:29

标签: javascript canvas three.js camera

我正在使用一个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.

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

0 个答案:

没有答案