2e:null 2f:["$","title",null,{"children":"Three.js: 3. Animating the camera | Jo Wood | Observable"}] 34:[] 32:{"id":"cbb06c7efad99d28","slug":"three-js-animating-the-camera","title":"Three.js: 3. Animating the camera","thumbnail":"cfd96c40747ed9fdf9607a88149d68199ed1463ea0661288b481de09c332c3a4","access_level":"public","create_time":"$D2024-11-13T13:53:41.010Z","update_time":"$D2026-09-21T05:49:00.447Z","view_time":null,"first_public_time":"$D2024-11-13T15:48:36.329Z","has_unpublished_edits":null,"fork":{"id":"ebf8d46d71301472","slug":"three-js-animating-the-scene","title":"Three.js: 2. Animating the scene","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":391,"publish_version":391,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5da73de7e9934c0d","slug":"three-js","title":"three.js","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"Three.js: 3. Animating the camera","cells":[{"id":0,"value":"# Three.js: 3. Animating the camera\n\n_Experiments with [three.js](https://threejs.org), initially as part of the [30 day map challenge](https://30daymapchallenge.com), day 13 'A new tool'. I thought I'd explore how three.js works in Observable, building examples incrementally, and documenting my experience._\n\n1. [Hello cube](https://observablehq.com/@jwolondon/three-js-hello-cube)\n1. [Animating the scene](https://observablehq.com/@jwolondon/three-js-animating-the-scene)\n1. **Animating the camera**\n1. [Controlling object appearance](https://observablehq.com/@jwolondon/three-js-controlling-object-appearance)\n1. [Adding surface textures](https://observablehq.com/@jwolondon/three-js-adding-surface-textures)\n1. [Adding custom geometry](https://observablehq.com/@jwolondon/three-js-adding-custom-geometry)\n1. [30 day map challenge example](https://observablehq.com/@jwolondon/tdmc2024_day13)\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"### Setup\n\nAs with [animating the scene](https://observablehq.com/@jwolondon/three-js-animating-the-scene), we import the three.js library in the standard way:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"import * as THREE from \"https://esm.sh/three@0.178.0\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"A convenient way to bet able to move the camera is to import `OrbitalControls.js` that give us interactive zooming and rotation of the camera position for free:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"import {OrbitControls} from \"https://esm.sh/three@0.178.0/examples/jsm/controls/OrbitControls.js\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"The orbital controls are attached to an event listener and added to renderer when it it created:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"const size = ({ w: 400, h: 300 })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"const renderer = (() => {\n const r = new THREE.WebGLRenderer({antialias: true});\n r.setSize(size.w, size.h);\n r.setPixelRatio(devicePixelRatio);\n r.setClearColor(0xfffef2);\n\n // The code to add the orbital controls\n const controls = new OrbitControls(camera, r.domElement);\n controls.addEventListener(\"change\", () => r.render(scene, camera));\n invalidation.then(() => (controls.dispose(), r.dispose()));\n // -------\n // Because this example doesn't have any autonomous animation,\n // render an initial scene so something is displayed before interaction\n r.render(scene, camera);\n\n return r;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"The remaining scene and camera setups remain exactly as normal. I am no longer rotating the cube as the previous example, so it isn't strictly necessary to expose `cube` in its own code block. However this seems like good practice so that it is easy to modify objects should we need to.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"const cube = (() => {\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n const material = new THREE.MeshNormalMaterial();\n return new THREE.Mesh(geometry, material);\n})();\n\nconst scene = (() => {\n const scene = new THREE.Scene();\n scene.add(cube);\n return scene;\n})();\n\nconst camera = (() => {\n const fov = 70;\n const aspect = size.w / size.h;\n const near = 0.1;\n const far = 5;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(0, 0, 1.5);\n return camera;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"Because the rendered view is simply a DOM canvas object, we can place it like any other DOM element in the page. Here I just provided some 'head-up' text over the corner of the rendered space using overlaid `

` elements. Note the need to disable pointer events in the overlaid text `div` so that interaction with the 3d model in the layer 'under' it still works.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"

${renderer.domElement}

Drag pointer to rotate view

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"[Controlling object appearance](https://observablehq.com/@jwolondon/three-js-controlling-object-appearance)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"---\n\n_For page styling:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2","titling":"auto"}} 33:"$32:body"