Hello, Three.js Orbit Controls! Here’s a quick demo of orbit controls for Three.js.
{ const renderer = new THREE.WebGLRenderer({antialias: true}); const controls = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (controls.dispose(), renderer.dispose())); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); controls.addEventListener("change", () => renderer.render(scene, camera)); renderer.render(scene, camera); return renderer.domElement; }
The Scene consists of a line, three spheres, and some lights.
scene = { const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); scene.add(line); scene.add(spheres); scene.add(lights); return scene; }
Create a line geometry with three vertices:
line = { const geometry = new THREE.Geometry(); const material = new THREE.LineBasicMaterial({ color: 0xff00ff }); POINT_DATA.forEach(point => { geometry.vertices.push(new THREE.Vector3(point[0], point[1], point[2])); }); return new THREE.Line(geometry, material); }
Create three spheres from the same three points as used for line vertices:
spheres = { const sphereGeometry = new THREE.SphereBufferGeometry(1, 32, 32); const sphereMaterial = new THREE.MeshPhongMaterial({ color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true }); return POINT_DATA.reduce((acc, point) => { const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.set(point[0], point[1], point[2]); return acc.add(sphere); }, new THREE.Group()); }
Create lights to illuminate the spheres and line:
lights = { return LIGHT_DATA.reduce((acc, d) => { const pl = new THREE.PointLight(0xffffff, 1, 0); pl.position.set(d[0], d[1], d[2]); return acc.add(pl); }, new THREE.Group()); }
The camera is a basic perspective.
camera = { const fov = 45; const aspect = width / height; const near = 1; const far = 1000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 0, 50) camera.lookAt(new THREE.Vector3(...POINT_DATA[1])); return camera; }
The height of the rendered scene is fixed. We’re using the built-in width so that the scene is automatically responsive.
height = 600
Lastly, we load Three and OrbitControls. This is a little tricky because OrbitControls is not an AMD or ES module: it assumes the existence of a global THREE.
THREE = { const THREE = window.THREE = await require("three@0.99.0/build/three.min.js"); await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {}); return THREE; }
Data used to construct geometries and lights.
POINT_DATA = [[-10, 0, 0], [0, 10, 0], [10, 0, 0]]
LIGHT_DATA = [[0, 200, 0], [100, 200, 100], [-100, -200, -100]]