45:["$","title",null,{"children":"GeoJSON Polygon in Three.js | Alice Rühl | Observable"}] 4d:[] 49:{"id":"1e626b304a99fc3e","slug":"geojson-polygon-in-three-js","title":"GeoJSON Polygon in Three.js","thumbnail":"417cd9f38c7c1e56282463fcbce70891eb3e7f3bba85e663110e83570319533c","access_level":"public","create_time":"$D2019-12-04T10:57:25.767Z","update_time":"$D2020-11-23T14:09:43.181Z","view_time":null,"first_public_time":"$D2021-03-18T09:44:04.381Z","has_unpublished_edits":null,"fork":{"id":"f35778c72d291730","slug":"geojson-in-three-js","title":"GeoJSON in Three.js","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":2,"starred":false,"owner":{"type":"team","id":"730053c97ebf5e66","login":"alicer","name":"Alice Rühl","avatar_url":"https://avatars-next.observableusercontent.com/44193f2fc802931f579bc946ef5a3d006b35c3b1697ab537b116d12c411e9b49","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":774,"publish_version":774,"role":null,"authored":false,"authors":[{"type":"individual","id":"d9a6120c4d5a2d62","login":"alicer","name":"Alice Rühl","avatar_url":"https://avatars-next.observableusercontent.com/44193f2fc802931f579bc946ef5a3d006b35c3b1697ab537b116d12c411e9b49","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d9a6120c4d5a2d62","login":"alicer","name":"Alice Rühl","avatar_url":"https://avatars-next.observableusercontent.com/44193f2fc802931f579bc946ef5a3d006b35c3b1697ab537b116d12c411e9b49","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"GeoJSON Polygon in Three.js","cells":[{"id":0,"value":"md`# GeoJSON Polygon in Three.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n\n // Use this on interactive mode\n camera.position.x = radius;\n camera.position.y = radius;\n camera.position.z = radius;\n camera.lookAt(scene.position);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera)); // interactive mode ends\n\n try {\n while (true) {\n // Use this on animated mode\n const t = Date.now();\n // const t = 1;\n const { x, y, z } = vertex(\n [t / 100, Math.sin(t / 5000) * 45],\n radius * 1.75\n );\n camera.position.x = x;\n camera.position.y = y;\n camera.position.z = z;\n camera.lookAt(scene.position); // animated mode ends\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n } finally {\n renderer.dispose();\n controls.dispose();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`Select data source`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"viewof url = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md`Select geometry representation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"viewof viztype = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"function vertex([longitude, latitude], radius) {\n const lambda = (longitude * Math.PI) / 180;\n const phi = (latitude * Math.PI) / 180;\n return new THREE.Vector3(\n radius * Math.cos(phi) * Math.cos(lambda),\n radius * Math.sin(phi),\n -radius * Math.cos(phi) * Math.sin(lambda)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`Once the coordinates are converted to three dimensions, each pair of adjacent coordinates becomes a line segment.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"function wireframe(coordinates, radius, material) {\n const geometry = new THREE.Geometry();\n for (const P of coordinates) {\n for (let p0, p1 = vertex(P[0], radius), i = 1; i < P.length; ++i) {\n geometry.vertices.push(p0 = p1, p1 = vertex(P[i], radius));\n }\n }\n return new THREE.LineSegments(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"md`Alternatively, the coordinates can be triangulated to create faces, that can be used to create a mesh, i.e. draw polygons on the globe. This approach has drawbacks, that are most notable when the source polygons are quite large.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"function mesh(coordinates, radius, material) {\n const group = new THREE.Group();\n for (const bunch of coordinates) {\n const geometry = new THREE.Geometry();\n for (let p0, p1 = vertex(bunch[0], radius), i = 1; i < bunch.length; ++i) {\n geometry.vertices.push((p0 = p1), (p1 = vertex(bunch[i], radius)));\n }\n const triangles = THREE.ShapeUtils.triangulateShape(geometry.vertices, []);\n for (var i = 0; i < triangles.length; i++) {\n geometry.faces.push(\n new THREE.Face3(triangles[i][0], triangles[i][1], triangles[i][2])\n );\n }\n const mesh = new THREE.Mesh(geometry, material);\n group.add(mesh);\n }\n return group;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"land = {\n const response = await fetch(url);\n const featureCollection = await response.json();\n const flattened = flatten(featureCollection);\n const coordinates = [];\n flattened.features.forEach(feature => {\n if (feature.geometry.type === 'Polygon') {\n coordinates.push(...feature.geometry.coordinates);\n return;\n }\n coordinates.push(feature.geometry.coordinates);\n });\n const land =\n viztype === 'line'\n ? wireframe(\n coordinates,\n radius,\n new THREE.LineBasicMaterial({ color: 'teal', side: THREE.DoubleSide })\n )\n : mesh(\n coordinates,\n radius,\n new THREE.MeshBasicMaterial({\n color: 'turquoise',\n side: THREE.DoubleSide\n })\n );\n return land;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"graticule = {\n const coordinates = graticule10().coordinates;\n return wireframe(coordinates, radius, new THREE.LineBasicMaterial({color: 0xaaaaaa}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"sphere = {\n const geometry = new THREE.SphereGeometry(radius - 0.3, 32, 32);\n const material = new THREE.MeshBasicMaterial({ color: 'white' });\n return new THREE.Mesh(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(sphere);\n scene.add(graticule);\n scene.add(land);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n const fov = 70;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n return new THREE.PerspectiveCamera(fov, aspect, near, far);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"radius = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function graticule10() { // See https://github.com/d3/d3-geo/issues/95\n return {\n type: \"MultiLineString\",\n coordinates: [].concat(\n Array.from(\n range(-180, 180, 10),\n x => x % 90 ? meridian(x, -80, 80) : meridian(x, -90, 90)\n ),\n Array.from(\n range(-80, 80 + 1e-6, 10),\n y => parallel(y, -180, 180)\n )\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"function meridian(x, y0, y1, dy = 2.5) {\n return Array.from(range(y0, y1 + 1e-6, dy), y => [x, y]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"function parallel(y, x0, x1, dx = 2.5) {\n return Array.from(range(x0, x1 + 1e-6, dx), x => [x, y]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"function* range(start, stop, step) {\n for (let i = 0, v = start; v < stop; v = start + (++i * step)) {\n yield v;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"flatten = require('geojson-flatten');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.110.0/build/three.min.js\"));\n await require(\"three@0.110.0/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null