Three.js - Bonne distance z de la caméra pour une vue complète de la boîte

Question

J'affiche avec Three.js une scène de taille 700x700. Dans cette scène, je génère un système de particules avec des positions aléatoires entre -250 et 250 (pour x, y, z), donc la boîte est de taille 500x500.

pour calculer la bonne distance de la caméra (pour une vue complète adaptée de la boîte), j'ai essayé:

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

Comme vous pouvez le voir, j'ai appliqué cette formule pour le champ de vision (FOV)

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

qui donne ici: distance_z = 250 * sqrt(3)

mais quand je charge la page, le zoom semble être trop élevé, d'une manière que je suis trop près de la boîte 500x500.

Pourquoi ce calcul n'est pas correct dans mon cas? et Comment puis-je avoir une vue complète exactement adaptée à la taille de ma boîte 500x500?

Peut-être que je fais une confusion entre la taille de la scène et la taille de ma boîte

Merci

Answer 1

Vous voulez calculer la position de la caméra de sorte que vous obtenez une vue complète d'une boîte.

Comme expliqué dans this post, vous pouvez calculer la hauteur visible étant donné la distance de la caméra comme ceci:

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

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

Ce qui est important est la visibilité de la face avant du cube.

Dans votre cas, la face avant a une hauteur de 500, et puisque le cube est centré à l'origine, la face avant du cube est située à une distance de 250 devant l'origine. Ainsi, la réécriture de la formule ci-dessus,

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

L'appareil photo doit être en retrait de la face avant,

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

C'est la solution exacte pour rendre le cube « apte » dans le visible la taille. De là, vous pouvez ajuster la position de la caméra à votre goût. Alternativement, vous pouvez assurer une marge en utilisant une valeur légèrement plus grande pour height dans la formule ci-dessus.

trois.js r.71