Three.js - 良好的相机 z 距离，可以看到盒子的全貌 [英] Three.js - Good z distance of camera for full view of box

问题描述

我用 Three.js 显示了一个 700x700 大小的场景.在这个场景中，我生成了一个随机位置在 -250 到 250 之间的粒子系统(对于 x,y,z)，所以盒子的大小是 500x500.

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.

为了计算相机的正确距离(为了适应盒子的全视图)，我尝试过:

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>

如您所见，我将这个公式应用于视野 (FOV)

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

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

这里给出:distance_z = 250 * sqrt(3)

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

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 ?

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

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

谢谢

推荐答案

您想计算相机位置，以便获得框的完整视图.

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.

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

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,

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

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

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

three.js r.71

这篇关于Three.js - 良好的相机 z 距离，可以看到盒子的全貌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！