Camera control with mouse drag, swipe, and pinch in/out using ArcballControls in Three.js [r145]
Have you ever wanted to move the camera freely in Three.js but found ArcballControls 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 ArcballControls.js in Three.js, you can control the camera with mouse drag, swipe, pinch in/out, and even double-click/tap.
You can also display a gizmo (a spherical wireframe at the focus point) and show a grid when panning (dragging with the right mouse button).
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.
A double-click/tap focus function is also available.
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/ArcballControls.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 ArcballControls (camera moves with mouse drag, wheel, etc.) controls = new THREE.ArcballControls(camera, renderer.domElement, scene); // If adjustNearFar is set to true, near and far clipping planes are adjusted during zoom to maintain visibility controls.adjustNearFar=true; controls.enableAnimations=true; // enable animations for rotation and focus operations controls.enableGrid=true; // show grid while performing pan operations controls.setGizmosVisible(true); // show gizmo (spherical wireframe at the focus point) 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>