2d:null 2e:["$","title",null,{"children":"geospatial 3D DOM: Stretch the globe | Andreas Plesch | Observable"}] 33:T511,mutable globeshape = { const globe = html` `; yield globe; }34:[] 31:{"id":"be265093be09146f","slug":"geospatial-3d-dom-stretch-the-globe","title":"geospatial 3D DOM: Stretch the globe","thumbnail":"27651b3366b3921ce25333c1a1b6255566f0523b3a01a0eb8856b0a2ea7dabfa","access_level":"public","create_time":"$D2018-05-31T00:49:44.579Z","update_time":"$D2019-05-14T18:40:03.072Z","view_time":null,"first_public_time":"$D2018-06-01T23:30:03.632Z","has_unpublished_edits":null,"fork":{"id":"596273bb959253b4","slug":"reactive-x3dom","title":"reactive x3dom","owner":{"id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch"}},"stars":7,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":716,"publish_version":716,"role":null,"authored":false,"authors":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}],"members":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"fad18253ee738559","slug":"x3dom","title":"x3dom","owner":{"id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch"}},"type":"notebook","body":{"title":"geospatial 3D DOM: Stretch the globe","cells":[{"id":0,"value":"md`# geospatial 3D DOM: Stretch the globe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`The globe is not a sphere, not even an ellipsoid. In addition, the largest mountain chains are submerged in oceans. Explore the hidden features of the shape of our planet by exaggerating those features greatly, simply by adjusting a slider.\n\nThis being said, the real intent here is to learn how to use x3dom with observable. It seems to work pretty well. So the subtitle really is:\n\n## How to load x3dom, fetch x3d and react with a scene via DOM.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md `Drag with left, zoom with right, and shift with middle mouse button. 'r' resets to initial view. This is built in. Ignore the gap.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x3delement={\n const ele=html`\n

\n\n\n \n \n \n \n \n\n

\n`;\n return ele\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md`If you expand the html above, you will see that a div wraps the x3d scene. Observable required this wrapper for proper styling of this element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`## Interactive DOM mutation\nIt is possible to mutate the x3d element via DOM methods (or D3). x3dom will pickup the changes. Observable should not trigger reactive updates to the x3delement cell if only the DOM is modified in order to avoid reloading, and it does not.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`### The simplest way to manipulate the scene:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"spherematerial.setAttribute('diffuseColor', '0.8275 0.6275 0.0196')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"md`This may actually be an acceptable UI. But the code would not show in the exported runtime.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"viewof ve = slider({\n min: 0,\n max: 400,\n value: 200,\n title: 'vertical exaggeration of globe',\n submit: 'do it!'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"md`\nSince the yScale field of the GeoElevationgrid is initializeOnly, it is necessary to replace the complete grid each time. See the replaceglobe cell below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"md`### pick a new color for the globe:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"viewof color = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"x3d_color = {\n const n = 4;\n const r = ('0x' + color.slice(1,3)) * 1.0/255;\n const g = ('0x' + color.slice(3,5)) * 1.0/255;\n const b = ('0x' + color.slice(5,7)) * 1.0/255;\n const colorrgb = r.toFixed(n)+' '+g.toFixed(n)+' '+b.toFixed(n);\n spherematerial.diffusecolor = colorrgb; \n return colorrgb;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"md`\nx3d uses fractions for r,g,b. The color fields of the Material node are [in,out] and therefore can be directly manipulated by DOM attribute.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`\n# Plans\n- adapt earthquake example\n- combine d3 mapping with globe by canvas as texture\n- x3d content viewer via url and/or download button, should take .x3d, .x3djson, and .gltf2\n- add sealevel rise simulation by superimposing the WGS-84 ellipsoid, probably as 0m GeoElevationgrid with the same resolution.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`-----\n## Let's make a globe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"md`\nglobeshape is mutable. This is to avoid inserting the globe into the scene each time it is updated.\n\nThe x3d content includes the initial viewpoint and wrapper transform, apart from a template globe. The wrapper transform is there to align the geospatial content (the geo-nodes) with a horizon defined by the background node. However, then the viewpoint orientation needs to follow accordingly. This works by just rotating the viewpoint the same amount as the globe. Unfortunately, doing that breaks mobile navigation of the scene. This is why the viewpoint now has precomputed orientation and position fields and is not affected by the wrapper transform.` \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"addglobetoscene = {\n const scene = x3delement.querySelector('scene');\n if (mutable globeshape.parentNode != scene) scene.appendChild(mutable globeshape); // avoid guard somehow\n //if (x3dom) x3delement.querySelector('x3d').runtime.fitAll();\n return true\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"async function fetchX3D(url) {\n try {\n let response = await fetch(url);\n let text = await response.text();\n let xml = await (new window.DOMParser().parseFromString(text, 'text/html'));\n return xml;\n }\n catch (e){\n return e;\n }\n}\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md`\nIt took while to get the incantation of the await fetch sequence correct. Finally borrowed from an example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"geogridele = (await fetchX3D(`https://gist.githubusercontent.com/andreasplesch/6540430174b771a318ae3842e7196f78/raw/6884d4b523188c7f5946ff2208d662fc34e3562d/600x300GlobeGeoElevationGrid.x3d`))\n .querySelector('geoelevationgrid')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"replaceglobe = {\n let grid = mutable globeshape.querySelector('geoelevationgrid');\n let shape = mutable globeshape.querySelector('shape');\n geogridele.setAttribute('yScale', ve);\n shape.replaceChild(geogridele, grid);\n return ve;\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"md`It was best to combine the yScale update and replacing the element into one cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`### initialization and variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"x3dom = require('https://x3dom.org/download/1.7.2/x3dom-full.js').catch(() => window.x3dom)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"patchx3dom = {\n x3dom.debug.activate = function(visible) {\n\t\tx3dom.debug.isActive = true;\n\t\t\n x3dom.debug.logContainer.style.display = (visible) ? \"block\" : \"none\";\n\t\t\n\t\t//Need this HACK for IE/Flash integration. IE don't have a document.body at this time when starting Flash-Backend\n\t\tif(!x3dom.debug.isAppend) {\n\t\t\tif(navigator.appName == \"Microsoft Internet Explorer\") {\n\t\t\t\t//document.documentElement.appendChild(aDiv);\n\t\t\t\tx3dom.debug.logContainer.style.marginLeft = \"8px\";\n\t\t\t\tdocument.documentElement.appendChild(x3dom.debug.logContainer);\n\t\t\t}else{\n\t\t\t\t//document.body.appendChild(aDiv);\n //document.body.appendChild(x3dom.debug.logContainer);\n\t\t\t\t//AP *** : put log div below x3d *** \n\t\t\t\tdocument.querySelector('x3d,X3D,X3d').parentNode.appendChild(x3dom.debug.logContainer);\n\t\t\t}\n\t\t\tx3dom.debug.isAppend = true;\n\t\t}\n };\n x3dom.debug.isAppend = false;\n x3dom.debug.activate(false);\n return 'a patch to put the debug log underneath the scene';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md` I could not figure out how to combine the require cell and the stylesheet cell into one cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`#### observable compatible css`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"x3dstyleforobservable = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"reloader = {\n //not required if require is at the bottom it seems\n x3dom.reload(x3delement);//x3delement only to help Observable\n //x3delement; // just to make reactive\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"spherematerial = {\n return globeshape.querySelector('[def=globe_mat]');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"openelevationheights = {\n const xSpacing = 36;\n const zSpacing = 36;\n const xDimension = 360/xSpacing + 1;\n const zDimension = 180/zSpacing + 1;\n let lat, lon, locations = {\"locations\":[]};\n for (lat=0; lat {\n // return response.json();\n //})\n //.catch(response => { return response; });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`An experiment with an open elevation server`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"