2e:null 2f:["$","title",null,{"children":"Three.js: 5. Adding surface textures | Jo Wood | Observable"}] 34:[{"id":"c5fe188bcde886c6c96b5e14f57df8cd9c6562af9c0f7b0d507352b96657c389eeac7c98272570f092d7b90943bc4fa76b65f5da6346b8d70846dfb0a2377f86","href":"https://static.observableusercontent.com/files/c5fe188bcde886c6c96b5e14f57df8cd9c6562af9c0f7b0d507352b96657c389eeac7c98272570f092d7b90943bc4fa76b65f5da6346b8d70846dfb0a2377f86","name":"2k_earth_daymap.jpg","type":"image/jpeg","lastModified":1731520698129.767,"size":463087}] 32:{"id":"a18c6241844ce8dc","slug":"three-js-adding-surface-textures","title":"Three.js: 5. Adding surface textures","thumbnail":"3155001a2042c0d8b7d318d9482f8e1b06f3f1c5084f763eaee22ad06c9b9490","access_level":"public","create_time":"$D2024-11-13T17:39:28.348Z","update_time":"$D2026-09-21T05:53:54.102Z","view_time":null,"first_public_time":"$D2024-11-13T18:16:50.251Z","has_unpublished_edits":null,"fork":{"id":"4591a080e2afae6d","slug":"three-js-controlling-object-appearance","title":"Three.js: 4. Controlling object appearance","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"stars":1,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":610,"publish_version":610,"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: 5. Adding surface textures","cells":[{"id":0,"value":"# Three.js: 5. Adding surface textures\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](https://observablehq.com/@jwolondon/three-js-controlling-object-appearance)\n1. **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\nImports, renderer, camera and scene set up largely as in the [previous examples](https://observablehq.com/@jwolondon/three-js-controlling-object-appearance):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":547,"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(1.5, 0.7, 0);\n camera.lookAt(0, 0, 0);\n return camera;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"I simplified the lighting of the scene so I could focus on the affect of adding a texture image to objects.","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(sphere);\n const light = new THREE.AmbientLight(0x666666); // Lowish ambient light.\n scene.add(light);\n\n const dLight = new THREE.DirectionalLight(0xffffcc, 4); // Single source of directional light.\n dLight.position.set(10, 2, 0);\n scene.add(dLight);\n\n return scene;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"## A sphere object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"Rather than the cube used in previous examples, I will add a sphere this time using [SphereGeometry](https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry).\n\nTo map a texture image to the sphere we load the image as normal in Observable, storing its URL for use in the texture mapping.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"FileAttachment(\"2k_earth_daymap.jpg\").image({width: 640})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"const earthImageUrl = await FileAttachment(\"2k_earth_daymap.jpg\").url();\nconst earthTexture = await new THREE.TextureLoader().loadAsync(earthImageUrl);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"Texture mapping is straightforward with the image and object are aligned, so it was just using [TextureLoader()](https://threejs.org/docs/index.html#api/en/loaders/TextureLoader) to load the texture, and then attaching it to the matieral's `map` property.\n\nI kept the wireframe edge geometry to act as a graticule for the globe.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"const sphere = (() => {\n const geometry = new THREE.SphereGeometry(0.7, 30, 15);\n const material = new THREE.MeshStandardMaterial();\n const sphereMesh = new THREE.Mesh(geometry, material);\n\n // Load the texture\n material.map = earthTexture; // Set the loaded texture as the material's map\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 sphere mesh so they move together\n sphereMesh.add(wireframeMesh);\n\n return sphereMesh;\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":552,"value":"[Adding custom geometry](https://observablehq.com/@jwolondon/three-js-adding-custom-geometry)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"---\n\n_For page styling:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"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"