Three.js - 相机的良好 z 距离，可实现盒子的全视图

我使用 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 盒子尺寸的完整视图？

也许我混淆了场景的大小和盒子的大小

Thanks

您想要计算相机位置，以便获得盒子的完整视图。

正如中所解释的这个帖子 https://stackoverflow.com/questions/13350875/three-js-width-of-view/13351534#13351534，您可以根据距相机的距离计算可见高度，如下所示：

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在上面的公式中。

三.js r.71