THREE.JS Camera rotation lost when Orbit control is used - camera

Question

To get you into the context, let say i have a camera
camera = new THREE.PerspectiveCamera();
camera.position.set(1,1,1);
camera.lookAt(scene.position);
camera.rotation.set(Math.PI/2, 0 ,0) // <=== this is lost when the orbit control move
then i create an orbit control
controls = new THREE.OrbitControls(camera, renderer.domElement);
The Problem is that when i use the orbit control by dragging the mouse on click or zooming, the camera rotation is lost.
I tried using controls.update() but it's not working
Edit
Here is a link for a jsfiddle
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();
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<button id="button">change rotation</button>
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.

Answer 1

You can switch to a second camera like 2pha says or you can set controls.enableRotate = false;