2b:null 2c:["$","title",null,{"children":"Roads network in three.js | Sylvain Lesage | Observable"}] 31:T428,createGroup = function(data) { // Code from https://threejs.org/examples/?q=svg#webgl_loader_svg const paths = data.paths; const group = new THREE.Group(); for (let i = 0; i < paths.length; i++) { const path = paths[i]; const strokeColor = path.userData.style.stroke; if (strokeColor !== undefined && strokeColor !== 'none') { const material = new THREE.MeshBasicMaterial({ color: new THREE.Color().setStyle(strokeColor), opacity: path.userData.style.strokeOpacity, transparent: path.userData.style.strokeOpacity < 1, side: THREE.DoubleSide, depthWrite: false, wireframe: !!wireframe }); for (let j = 0, jl = path.subPaths.length; j < jl; j++) { const subPath = path.subPaths[j]; const geometry = THREE.SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style ); if (geometry) { const mesh = new THREE.Mesh(geometry, material); group.add(mesh); } } } } return group; }32:[{"id":"fb39458bfdad7b13575f2cd4daa7c76f0aaaf7158c3902ff88286a6f610eacdbdb07fb0094d27e18c3a7a7065d54dc5468586e9d9eb6982656cb8be688182d45","href":"https://static.observableusercontent.com/files/fb39458bfdad7b13575f2cd4daa7c76f0aaaf7158c3902ff88286a6f610eacdbdb07fb0094d27e18c3a7a7065d54dc5468586e9d9eb6982656cb8be688182d45","name":"south_sudan_roads.geojson","type":"application/geo+json","lastModified":1606815477328.623,"size":681935}] 2f:{"id":"c6e6ddea41116a22","slug":"roads-network-in-three-js","title":"Roads network in three.js","thumbnail":"6f86bf50ae07d68c90b6729fb136b203759d113b822722864901178787e7cb87","access_level":"public","create_time":"$D2020-12-01T09:26:01.143Z","update_time":"$D2020-12-02T08:15:19.384Z","view_time":null,"first_public_time":"$D2020-12-01T12:36:24.956Z","fork":{"id":"d7f04e2d6be4ab7a","slug":"svg-icons-in-three-js","title":"SVG icons in three.js","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"stars":26,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":655,"publish_version":655,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":7,"collection":{"id":"82eb776e64acf8bd","slug":"three-js","title":"Three.js","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"Roads network in three.js","cells":[{"id":0,"value":"md`# Roads network in three.js\n\nIn this notebook, we represent the [South Sudan roads network](https://observablehq.com/@geosurge/finding-safe-routes) in a three.js scene as flat objects.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"{\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.target.set(...initialTarget);\n controls.update();\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n renderer.render(scene, camera);\n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"md`By default, the road width is set to 4km in order to be _visible from space_. If you zoom in, you might want to reduce the road width to something more realistic, eg 20m.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":389,"value":"viewof roadWidth = logSlider({\n min: 0.001,\n max: 20,\n value: 4,\n format: d => `${(1000 * d).toFixed(0)} meters`,\n\n description: 'select the road width'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"md`If you zoom in, try to check below to show the details of the geometry.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"viewof wireframe = checkbox({\n options: [{ value: 'wireframe', label: 'show wireframe' }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":630,"value":"md`---\n\n### Credits\n\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\nBased on the [\\`webgl/loader/svg\\`](https://threejs.org/examples/?q=svg#webgl_loader_svg) three.js example.\n\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"md`### CHANGELOG\n\n- 2020/12/01: creation\n\n### TODO\n\n_empty_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"md`### Geographic projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"// From https://observablehq.com/@geosurge/finding-safe-routes\ngeojson = await FileAttachment(\"south_sudan_roads.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"earthCircumferenceInKilometers = 40007.863","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"extentPolygon = {\n const extentBoundingBox = d3.geoBounds(geojson);\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [extentBoundingBox[0][0], extentBoundingBox[0][1]],\n [extentBoundingBox[0][0], extentBoundingBox[1][1]],\n [extentBoundingBox[1][0], extentBoundingBox[1][1]],\n [extentBoundingBox[1][0], extentBoundingBox[0][1]]\n ]\n ]\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"westToEast = {\n const points = extentPolygon.geometry.coordinates[0];\n return (\n (d3.max([\n d3.geoDistance(points[1], points[2]),\n d3.geoDistance(points[3], points[0])\n ]) *\n earthCircumferenceInKilometers) /\n (2 * Math.PI)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"southToNorth = {\n const points = extentPolygon.geometry.coordinates[0];\n return (\n (d3.max([\n d3.geoDistance(points[0], points[1]),\n d3.geoDistance(points[2], points[3])\n ]) *\n earthCircumferenceInKilometers) /\n (2 * Math.PI)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"diagonal = Math.hypot(westToEast, southToNorth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"projection = d3.geoMercator().fitSize([westToEast, southToNorth], geojson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"md`### SVG paths`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"pathStrings = {\n const pathFn = d3.geoPath(projection);\n return geojson.features.map(pathFn);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"md`### Three.js scene and camera`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"initialTarget = [westToEast / 2, southToNorth / 2, 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"camera = {\n const fov = 60;\n const aspect = width / height;\n const near = diagonal / 1000;\n const far = diagonal * 3;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(westToEast / 2, -southToNorth / 4, diagonal / 2);\n camera.up.set(0, 0, 1);\n camera.lookAt(...initialTarget);\n camera.updateMatrixWorld();\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(new THREE.AxesHelper(100));\n for (const pathString of pathStrings) {\n scene.add(\n createGroup(\n await loadSvgString(\n pathToSvg(pathString, {\n strokeWidth: roadWidth,\n strokeColor: d3.interpolateRdYlGn(\n // deterministic pseudo-random\n (pathString.length % 13) / 13\n )\n })\n )\n )\n );\n }\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"async function loadSvgString(svgString) {\n const svgUrl = URL.createObjectURL(\n new Blob([svgString], { type: 'image/svg+xml' })\n );\n const loader = new THREE.SVGLoader();\n const data = await new Promise(resolve => {\n loader.load(svgUrl, resolve);\n });\n URL.revokeObjectURL(svgUrl);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"function pathToSvg(\n pathStr,\n { fillColor = \"none\", strokeColor = \"none\", strokeWidth = 1 } = {}\n) {\n return `\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"import { slider, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"import { logSlider } from '@severo/log-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"THREE = {\n const THREE = await require(`three@${version}/build/three.min.js`);\n THREE.SVGLoader = await import(`https://unpkg.com/three@${version}/examples/jsm/loaders/SVGLoader.js`).then(\n a => a.SVGLoader\n );\n THREE.OrbitControls = await import(`https://unpkg.com/three@${version}/examples/jsm/controls/OrbitControls.js`).then(\n a => a.OrbitControls\n );\n THREE.BufferGeometryUtils = await import(`https://unpkg.com/three@${version}/examples/jsm/utils/BufferGeometryUtils.js`).then(\n a => a.BufferGeometryUtils\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"version = '0.123'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"