2e:null 2f:["$","title",null,{"children":"Three.js: 4. Controlling object appearance | Jo Wood | Observable"}] 34:[] 32:{"id":"4591a080e2afae6d","slug":"three-js-controlling-object-appearance","title":"Three.js: 4. Controlling object appearance","thumbnail":"9c94d2d0bb44271f8f2b46e229b293199c2ca07fc18141b6143e6d25015adac5","access_level":"public","create_time":"$D2024-11-13T15:49:45.514Z","update_time":"$D2026-09-21T05:49:40.810Z","view_time":null,"first_public_time":"$D2024-11-13T17:34:34.388Z","has_unpublished_edits":null,"fork":{"id":"cbb06c7efad99d28","slug":"three-js-animating-the-camera","title":"Three.js: 3. Animating the camera","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":483,"publish_version":483,"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: 4. Controlling object appearance","cells":[{"id":0,"value":"# Three.js: 4. Controlling object appearance\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](https://observablehq.com/@jwolondon/three-js-animating-the-camera)\n1. **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\nLet's set up the imports, renderer and camera as in the [previous example](https://observablehq.com/@jwolondon/three-js-animating-the-camera):","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":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":41,"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\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":50,"value":"const 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":168,"value":"## Cube appearance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"The visual appearance of the objects in the scene are affected by the light and surface properties of the objects. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"### Lighting\n\nLights can be added in the scene definition. Here a general ambient light and three coloured directional lights are added, each with a different position, colour and intensity, all pointing directed at the cube.\n\nAnd for demonstration purposes three [DirectionalLightHelpers](https://threejs.org/docs/index.html#api/en/helpers/DirectionalLightHelper) are also added, which I found useful in positioning the directional lights and understanding the effect they had on the scene.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"const scene = (() => {\n const scene = new THREE.Scene();\n scene.add(cube);\n const light = new THREE.AmbientLight(0xc0c0c0);\n scene.add(light);\n\n const dLight1 = new THREE.DirectionalLight(0xff0000, 4);\n dLight1.position.set(10, 2, 3);\n scene.add(dLight1);\n\n const dLight2 = new THREE.DirectionalLight(0x00cc66, 2);\n dLight2.position.set(4, 8, 6);\n scene.add(dLight2);\n\n const dLight3 = new THREE.DirectionalLight(0x0000ff, 2);\n dLight3.position.set(-5, -5, -5);\n scene.add(dLight3);\n\n // Add some light vectors to the scene to help understand where they are positioned.\n scene.add(new THREE.DirectionalLightHelper(dLight1));\n scene.add(new THREE.DirectionalLightHelper(dLight2));\n scene.add(new THREE.DirectionalLightHelper(dLight3));\n\n return scene;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"### Surface properties\n\nThe `material` setting for meshes can affect the way they react to the lighting environment. For a simple flat-faced cube, `MeshStandardMaterial` seems to work well enough.\n\nTo capture the shape of the object where lighting is low or undirected, I found it useful to combine with a wireframe (via `EdgesGeometry`) which can be added as a child of the solid object ensuring its edges remain visible.","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.MeshStandardMaterial();\n const cubeMesh = new THREE.Mesh(geometry, material);\n\n // Create a wireframe for the cube\n const wireframe = new THREE.EdgesGeometry(geometry);\n const wireframeMaterial = new THREE.LineBasicMaterial({color: 0xffffff});\n const wireframeMesh = new THREE.LineSegments(wireframe, wireframeMaterial);\n\n // Add wireframe as a child of the cube mesh so they move together\n cubeMesh.add(wireframeMesh);\n\n return cubeMesh;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"

${renderer.domElement}

Drag pointer to rotate view

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"[Adding surface textures](https://observablehq.com/@jwolondon/three-js-adding-surface-textures)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"---\n\n_For page styling:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"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"