Three.js - 相机的良好z距离以完整查看盒子

Question

我使用Three.js显示了一个大小为700x700的场景。在这个场景中，我生成了一个粒子系统，其位置在-250到250之间随机分布（对于x、y、z），因此盒子的大小为500x500。

为了计算摄像机的正确距离（以适应盒子的全景视图），我尝试了以下方法：

    <script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;
var camera, controls, scene, renderer;
var cross;
var width = 700, height = 700;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
  // tan(pi/6) = 1/sqrt(3) = height/2 / distance_z
  camera.position.z = 250*Math.sqrt(3);

      ...

 for(var p = 0; p < particleCount; p++) {

    // create a particle with random
    // position values, -250 -> 250

    var pX = 250 - Math.random() * 500;
    var pY = 250 - Math.random() * 500;
    var pZ = 250 - Math.random() * 500;

    var particle = new THREE.Vector3(pX, pY, pZ);

    // add it to the geometry
    geometry.vertices.push(particle);

  }

function onWindowResize() {

  camera.aspect = width /height;
  camera.updateProjectionMatrix();

  renderer.setSize( width, height );

  controls.handleResize();

}

...
</script>

正如您所看到的，我应用了这个公式来计算视野范围（FOV）

tan(FOV/2) == height/2 / distance_z  

这里给出的是：distance_z = 250 * sqrt(3)

但是当我加载页面时，缩放似乎太高了，以至于我离500x500的框太近了。

为什么在我的情况下这个计算不正确？如何才能完全适应我的500x500框的尺寸并获得全景视图？

也许我在场景大小和框大小之间存在混淆

谢谢

- user1773603

---

我使用 6 * geometry.boundingSphere.radius 作为距离。当然，如果您的相机位置 x 和 z 不是 0，则此值对于 z 来说将太高。这是假设一个几何体（您的“盒子”）。因此，此代码不会直接适用于您，因为您需要找到您的盒子的边界球。 - Christian Fritz

Answer 1

你想计算相机位置，以使其完整地查看一个盒子。

如此贴所述，你可以通过距离相机的距离来计算可见高度。

var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians

var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

重要的是看到立方体的正面。

在您的情况下，正面高度为500，并且由于立方体位于原点中心，因此立方体的正面位于距离原点250的位置。所以，重写上面的公式，

var dist = 500 / ( 2 * Math.tan( camera.fov * Math.PI / 360 ) );

由于摄像头必须设置在前面板后方，

camera.position.set( 0, 0, 250 + dist );

这是确保立方体“适合”可见高度的精确解决方案。从那里，您可以调整摄像机位置以满足您的喜好。或者，您可以通过在上述公式中使用略大一些的height值来确保边距。

three.js r.71

- WestLangley

---

谢谢，的确，我没有考虑到我需要添加的距离（250）才能位于前面。 - user1773603

举手之人，如果你因为忘记 Math.tan() 函数的参数是弧度而来到这里，请举手。✋ - Martin Joiner