31:T91a,Matterhorn = { const renderer = new THREE.WebGLRenderer({ antialias: true }); const controls = new THREE.OrbitControls(camera, renderer.domElement); // Configure controls based on user preferences if (!unlockRotation) { const lockFactor = 1.069; controls.minPolarAngle = lockFactor * Math.PI / 2; controls.maxPolarAngle = lockFactor * Math.PI / 2; } controls.enableZoom = unlockZoom; controls.enablePan = false; let gltfModel; const loadModel = async () => { // Remove existing model if loaded if (gltfModel) { scene.remove(gltfModel); } const zipUrl = await FileAttachment("Matterhorn.zip").url(); const response = await fetch(zipUrl); const blob = await response.blob(); const zip = await jszip.loadAsync(blob); // Load the zip file using JSZip const glbFile = zip.file("Matterhorn.glb"); const glbData = await glbFile.async("blob"); const glbUrl = URL.createObjectURL(glbData); const loader = new THREE.GLTFLoader(); loader.load(glbUrl, (gltf) => { gltfModel = gltf.scene; // Set initial transformation properties const scale = 0.0595; gltfModel.scale.set(scale, scale, scale); gltfModel.rotation.set(Math.PI / 2, 0.999 * Math.PI, 0); gltfModel.position.set(-0.015, 0.08, -0.44); // Set material properties gltfModel.traverse((child) => { if (child.isMesh && child.material) { child.material.transparent = true; child.material.opacity = modelOpacity.value; } }); scene.add(gltfModel); renderer.render(scene, camera); }); }; loadModel(); // Update model opacity on input change modelOpacity.addEventListener('input', () => { if (gltfModel) { gltfModel.traverse((child) => { if (child.isMesh && child.material) { child.material.opacity = modelOpacity.value; } }); renderer.render(scene, camera); } }); controls.addEventListener("change", () => { renderer.render(scene, camera); }); // Cleanup on cell invalidation invalidation.then(() => { controls.dispose(); renderer.dispose(); }); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); renderer.render(scene, camera); return renderer.domElement; } 32:[{"id":"0e37b6b6967c16a90fffae269b4f97038282f4bf5c07942dccb521f8b5da672ee461d86f53ef110955a6e09f18330de49ee5094b3b8965e8c169a78ead788d66","href":"https://static.observableusercontent.com/files/0e37b6b6967c16a90fffae269b4f97038282f4bf5c07942dccb521f8b5da672ee461d86f53ef110955a6e09f18330de49ee5094b3b8965e8c169a78ead788d66","name":"DHM_xyz_Matterhorn.txt","type":"text/plain","lastModified":1728085484135.095,"size":171943},{"id":"2d0230d2d38cd8c1fe41fbf72b4c4895193d1a0060bf39386f51b431cc96087c3a7c2d73f227e64dc82eb3a43213a9a35a320d1e5ace1a84d8a22487df270efa","href":"https://static.observableusercontent.com/files/2d0230d2d38cd8c1fe41fbf72b4c4895193d1a0060bf39386f51b431cc96087c3a7c2d73f227e64dc82eb3a43213a9a35a320d1e5ace1a84d8a22487df270efa","name":"Matterhorn.zip","type":"application/zip","lastModified":1728310377421.986,"size":15877488},{"id":"6a909fab8cfa568c68b65d88f7630bd1a5261852d3f762c5805b143661dd409f8ecb0a300b48b8bc4e2e4b6d982fa32c550c303f47e6eca32a3a2d4b20e57085","href":"https://static.observableusercontent.com/files/6a909fab8cfa568c68b65d88f7630bd1a5261852d3f762c5805b143661dd409f8ecb0a300b48b8bc4e2e4b6d982fa32c550c303f47e6eca32a3a2d4b20e57085","name":"jszip.min.js","type":"application/javascript","lastModified":1728310666875.716,"size":97630}] 2f:{"title":"ᨒ Matterhorn: 3D Contour Map","cells":[{"id":0,"value":"# ᨒ Matterhorn: 3D Contour Map\n\nThe iconic Matterhorn (4478 m), a natural border between Switzerland and Italy, rises majestically above the Swiss village of Zermatt. This 3D view highlights its East and North faces as seen from the Zermatt region.\n\nThe model is based on Swisstopo’s Digital Height Model DHM25, with a 25-meter grid resolution.\n
➤ Explore this notebook for a detailed contour map of the Matterhorn.\n","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"viewof backgroundColor = Inputs.color({label: \"Background color\", value: \"#eceef4\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"viewof colorStyle = Inputs.select(colorSchemes, {\n label: \"Select a color style\",\n format: d => d.name,\n value: colorSchemes.find(p => p.name === \"PuOr\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"viewof interval = Inputs.range([0.5, 20], {value: 1, step: 0.5, label: html`Contour intervals
(in meters)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"modelOpacity = Inputs.range([0, 1], {value: 0.1, step: 0.1, label: html`3D scan
model opacity`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"viewof unlockZoom = Inputs.toggle({\n label: htl.html`Unlock the zoom`,\n value: true\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"viewof unlockRotation = Inputs.toggle({\n label: htl.html`Unlock all rotations`,\n value: false\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"## 1. Data File\n*To download the data, check the* ᥫ *file pane*.\n\nThe map utilizes data from an ASCII file (see `dataFile`) organized in XYZ format:\n* **X** and **Y** represent coordinates in the Swiss coordinate system.\n* **Z** indicates the elevation at each specific (X, Y) coordinate, measured in meters.","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"dataFile = FileAttachment(\"DHM_xyz_Matterhorn.txt\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"parsedData = (await dataFile.text()).trim().split(\"\\n\").slice(1).map(line => {\n const [x, y, z] = line.split(/\\s+/).map(Number);\n return { x, y, z };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"The *x* and *y* coordinates will be omitted. We reorganize the *z* data into an 80 × 80 grid (`rawData2DGrid`), covering an area of 2 km by 2 km with a 25-meter grid resolution (`gridResolutionMeters`):","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"rawData2DGrid = {\n const grid = {};\n \n // Traverse the dataset and populate the grid\n parsedData.forEach(({ x, y, z }) => {\n if (!grid[x]) grid[x] = {};\n grid[x][y] = z;\n });\n\n // Convert the grid object to a 2D array\n const rows = Object.keys(grid).map(x => {\n const row = Object.keys(grid[x]).map(y => grid[x][y]);\n return row;\n });\n\n\n return rows; \n \n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"gridResolutionMeters = 25 // 25-m grid","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"To simplify data manipulation, we will use the `rawData` object, which organizes the grid dimensions and *z* data values:","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"flatData = parsedData.map(d => d.z);","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"rawData = Object({\n \"gridWidth\": rawData2DGrid.flat().length / rawData2DGrid.length,\n \"gridHeight\": rawData2DGrid.length,\n \"data\": flatData,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"## 2. Contours, Colors and Scaling\nSince we are working with data organized in a regular grid of values, we can utilize `d3.contours()` to compute contour lines. The `d3.contours()` function efficiently generates contours from a 2D array of values and creates paths for visualization. The *thresholds* option allows us to specify a range of contour values.\n
➤ Refer to this notebook for details about the procedure.\n","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"// Min/max elevation\nelevationRange = d3.extent(rawData.data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"// Thresholds for contour\nthresholds = d3.range(Math.floor(elevationRange[0]/interval)*interval, elevationRange[1] + interval, interval)\n .map(value => parseFloat(value.toFixed(1))); // Format each number to one decimal place","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"contours = d3.contours()\n .size([rawData.gridWidth, rawData.gridHeight])\n .thresholds(thresholds)\n (rawData.data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"interpolateTerrain = {\n const i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90));\n const i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95));\n return t => t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"colorSchemes = [\n {name: \"Cividis\", value: d3.interpolateCividis}, \n {name: \"Viridis\", value: d3.interpolateViridis},\n {name: \"Inferno\", value: d3.interpolateInferno},\n {name: \"Magma\", value: d3.interpolateMagma}, \n {name: \"Plasma\", value: d3.interpolatePlasma}, \n {name: \"Green / Yellow / Pink\", value: interpolateTerrain},\n {name: \"BrBg\", value: d3.interpolateBrBG}, \n {name: \"PuOr\", value: d3.interpolatePuOr}, \n {name: \"RdYlBu\", value: d3.interpolateRdYlBu},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"// Color scale with elevation normalization\ncolor = d3.scaleSequential(colorStyle.value).domain(d3.extent(rawData.data)).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"## 3. Three.js\nAs illustrated in this Observable collection, *Threes.js* is an excellent JavaScript library for embedding 3D models within notebooks.\n
➤ 3D model of the Matterhorn downloaded from Sketchfab (Ricardo Garnica).\n
➤ Some of the code provided below is sourced from the forked notebook titled “Contoured mountainious terrain 3D”.\n","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"function createLine(points, color) {\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\n const material = new THREE.LineBasicMaterial({color: color, blending: THREE.MultiplyBlending});\n return new THREE.Line(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"// https://observablehq.com/@sw1227/contoured-mountainious-terrai-3d\n// Scale function for coordinates in contour\n// (Without scaling, coordinates correspond to index)\nfunction scaleContour(contours, scale) {\n return contours.map(({type, value, coordinates}) => (\n {type, value, coordinates: coordinates.map(rings => (\n rings.map(points => (\n points.map(([x, y]) => ([\n x*scale, y*scale\n ]))\n ))\n ))}\n ));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"// Scale xy cooridinates to [0, 1]\nscaledContours = scaleContour(contours, 1/rawData.gridWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"// With `heightScale`, we ensure that the 3D model maintains uniform scaling.\n// grid: 80 x 80 / 25-m grid size <=> 2000 m x 2000 m \n// elevRange[1]-elevRange[0] = 1505.798 m\nheightScale = d => (d-elevationRange[0]) / (gridResolutionMeters * rawData.gridWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"// 3D lineString meshes of contours\ncontourLineStrings = { \n const lines = [];\n scaledContours.forEach(polygon => {\n const lineColor = color(polygon.value);\n\n polygon.coordinates.forEach(rings => {\n rings.forEach(points => {\n const points3 = points.map(([x, y]) => new THREE.Vector3(y - 0.5, x - 0.5, heightScale(polygon.value) - 0.5));\n \n // Use the createLine function to generate a line mesh\n lines.push(createLine(points3, lineColor));\n });\n });\n });\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"camera = {\n const fov = 5;\n const aspect = width / height;\n const near = 0.01;\n const far = 10000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(7, 6, -1);\n camera.up.set(0, 0, 1);\n camera.lookAt(scene.position);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(backgroundColor);\n \n contourLineStrings.forEach(l => scene.add(l));\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"---\n## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"d3 = require(\"d3@5\", \"d3-hsv@0.1.0/build/d3-hsv.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"THREE = {\n // import threejs\n const three = await require(\"three@0.139.2\");\n window.THREE = three;\n\n // import plugins\n await require(\"three@0.139.2/examples/js/controls/OrbitControls.js\").catch((e) => { console.warn(e) });\n await require(\"three@0.139.2/examples/js/loaders/GLTFLoader\").catch((e) => { console.warn(e) });\n\n console.log(three);\n return three;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"// jszip = require(\"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js\");\njszip = require( await FileAttachment(\"jszip.min.js\").url())","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}