31:T661,function customGeometry(r = 1, numCols = 30, numRows = 15) { const vertices = []; // Vertices of triangle strips const indices = []; // Index array for triangles const uvs = []; // Texture mapping coordinates. const halfPi = Math.PI / 2; for (let col = 0; col <= numCols; col++) { const t1 = THREE.MathUtils.mapLinear(col, 0, numCols, -Math.PI, Math.PI); for (let row = 0; row <= numRows; row++) { const t2 = THREE.MathUtils.mapLinear(row, 0, numRows, -halfPi, halfPi); // Parametric equation of a spheroid const x = 0.5 * r * Math.cos(t1) * Math.cos(t2); const z = r * Math.sin(t1) * Math.cos(t2); const y = 0.5 * r * Math.sin(t2); vertices.push(x, y, z); // Calculate UV texture coordinates const u = 1 - col / numCols; const v = row / numRows; uvs.push(u, v); } } // Generate indices to form triangles for each quad in the grid for (let col = 0; col < numCols; col++) { for (let row = 0; row < numRows; row++) { const a = col * (numRows + 1) + row; const b = (col + 1) * (numRows + 1) + row; const c = col * (numRows + 1) + row + 1; const d = (col + 1) * (numRows + 1) + row + 1; indices.push(a, c, b); indices.push(b, c, d); } } // Add vertices, indices, and UVs to the buffer geometry const geometry = new THREE.BufferGeometry(); geometry.setAttribute( "position", new THREE.Float32BufferAttribute(vertices, 3) ); geometry.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); geometry.setIndex(indices); geometry.computeVertexNormals(); return geometry; }32:[{"id":"c5fe188bcde886c6c96b5e14f57df8cd9c6562af9c0f7b0d507352b96657c389eeac7c98272570f092d7b90943bc4fa76b65f5da6346b8d70846dfb0a2377f86","href":"https://static.observableusercontent.com/files/c5fe188bcde886c6c96b5e14f57df8cd9c6562af9c0f7b0d507352b96657c389eeac7c98272570f092d7b90943bc4fa76b65f5da6346b8d70846dfb0a2377f86","name":"2k_earth_daymap.jpg","type":"image/jpeg","lastModified":1731521946205.073,"size":463087}] 2f:{"title":"Three.js: 6. Adding custom geometry","cells":[{"id":0,"value":"# Three.js: 6. Adding custom geometry\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._","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"### Setup\n\nImports, renderer, camera, scene and texture image set up as in the [previous example](https://observablehq.com/@jwolondon/three-js-adding-surface-textures):","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"THREE = import(\"https://cdn.jsdelivr.net/npm/three@0.178/+esm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"OrbitControls = import(\n \"three@0.160/examples/jsm/controls/OrbitControls.js\"\n).then((d) => d.OrbitControls)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"size = ({ w: 640, h: 500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"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":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"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":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"One minor change from the previous example: The scene adds the custom shape (see below) instead of the `sphere`.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"scene = {\n const scene = new THREE.Scene();\n scene.add(myShape); // Add the custom shape defined below.\n const light = new THREE.AmbientLight(0x666666);\n scene.add(light);\n\n const dLight = new THREE.DirectionalLight(0xffffcc, 4);\n dLight.position.set(10, 2, 0);\n scene.add(dLight);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"earthImageUrl = FileAttachment(\"2k_earth_daymap.jpg\").url()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"## A custom object","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"Rather than using pre-made cubes or spheres, it can be useful to be able to create other shapes programmatically. One way of doing this, from my experience using [Processing](https://processing.org/reference/beginShape_.html) is to create triangle strips from arbitrary vertex positions.\n\nAs an experiment, the code below creates triangle strips around a shape based on the parametric equations of a spheroid. To get the texture mapping working I also had to add the uv coordinates of each triangle, which was presumably already built in to the `SphereGeometry' object.`","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"With the ability to create a new geometry specification, the creation of the object, with its mapped texture and wireframe remains as in the previous example with the exception that we call `customGeometry()` rather than `SphereGeometry`","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"myShape = {\n const geometry = customGeometry(0.7, 30, 15);\n const material = new THREE.MeshBasicMaterial();\n const sphereMesh = new THREE.Mesh(geometry, material);\n\n // Load the texture\n material.map = new THREE.TextureLoader().load(earthImageUrl);\n\n // Create a wireframe for the object\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 object mesh so they move together\n sphereMesh.add(wireframeMesh);\n\n return sphereMesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"html`

${renderer.domElement}

Drag pointer to rotate view

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}