title: THREE.JS Camera rotation lost when Orbit control is used
body: <p>To get you into the context, let say i have a camera </p>
  
  <pre><code>camera = new THREE.PerspectiveCamera();
  camera.position.set(1,1,1);
  camera.lookAt(scene.position);
  camera.rotation.set(Math.PI/2, 0 ,0) // &lt;=== this is lost when the orbit control move 
  </code></pre>
  
  <p>then i create an orbit control </p>
  
  <pre><code>controls = new THREE.OrbitControls(camera, renderer.domElement);
  </code></pre>
  
  <p>The Problem is that when i use the orbit control by dragging the mouse on click or zooming, the camera rotation is lost.</p>
  
  <p>I tried using <strong>controls.update()</strong> but it's not working</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here is a link for a <a href="https://jsfiddle.net/o4f03mdo/" rel="nofollow noreferrer">jsfiddle</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 camera;
  var scene;
  var conrols;
  var renderer;
  
  function init() {
    scene = new THREE.Scene();
  
    renderer = new THREE.WebGLRenderer({
      alpha: true,
      antialias: true
  
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
  
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.set(0, 0, 5);
    scene.add(camera);
  
    scene.add(new THREE.AmbientLight(0xffffff, 0.6));
  
    var light1 = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.7)
    scene.add(light1);
  
  
    var light2 = new THREE.SpotLight(0xffffff, 0.5);
    light2.position.set(4, 7, 23);
    scene.add(light2);
  
    var light3 = new THREE.SpotLight(0xffffff, 0.5);
    light3.position.set(4, 7, -23);
    //scene.add(light3);
  
    var geometry = new THREE.BoxGeometry(2, 1, 1);
    var material = new THREE.MeshLambertMaterial({
      color: 0x00ffff
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
  
    controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  
  }
  
  
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  
  document.getElementById('button').onclick = function() {
    //console.log("position");
    //console.log(camera.position);
    //console.log("rotation");
    //console.log(camera.rotation);
  
    camera.rotation.set(0, 0, 1.57);
    // camera.position.set(-0.041, 1.9, -1.21);
  
  }
  
  
  
  init();
  animate();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;
  
  &lt;button id="button"&gt;change rotation&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>in my original application i have a 3D foot mesh. Sometimes i need to have a vertical view of the backfoot with only a click. So i apply a camera rotation. but when i move the camera with orbit control the camera rotation jumps to the old value.</p>