title: Three.js - Good z distance of camera for full view of box
body: <p>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.</p>
  
  <p>to compute the right distance of camera (for an adapted full view of the box), I tried :</p>
  
  <pre><code>    &lt;script&gt;
  
  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 &lt; particleCount; p++) {
  
      // create a particle with random
      // position values, -250 -&gt; 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();
  
  }
  
  ...
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see, I applied this formula for field of view (FOV)</p>
  
  <pre><code>tan(FOV/2) == height/2 / distance_z  
  </code></pre>
  
  <p>which gives here : <code>distance_z = 250 * sqrt(3)</code> </p>
  
  <p>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.</p>
  
  <p>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 ?</p>
  
  <p>Maybe I do a confusion between the size of the scene and the size of my box </p>
  
  <p>Thanks</p>