Three.js - Хорошее расстояние от камеры для полного просмотра коробки

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?

Может быть, я путаница между размером сцены и размером моей коробки

Благодаря

Answer 1

Вы хотите, чтобы вычислить положение камеры, так что вы получите полное представление о коробке.

Как объяснено в this post, вы можете вычислить видимую высоту заданного расстояния от камеры, как так:

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