Camera Control in Three.js with OrbitControls | How to Set Up Viewpoint Movement & Zoom

Japanese

Camera control with mouse drag, swipe, and pinch in/out using OrbitControls in Three.js[r145]

Have you ever wanted to move the camera freely in Three.js but found OrbitControls difficult to set up?
In this article, we explain in detail how to configure viewpoint movement and zoom, and introduce key points to achieve smooth camera operation.

By using OrbitControls.js in Three.js, you can control the camera with mouse drag, swipe, and pinch in/out gestures.

<script src="./js/three.min.js"></script>
<script>
・・・
    // Create OrbitControls
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.target.set(0,0,0);  // Specify the camera direction (this coordinate also becomes the rotation center)
    controls.update();
・・・
</script>

Left mouse drag rotates, right mouse drag moves the camera, and the wheel zooms in/out.
Swipe to rotate, drag with two fingers on the screen to move the camera, and pinch in/out to zoom.

Source Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=yes">
  <script src="./js/three.min.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    var scene,camera;
    var main = function () {
      // Get the target canvas and retrieve width and height
      let can=document.getElementById('can');
      let w = parseInt(can.style.width); // get width
      let h = parseInt(can.style.height); // get height

      // ■ Scene
      scene = new THREE.Scene();

      // ■ Camera
      // THREE.PerspectiveCamera( field of view (degrees), aspect ratio, near clipping plane, far clipping plane );
      camera = new THREE.PerspectiveCamera(20, w/h, 0.1, 10000);
      camera.position.set(50, 100, 200); // set camera position
      //camera.rotation.set(0,0,0); // set camera angle to (0,0,0)
      camera.lookAt(new THREE.Vector3(0, 0, 0)); // set camera direction to (0,0,0)
      scene.add(camera); // add camera to the scene

      // ■ Renderer
      renderer = new THREE.WebGLRenderer({canvas:can, antialias: true}); // enable antialiasing
      renderer.setSize(w, h);
      renderer.setClearColor(0x000000, 1); // set background color

      // ■ Lighting
      // Ambient light (light applied to all objects from all directions, prevents completely black areas)
      var AmbientLight=new THREE.AmbientLight(0xffffff,0.4);
      scene.add( AmbientLight ); // add ambient light to the scene
      // Spotlight (color, intensity, distance, angle)
      const spotLight=new THREE.SpotLight(0xffffff, 2,1000,Math.PI/8);
      spotLight.position.set(100,400,300);
      spotLight.target.position.set(0,0,0);
      scene.add(spotLight);
      scene.add(spotLight.target);

      // ■ Lambert material (non-glossy material affected by light sources)
      let material=new THREE.MeshLambertMaterial({color:0x6699FF});

      // ■ Box geometry (width, height, depth)
      let boxGeometry=new THREE.BoxGeometry(40, 30, 20);

      // ■ Create mesh from geometry and Lambert material
      let mesh=new THREE.Mesh(boxGeometry, material);
      scene.add(mesh); // add mesh to the scene

      // ■ Create OrbitControls (camera moves with mouse drag, wheel, etc.)
      const controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.target.set(0,0,0);  // specify camera direction (this coordinate also becomes the rotation center)
      controls.update();
      renderLoop();
    }

    function renderLoop () {
      requestAnimationFrame(renderLoop);
      renderer.render(scene, camera);
    }
    window.addEventListener('DOMContentLoaded', main, false);
  </script>
</head>
<body>
  <canvas id="can" style="width:500px; height:300px;-ms-touch-action:none;touch-action:none;">
  </canvas>
</body>
</html>

WebGL(Three.js)