title: How to change the camera position for multiple views in Three JS
body: <p>I've tried to change the camera view (say: Front View, Left View, Right View, Back View, Bottom View and Top View ) in button click. I have achieved by changing the camera position for each view where I have a concern that what if camera position or the mesh position get changes. I have given the mesh position to the camera position in the initial View and the mesh disappeared from the scene. </p>
  
  <p>So is there any alternate to achieve this without hard coding the camera position.</p>
  
  <p>Kindly, help me out with the issue.</p>
  
  <p>Here's the fiddle <a href="https://jsfiddle.net/8L10qkzt/1/" rel="nofollow noreferrer">https://jsfiddle.net/8L10qkzt/1/</a> and my piece of code</p>
  
  <pre><code>var camera, scene, renderer;
          var views;
          init();
          animate();
  
          function init() {
  
              camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
              camera.position.z = 1;
  
              scene = new THREE.Scene();
  
              var geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
              var material = new THREE.MeshNormalMaterial();
  
              var mesh = new THREE.Mesh(geometry, material);
              scene.add(mesh);
  
              renderer = new THREE.WebGLRenderer({ antialias: true });
              renderer.setSize(window.innerWidth, window.innerHeight);
              document.body.appendChild(renderer.domElement);
  
              const controls = new THREE.OrbitControls(camera, renderer.domElement);
              controls.enableDamping = true;
  
              setTimeout(() =&gt; {
  
                  controls.enableDamping = false;
                  controls.reset();
  
              }, 5000);
  
              document.querySelector('#frontView').addEventListener('click', () =&gt; {
                  console.log("frontview");
                  camera.position.x = 0;
                  camera.position.y = 0;
                  camera.position.z = 1;
                  scene.add(mesh);
                  controls.update();
                  render();
              });
  
              document.querySelector('#sideView').addEventListener('click', () =&gt; {
                  console.log("Side View");
  
                  camera.position.x = 1;
                  camera.position.y = 1;
                  camera.position.z = 1;
  
                  scene.add(mesh);
                  controls.update();
                  render();
              });
  
              document.querySelector('#backView').addEventListener('click', () =&gt; {
                  console.log("Back View");
  
              });
  
  
          }
          function render() {
              for (var ii = 0; ii &lt; views; ++ii) {
  
                  var view = views[ii];
                  var camera = view.camera;
  
                  view.updateCamera(camera, scene, mouseX, mouseY);
  
                  var left = Math.floor(windowWidth * view.left);
                  var top = Math.floor(windowHeight * view.top);
                  var width = Math.floor(windowWidth * view.width);
                  var height = Math.floor(windowHeight * view.height);
  
                  renderer.setViewport(left, top, width, height);
                  renderer.setScissor(left, top, width, height);
                  renderer.setScissorTest(true);
                  renderer.setClearColor(view.background);
  
                  camera.aspect = width / height;
                  camera.updateProjectionMatrix();
  
                  renderer.render(scene, camera);
  
              }
          }
          function animate() {
              render();
              requestAnimationFrame(animate);
              renderer.render(scene, camera);
  
          }
  </code></pre>