Three.js - 相机的完整视野的良好z距离

I display with Three.js a scene of size 700x700. In this scene, I generate a system of particles with random positions between -250 and 250 (for x,y,z), so the box is 500x500 size.

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

to compute the right distance of camera (for an adapted full view of the box), I tried :

为了计算相机的正确距离（适用于盒子的完整视图），我试过：

    <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>

As you can see, I applied this formula for field of view (FOV)

如您所见，我将此公式应用于视野（FOV）

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

which gives here : distance_z = 250 * sqrt(3)

在这里给出：distance_z = 250 * sqrt（3）

but when I load the page, the zoom seems to be too high, in a way that I am too near from the 500x500 box.

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

Why this calculation is not correct in my case ? and How can I have a full view exactly adapted to the size of my 500x500 box ?

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

Maybe I do a confusion between the size of the scene and the size of my box

也许我对场景的大小和盒子的大小感到困惑

Thanks

谢谢

1 个解决方案

#1

You want to compute the camera position so you get a full view of a box.

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

As explained in this post, you can calculate the visible height given the distance from the camera like so:

正如这篇文章中所解释的那样，你可以根据相机的距离来计算可见高度，如下所示：

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

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

What is important is the visibility of the front face of the cube.

重要的是立方体正面的可见性。

In your case, the front face has height 500, and since the cube is centered at the origin, the front face of the cube is located at a distance of 250 in front of the origin. So, rewriting the formula above,

在您的情况下，正面具有高度500，并且由于立方体以原点为中心，立方体的正面位于原点前方250处。所以，重写上面的公式，

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

Since the camera must be set back from the front face,

由于相机必须从正面放回，

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

This is the exact solution to make the cube "fit" in the visible height. From there, you can adjust the camera position to your liking. Alternatively, you could ensure a margin by using a slightly larger value for height in the formula above.

这是使立方体“适合”在可见高度的精确解决方案。从那里，您可以根据自己的喜好调整相机位置。或者，您可以通过在上面的公式中使用稍大的高度值来确保边距。

three.js r.71

#1