title: Set distance of THREE.PerspectiveCamera without change view direction
body: <p>I have <code>PerspectiveCamera</code> in THREE.js somewhere in space as children of mesh. The camera should still look at the mesh (local coordinates [0, 0, 0]). I would like to change distance of camera from the mesh without change of view direction. Is there any easy way to do this?</p>
  
  <pre><code>camera.position.z = 13 // Works only if position.x and position.y are 0.
  camera.setDistanceFromTarget(13) // I need something like this.
  </code></pre>
  
  <p>I just thinking about manual calculation of the actual camera's rotation angles and new camera's position. Here is <a href="https://jsfiddle.net/3u5t1wqo/18/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild(renderer.domElement);
  
  var geometry = new THREE.BoxGeometry(3, 3, 3);
  
  var cube = new THREE.Mesh(geometry);
  scene.add(cube);
  cube.add(camera);
  
  camera.position.set(2, 4, 6)
  camera.lookAt(cube.position)
  
  function animate() {
   requestAnimationFrame(animate);
   renderer.render(scene, camera);
  }
  
  animate();
  
  // How to set distance of camera from [0, 0, 0] to 13 without change view direction?
  camera.position.z = 13;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset=utf-8&gt;
    &lt;title&gt;THREE.js camera demo&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>