2c:null 2d:["$","title",null,{"children":"Visualizing wind turbines in 3D using threebox | Job van der Zwan | Observable"}] 32:T569,viewof settings = Inputs.form({ windpark: Inputs.radio( [ windkraftanlage_joellenbeck, // windkraftanlage_hollandskopf, //windpark_asseln, { type: "FeatureCollection", description: { name: "Create your own" }, features: [] } ], { label: "Example wind turbine / create your own", format: (geojson) => geojson.description?.name || "Create custom", value: windkraftanlage_joellenbeck } ), windparkName: Inputs.text({ label: "Name of the windpark (used when embedding)", value: "My wind turbine" }), description: Inputs.text({ label: "Optional description (used when embedding)", value: "" }), selectedTurbineModel: Inputs.radio(turbineModels, { label: "Turbine model", value: turbineModels[0], format: (m) => m.name }), show3DTerrain: Inputs.checkbox([" "], { label: "Show 3D terrain (disables shadows)", value: [] }), animateTurbine: Inputs.checkbox([" "], { label: "Animate turbine", value: [" "] }), height: Inputs.range([0, 250], { value: 98, label: "Hub height (m)", step: 0.5 }), rotation: Inputs.range([0, 360], { value: 180, label: "Rotation (°)", step: 1 }), isEditable: Inputs.radio(["True", "False"], { label: "Allow adding new turbines", value: "True" }) })33:T574,usage_description = { let showAddTurbine = settings.isEditable === "True" ? true : false; // check if query string was passed, in this case override settings let url = new URL(window.location.href); let params = new URLSearchParams(url.search); const mapDataQS = params.get("map-data"); if (mapDataQS) { // parse initial settings (base64) from url let initialSettings = base64Tojson(mapDataQS); if (initialSettings.isEditable !== "True") showAddTurbine = false; } return md`Use \`right click + drag\` to **rotate and pitch** the map or \`click + drag\` the

button. ${ showAddTurbine ? `To add a new wind turbine, click the

button, then place the turbine on the map by clicking on the desired location.` : "" } `; }34:T29bd,viewof wind_turbine_map = { const container = html`

`; yield container; forceReload; let initialSettings = viewof settings.value; // check if query string was passed, in this case override settings let url = new URL(window.location.href); let params = new URLSearchParams(url.search); const mapDataQS = params.get("map-data"); if (mapDataQS) { // parse initial settings (base64) from url initialSettings = base64Tojson(mapDataQS); console.log(initialSettings); mutable currentView = { center: initialSettings.center, pitch: initialSettings.pitch, bearing: initialSettings.bearing, zoom: initialSettings.zoom }; // remove from url params.delete("map-data"); } let showTerrain = initialSettings.show3DTerrain.length; let selectedWindpark = initialSettings.windpark; let selectedWindparkProps = selectedWindpark.description; let modelCenter = selectedWindpark.features.length ? selectedWindpark.description.center || turf.centroid(selectedWindpark).geometry.coordinates : [8.483355, 52.10006]; let showAnimation = initialSettings.animateTurbine.length ? true : false; let selectedTurbineModel = initialSettings.selectedTurbineModel; let animationDuration = 35 * 1000; let turbineModelHeight = selectedTurbineModel.modelHeight; let turbineScalingFactor = turbineModelHeight / selectedTurbineModel.hubHeight; let loading = false; const map = new mapboxgl.Map({ container: container, style: selectedBasemap[0], zoom: selectedWindparkProps.zoom || 2, center: modelCenter, pitch: selectedWindparkProps.pitch || 0, bearing: selectedWindparkProps.bearing || 0, preserveDrawingBuffer: true, antialias: true }); if (mutable currentView) { map.flyTo({ ...mutable currentView, duration: 0 }); } const geocodeControl = new MapboxGeocoder({ accessToken: mapboxgl.accessToken, mapboxgl: mapboxgl }); if (initialSettings.isEditable === "True") { map.addControl(geocodeControl); } const navigationControl = new mapboxgl.NavigationControl({ visualizePitch: true }); map.addControl(navigationControl); const Draw = new MapboxDraw({ displayControlsDefault: false, // Select which mapbox-gl-draw control buttons to add to the map. controls: { point: true, trash: false } }); if (initialSettings.isEditable === "True") { map.addControl(Draw, "top-right"); } // map event listeners map.on("load", function () { if (selectedWindpark.features.length) { add3DLayer(); } }); map.on("move", () => { modelCenter = map.getCenter().toArray(); mutable currentView = { center: modelCenter, pitch: map.getPitch(), bearing: map.getBearing(), zoom: map.getZoom() }; updateContainerValue(initialSettings, mutable currentView); }); map.on("draw.modechange", (e) => { if (e.mode === "draw_point") { tb.defaultCursor = "crosshair"; } else { tb.defaultCursor = "grab"; } }); map.on("draw.create", async function (e) { Draw.delete(e.features[0].id); selectedWindpark.features.push(e.features[0]); const countTurbines = selectedWindpark.features.length; // remove all models and layers await remove3DLayer(); // create new layer with updated wind park await add3DLayer(); updateContainerValue(initialSettings, mutable currentView); }); // initialize threebox let tb = (window.tb = new Threebox.Threebox( map, map.getCanvas().getContext("webgl"), { realSunlight: true, sky: selectedBasemap[1].includes("Transparent") ? false : true, enableSelectingObjects: false, enableTooltips: false, terrain: showTerrain } )); tb.defaultCursor = "grab"; let geometry = false; let meshes = []; let modelReferences = []; const date = new Date(viewof dateInput.value); updateContainerValue(initialSettings, mutable currentView); // observable input event listeners viewof dateInput.addEventListener("input", () => { if (loading) return; const oldDate = new Date(date); const newDate = viewof dateInput.value; date.setMonth(newDate.getMonth()); date.setDate(newDate.getDate()); date.setHours(oldDate.getHours(), oldDate.getMinutes()); mutable curSunlightTime = date; map.triggerRepaint(); }); viewof hourInput.addEventListener("input", () => { if (loading) return; const hourIndex = viewof hourInput.value; const newHour = calcSunlightTime(modelCenter, date, hourIndex); date.setHours(newHour.getHours(), newHour.getMinutes()); mutable curSunlightTime = date; map.triggerRepaint(); }); viewof settings.addEventListener("input", async () => { loading = true; const newSettings = viewof settings.value; // stop animation during settings update modelReferences.forEach((ref) => { ref.stop(); }); //if (newSettings.animateTurbine.length === 0) { //} // update terrain tb.terrain = newSettings.show3DTerrain.length ? true : false; if (tb.terrain && !showTerrain) { // wait for data to load console.log("waiting for terrain"); await map.once("idle"); } // update controls if they changed if (newSettings.isEditable !== initialSettings.isEditable) { if (newSettings.isEditable === "True") { // remove navigation control first, // so that geocoder remains on top map.removeControl(navigationControl); map.addControl(geocodeControl); map.addControl(navigationControl); map.addControl(Draw, "top-right"); } else { map.removeControl(geocodeControl); map.removeControl(Draw, "top-right"); } } // update settings data updateSettings(newSettings); await remove3DLayer(); await add3DLayer(); loading = false; updateContainerValue(newSettings, mutable currentView); }); function updateSettings(newSettings) { showTerrain = newSettings.show3DTerrain.length ? true : false; selectedWindpark = newSettings.windpark; selectedWindparkProps = selectedWindpark.description; modelCenter = selectedWindpark.features.length ? turf.centroid(selectedWindpark).geometry.coordinates : [8.483355, 52.10006]; showAnimation = newSettings.animateTurbine.length ? true : false; selectedTurbineModel = newSettings.selectedTurbineModel; turbineModelHeight = selectedTurbineModel.modelHeight; turbineScalingFactor = turbineModelHeight / selectedTurbineModel.hubHeight; initialSettings = newSettings; } function updateContainerValue(settings, view) { container.value = { ...settings, ...view }; container.dispatchEvent(new Event("input", { bubbles: true })); } function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function remove3DLayer() { await tb.clear(); if (map.getLayer("3d-model")) { map.removeLayer("3d-model"); } } async function add3DLayer() { const customLayer = await createCustomLayer("3d-model"); map.addLayer(customLayer); } async function createCustomLayer(layerName) { // create model url // Source of Enercon E70 model: https://www.blendswap.com/blend/16126, // Source of Generic Wind Turbine (modeled after Vestas V136) const url = selectedTurbineModel.url; const animationDuration = 35 * 1000 + 10; //create the layer let customLayer3D = { id: layerName, type: "custom", renderingMode: "3d", onAdd: function (map, gl) { let options = { type: "gltf", // IMPORTANT - DO NOT REMOVE // the mtl option MUST be present, it just needs a URL that returns a 200 status code // if you uncommented / delete the mtl option the actual object won't load // Thanks @mootari for debugging this mtl: "https://cdn.jsdelivr.net/npm/threebox-plugin@2.2.7/examples/models/radar/", obj: url, units: "meters", scale: (initialSettings.height * turbineScalingFactor) / turbineModelHeight / devicePixelRatio, rotation: { x: 90, y: initialSettings.rotation, z: 0 }, anchor: "auto", cloned: true }; // tb.enableDraggingObjects = true; // tb.enableRotatingObjects = true; for (let i = 0; i < selectedWindpark.features.length; ++i) { const location = selectedWindpark.features[i]; const origin = location.geometry.coordinates; tb.loadObj(options, function (model) { if (!geometry) { model.traverse(function (object) { if (object.isMesh) meshes.push(object.geometry); }); geometry = true; } // query height of location const height = map.queryTerrainElevation( { lng: origin[0], lat: origin[1] }, { exaggerated: false } ); const coordinates = [ origin[0], origin[1], showTerrain ? origin[2] || height : 0 ]; const turbine = model.setCoords(coordinates); modelReferences.push(turbine); model.addTooltip(location.properties?.name || "Wind turbine", true); turbine.addEventListener( "ObjectChanged", // "SelectedChange", (e) => { console.log(e); }, false ); tb.add(turbine); model.castShadow = true; tb.lights.dirLight.target = model; }); } // start the animation animate(); }, render: function (gl, matrix) { tb.setSunlight(date, modelCenter); //set Sun light for the given datetime and lnglat tb.update(); }, onRemove: function () { cancelAnimationFrame(lastRequestId); } }; return customLayer3D; } let lastRequestId; function animate(timestamp) { tb.previousFrameTime = timestamp; if (modelReferences.length && showAnimation && !loading) { modelReferences.forEach((modelRef, i) => { modelRef.playDefault({ animation: 0, duration: animationDuration }); }); } lastRequestId = requestAnimationFrame(animate); } invalidation.then(async () => { await tb.dispose(); map.remove(); }); }35:Tc6e,{ const styles = htl.html` `; const container = htl.html`

`; yield container; const header = htl.html` `; let content = htl.html`

${shareURL}

`; container.appendChild(styles); container.appendChild(header); container.appendChild(content); const copyButton = document.getElementById("copy-button"); const headerTabs = document.getElementById("header-tabs").children; let curTab = "URL"; copyButton.addEventListener("click", function (e) { if (curTab === "URL") navigator.clipboard.writeText(shareURL); else navigator.clipboard.writeText(iframe_html); copyButton.style.color = "green"; copyButton.innerHTML = "done"; setTimeout(() => { copyButton.style.color = "grey"; copyButton.innerHTML = "content_copy"; }, 3000); }); for (let index = 0; index < headerTabs.length; ++index) { const tab = headerTabs[index]; tab.addEventListener("click", (e) => { if (e.target.innerText === "URL") { curTab = "URL"; content.innerHTML = `

${shareURL}

`; headerTabs[0].classList.add("active"); headerTabs[1].classList.remove("active"); } else { curTab = "Embed"; content.innerText = `${iframe_html}`; headerTabs[1].classList.add("active"); headerTabs[0].classList.remove("active"); } }); } }36:T4d2,iframe_html = `

${ settings.windparkName }

${ settings.description ? `

${settings.description}

` : "" }

`37:T4a0,b64toU8array = { const UriSafeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-".split(""); const charToU6 = {}; UriSafeChars.map((char, i) => charToU6[char.charCodeAt(0)] = i); return function b64toU8array(str) { const u6 = utf.encode(str); // this might result in extra zeroes at the end, which are ignored by the decompressor const u8 = new Uint8Array(Math.ceil(u6.length * 3 / 4)); let j = 0, i = 0, u6_0 = 0, u6_1 = 0, u6_2 = 0, u6_3 = 0; while (j + 4 < u6.length) { u6_0 = charToU6[u6[j]]; u6_1 = charToU6[u6[j+1]]; u6_2 = charToU6[u6[j+2]]; u6_3 = charToU6[u6[j+3]]; // Let Uint8Array handle truncation u8[i] = (u6_0 << 2) + (u6_1 >> 4); u8[i+1] = (u6_1 << 4) + (u6_2 >> 2); u8[i+2] = (u6_2 << 6) + u6_3; j += 4; i += 3; } u6_0 = charToU6[j < u6.length ? u6[j] : 0]; u6_1 = charToU6[j+1 < u6.length ? u6[j+1] : 0]; u6_2 = charToU6[j+2 < u6.length ? u6[j+2] : 0]; u6_3 = charToU6[j+3 < u6.length ? u6[j+3] : 0]; u8[i] = (u6_0 << 2) + (u6_1 >> 4); u8[i+1] = (u6_1 << 4) + (u6_2 >> 2); u8[i+2] = (u6_2 << 6) + u6_3; return u8 } }38:T2af7,LZ78 = { // Stripped version of my circular typed array generator // (since we don't need pop/shift/unshift/etc) function makeCircularPrototype(arrayConstructor, name) { // Using a computed property lets us give a custom name // to a generated prototype. const { [name]: circularTA } = { [name]: function (length, capacity) { if (length === undefined) length = 0; if (!Number.isInteger(length) || length < 0) throw new Error("length must be a positive integer"); // Force capacity to a power of two, because using bitmasks for modulo is faster if (capacity === undefined) capacity = Math.max(16, 2 ** Math.ceil(Math.log2(length + 1))); else capacity = 2 ** (Math.ceil(Math.log2(capacity))); if (!Number.isInteger(capacity) || capacity < length) throw new Error("Initial capacity must be a positive integer equal or greater to length"); const data = new arrayConstructor(capacity); this.data = data; this.length = length; this.offset = 0; } }; circularTA.from = function (array) { const cta = new circularTA(array.length); for (let i = 0; i < array.length; i++) { cta.data[i] = array[i]; } return cta; }; Object.assign(circularTA.prototype, { push(...args) { if (args.length === 0) args = [0]; this.maybeGrow(args.length); let { length } = this; const mod = this.data.length - 1; for (const val of args) { this.data[(this.offset + length++) & mod] = val; } return (this.length += args.length); }, slice(begin = 0, end = this.length) { begin = Math.max(begin | 0, 0); end = Math.min(end | 0, this.length); const ret = []; const { offset, data } = this; const mod = data.length - 1; for (let i = begin; i < end; i++) { ret.push(data[(i + offset) & mod]); } return circularTA.from(ret); }, // copy a typed array from the data sliceTA(begin = 0, end = this.length) { begin = Math.max(begin | 0, 0); end = Math.min(end | 0, this.length); const ret = []; const { offset, data } = this; const mod = data.length - 1; for (let i = begin; i < end; i++) { ret.push(data[(i + offset) & mod]); } return arrayConstructor.from(ret); }, maybeGrow(newLength) { if (newLength + this.length > this.data.length) { const { data, length, offset } = this; const nData = new arrayConstructor(data.length * 2); const mod = data.length - 1; for (let i = 0; i < length; i++) { nData[i] = data[(i + offset) & mod]; } this.data = nData; this.offset = 0; } }, [Symbol.iterator]: function* () { const { data, length, offset } = this; const mod = data.length - 1; for (let i = 0; i < length; i++) { yield data[(i + offset) & mod]; } } }); return circularTA; } const CircularU8 = makeCircularPrototype(Uint8Array, "CircularU8"); class ByteStream { constructor(bytes) { this.stream = new CircularU8(bytes && bytes.length); if (bytes) { for (let i = 0, {data} = this.stream; i < bytes.length; i++) data[i] = bytes[i]; } this.valOut = 0; this.remainingOutBits = 8; this.valInPos = 0; this.valIn = 0; this.remainingInBits = 0; } getNextVal() { return this.stream.data[this.valInPos++]; } strOut(value, valueBits) { // First handle all bits that fill up valOut and move to the next // char in the stream until all the remaining value bits fit in valOut if (valueBits > this.remainingOutBits) { valueBits -= this.remainingOutBits; let valueChunk = value >>> valueBits; this.valOut = this.valOut | valueChunk; this.stream.push(this.valOut); // while there are more valueBits left than can be fit into // a full charCode, stream bit by charCode sized chunks while (valueBits >= 8) { valueBits -= 8; this.stream.push((value >>> valueBits) & 0xFF); } this.valOut = 0; this.remainingOutBits = 8; } // At this point valueBits < remainingvalOutBits. If there are bits left // to stream, put them into valOut if (valueBits > 0) { var valueMask = (1 << valueBits) - 1; this.remainingOutBits -= valueBits; this.valOut = this.valOut | ((value & valueMask) << this.remainingOutBits); } // if we filled up our valOut, stream it. if (this.remainingOutBits === 0) { this.stream.push(this.valOut); this.valOut = 0; this.remainingOutBits = 8; } return this; } flush() { if (this.remainingOutBits < 8) { this.stream.push(this.valOut); this.valOut = 0; this.remainingOutBits = 8; } return this; } strIn(valueBits) { // Move to next valIn value if this one is finished if (this.remainingInBits === 0) { this.remainingInBits = 8; this.valIn = this.getNextVal(); } // // only get a valIn if still inside data // if (streamIdx >= this.stream.length) return null; let value = 0; // while more bits are asked than current valIn has remaining, // put bit chunks into the output value and get new char values if (valueBits > this.remainingInBits) { let valueMask = (1 << this.remainingInBits) - 1; valueBits -= this.remainingInBits; this.remainingInBits = 8; value = (this.valIn & valueMask) << valueBits; while (valueBits > 8) { valueBits -= 8; value = value | (this.getNextVal() << valueBits); } this.valIn = this.getNextVal(); } // If there are still required bits left, get them from valIn // Note: valueBits < remainingBits is ensured due to above if+while section if (valueBits > 0) { let valueMask = (1 << valueBits) - 1; this.remainingInBits -= valueBits; value = value | ((this.valIn >>> this.remainingInBits) & valueMask); } return value; } phaseOut(value, totalValues) { value = value; let valueBits = 32 - Math.clz32(totalValues - 1); const nextPow2 = (1 << valueBits) >>> 0; // Once we have this power of two we can determine the treshold value. // Any value below the treshold will require one fewer bit. const treshold = nextPow2 - totalValues; if (value < treshold) { valueBits--; } else { value += treshold; } this.strOut(value, valueBits); return this; } phaseIn(totalValues) { const valueBits = 32 - Math.clz32(totalValues - 1); const nextPow2 = (1 << valueBits) >>> 0; const treshold = nextPow2 - totalValues; let value = this.strIn(valueBits - 1); if (value >= treshold) value = ((value << 1) + this.strIn(1) - treshold) >>> 0; return value; } } class Trie extends Map { constructor(key, val, ...args) { super(...args); this.key = key; // the byte that pointed to this node this.val = val; // the token value associated with the substring } addNode(char, val) { // Don't replace existing nodes, just overwrite their values let child = this.get(char); if (child) { child.val = val; } else { child = new this.constructor(char, val); this.set(char, child); } return child; } } return { compress(bytes) { // assumes bytes is not empty and less than 4 GiB, // uses Elias Gamma encoding to store the length const byteBits = 32 - Math.clz32(bytes.length); if (!byteBits) return new Uint8Array(0); const stream = new ByteStream(); stream.strOut(0, byteBits - 1); stream.strOut(bytes.length, byteBits); const dictionary = new Trie(); // Dictionary always has these "escape" tokens: // 0 - "stop" token, // 1 - "new byte" token let dictSize = 2, node = null, byte = bytes[0], i = 0; while (i < bytes.length) { if (node = dictionary.get(byte)) { // known substring, go to end of it while (++i < bytes.length) { byte = bytes[i]; const nextNode = node.get(byte); if (!nextNode) break; node = nextNode; } stream.phaseOut(node.val, dictSize); node.addNode(byte, dictSize++); } else { // new byte, emite + add new byte to dictionary. stream.phaseOut(1, dictSize); stream.strOut(byte, 8); node = dictionary.addNode(byte, dictSize++); // if we reach the end of the bytes array this will never be accessed anyway byte = ++i < bytes.length ? bytes[i] : 0x100; node.addNode(byte, dictSize++); } } // write end-of-stream marker stream.phaseOut(0, dictSize++); stream.flush(); return stream.stream.sliceTA(); }, decompress(compressedBytes){ const stream = new ByteStream(compressedBytes); let bits = 0; while(!stream.strIn(1) && bits < 33) bits++; if (bits > 32) throw new Error ("Elias Gamma decoding fail"); const length = (1 << bits) + stream.strIn(bits); const bytes = new Uint8Array(length); if (!length) return bytes; // word index and word length let wIdx = 0, wLength = 0; // dictionary consists of index, length pairs. Since tokens zero and one are // "escape" tokens they are stored as NaN values. const indices = [NaN, NaN]; const lengths = [NaN, NaN]; let i = 0; while (i < length) { let val = stream.phaseIn(indices.length); if (val === 0) { // end of stream token ++i; if (i !== length) throw new Error(`decompressed size mismatch. i: ${i}, length: ${length}`); break; } else if (val === 1) { // new byte token bytes[i] = stream.strIn(8); // add byte to dictionary, then add byte + next byte indices.push(i, i); lengths.push(1, 2); wIdx = i; wLength = 1; } else { // known dictionary word token const byteStart = i; wIdx = indices[val]; wLength = lengths[val]; for (let j = 0; j < wLength; j++) { bytes[byteStart + j] = bytes[wIdx + j]; } // update word starting index, and add starting index of word + 1 indices[val] = indices[indices.length] = wIdx = byteStart; lengths[lengths.length] = wLength + 1; } i += wLength; } return bytes; } }; }39:[{"id":"8e294a3ffa1d862d9943137030d38f68a332ac06141ac035979af716a54f5b4c4296059a8ca765d44a0640e5f919a04b56fffa0a9a2c94aaae76517458e68d36","href":"https://static.observableusercontent.com/files/8e294a3ffa1d862d9943137030d38f68a332ac06141ac035979af716a54f5b4c4296059a8ca765d44a0640e5f919a04b56fffa0a9a2c94aaae76517458e68d36","name":"Enercon_E70_2.glb","type":"model/gltf-binary","lastModified":1674053979377.769,"size":4598204},{"id":"279be7b0c096835312fec81001d7924a9de16489e5e3c9f86845ffb24440ff49c8f52aaf841326ffdca3b3dd0c60aca5dbe91177b24e25fcb787a3ffef099ed0","href":"https://static.observableusercontent.com/files/279be7b0c096835312fec81001d7924a9de16489e5e3c9f86845ffb24440ff49c8f52aaf841326ffdca3b3dd0c60aca5dbe91177b24e25fcb787a3ffef099ed0","name":"image@1.png","type":"image/png","lastModified":1674053979377.769,"size":4500},{"id":"22916be3a1c538c6287d43c98eeb13403e2dcbe82ff45238841fe94b74a231e079ab8964996473176ac90452d4354e168448f92cb10f5c265aefedd06133a083","href":"https://static.observableusercontent.com/files/22916be3a1c538c6287d43c98eeb13403e2dcbe82ff45238841fe94b74a231e079ab8964996473176ac90452d4354e168448f92cb10f5c265aefedd06133a083","name":"wind_turbine@1.drawio.png","type":"image/png","lastModified":1674053979377.769,"size":10650},{"id":"e7cb6dfa74087871716cd7a8c212401295922c3ffa6e131e21ec140aa7efc51f4e5d71e643dd45a76d24c77af37a347d794c534ad0a3762bbd1fbffd046b19b2","href":"https://static.observableusercontent.com/files/e7cb6dfa74087871716cd7a8c212401295922c3ffa6e131e21ec140aa7efc51f4e5d71e643dd45a76d24c77af37a347d794c534ad0a3762bbd1fbffd046b19b2","name":"wind_turbine.glb","type":"model/gltf-binary","lastModified":1674053979377.769,"size":274944}] 30:{"id":"87a3330fce4e42d3","slug":null,"title":"Visualizing wind turbines in 3D using threebox","thumbnail":"c0faa294288f891f3177452beda2626c94720223e13ffb4f7b25585a6f5c51a1","access_level":"unlisted","create_time":"$D2023-01-18T14:59:39.377Z","update_time":"$D2023-01-18T15:17:15.711Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"1b0e5174cf141460","slug":"visualizing-wind-turbines-in-3d-using-threebox","title":"Visualizing wind turbines in 3D using threebox","owner":{"id":"d2dc6c8d94d1ea2c","login":"chrispahm","name":"Christoph Pahmeyer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":1399,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualizing wind turbines in 3D using threebox","cells":[{"id":0,"value":"# Visualizing wind turbines in 3D using threebox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"paragraph1 = md`Wind energy is a clean and renewable energy source that plays a vital role in reducing our reliance on fossil fuels. However, the construction of new wind turbines often faces low acceptance rates among local communities. One of the main concerns is the fear of landscape degradation, with many people viewing wind turbines as \"blots on the landscape\"^{[[1](#footnote1)]}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"paragraph2 = md`To address this concern, interactive visualizations are required that allow for a fair and transparent discussion about the visual impact of a new wind turbine project^{[[2](#footnote2)]}. This notebook demonstrates a free and simple method for creating such visualizations using [threebox](https://github.com/jscastro76/threebox), an open-source [Three.js](https://threejs.org/) plugin for [Mapbox GL JS](https://www.mapbox.com/). Creating your own wind turbine visualization only involves 3 steps, so let's get started!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"md`## 1. Adjust wind turbine settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"viewof selectedBasemap = Inputs.radio(basemapOptions, {\n value: basemapOptions[0],\n label: \"Select a basemap\",\n format: (b) => b[1]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"md`## 2. Add turbines to the map and adjust view `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof dateInput = Scrubber(dates, {\n autoplay: true,\n delay: 500,\n format: (date) =>\n \"Sunlight on \" +\n date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"viewof hourInput = Scrubber(hours, {\n autoplay: true,\n format: () =>\n \"Time of day: \" +\n mutable curSunlightTime.toLocaleTimeString(\"en\", {\n hour12: false,\n hour: \"2-digit\",\n minute: \"2-digit\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"md`## 3. Share your custom wind turbine visualization!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"md`Use the following link (URL) to share your wind turbine map, or embed it into another website using the \\`html\\` snippet provided in the Embed tab.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"md`> **_Why is this link (URL) so long?:_** All of your custom wind turbine settings are stored within the URL instead of storing them on a server, making it longer than most other URLs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"md`You may also download an \\`html\\` file embedding your custom wind turbine map using the following button. Note that the \\`html\\` won't run if you open it as a local file due to CORS policy (https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"DOM.download(\n new Blob([iframe_html], {\n type: \"text/plain\"\n }),\n \"wind-turbine-3d-visualization.html\",\n `Download wind-turbine-3d-visualization.html`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"md`## Known issues\n\n- Map remains dark, regardless of sunlight times -> **fix: switch basemap, and switch back**\n- Upon viewport changes, the wind turbines are distorted / misplaced -> known issue in threebox (https://github.com/jscastro76/threebox/issues/293) **fix: reload wind_turbine_map cell**\n- Toggling 3D terrain removes wind turbines -> **fix: switch basemap, and switch back**\n- No shadows are shown when 3D terrain is present -> there's currently no way to access the 3D terrain mesh used by mapbox internally, which would be needed to calculate correct shadows in three.js. Please advise if you have an idea for how to fix this! (https://github.com/jscastro76/threebox/issues/381)\n- Console is flooded with errors when turbines are animated -> To the best of my knowledge, threebox does not provide any error handlers where these errors could be intercepted. Please advise if you have an idea for fixing!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`### References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"footnote1 = footnote(\n \"paragraph1\",\n 1,\n `Herring, H. (2004) – “Windy blots on the landscape?”. Organization & Environment\nVol. 17, No. 4 (December 2004), pp. 533-537 (5 pages)\nPublished By: Sage Publications, Inc. Retrieved from: ‘https://www.jstor.org/stable/26162407’ [Last Accessed 11.01.2023]`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"footnote2 = footnote(\n \"paragraph2\",\n 2,\n `Grassi, S., & Klein, T. M. (2016). 3D augmented reality for improving social acceptance and public participation in wind farms planning. In Journal of Physics: Conference Series (Vol. 749, No. 1, p. 012020). IOP Publishing. Retrieved from: ‘https://iopscience.iop.org/article/10.1088/1742-6596/749/1/012020/meta’ [Last Accessed 11.01.2023]`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"md`### Methods & Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"shareURL = `https://observablehq.com/@chrispahm/visualizing-wind-turbines-in-3d-using-threebox?map-data=${jsonToBase64(\n wind_turbine_map\n)}#dateInput`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"mutable currentView = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"mutable curSunlightTime = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"function calcSunlightTime(coord, day, index) {\n // get sunrise and sunset for currently selected date\n const times = SunCalc.getTimes(day, coord[1], coord[0]);\n // get time difference in minutes\n const timeDiff = (times.sunset - times.sunrise) / (1000 * 60);\n // slice into equal parts according to currently selected day\n const minuteSlices = timeDiff / hours.length;\n // get current sunlight time for given index\n const start = times.sunrise.getMinutes();\n const curSunlightTime = new Date(times.sunrise);\n curSunlightTime.setMinutes(start + minuteSlices * index);\n return curSunlightTime;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"turbineModels = [\n {\n url: await FileAttachment(\"Enercon_E70_2.glb\").url(),\n modelHeight: 89,\n hubHeight: 85,\n name: \"Enercon E70\"\n },\n {\n url: await FileAttachment(\"wind_turbine.glb\").url(),\n modelHeight: 220,\n hubHeight: 125.5,\n name: \"Vestas V136-3.45\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"basemapOptions = [\n [\"mapbox://styles/mapbox/satellite-v9\", \"Satellite\"],\n [\"mapbox://styles/mapbox/satellite-streets-v11\", \"Satellite-Streets\"],\n [\n \"mapbox://styles/toffi/clcroxqez00ew14ldga325352\",\n \"Transparent (for photo montages)\"\n ]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"footnote = (referencingCellName, number, text) => {\n return html`

^ ${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"windkraftanlage_hollandskopf = ({\n type: \"FeatureCollection\",\n description: {\n name: \"Windkraftanlage Hollandskopf\",\n zoom: 15,\n pitch: 70\n },\n features: [\n {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [8.281944, 52.115, 307]\n },\n properties: {\n name: \"Windrkaftanlage Hollandskopf\"\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"windkraftanlage_joellenbeck = ({\n type: \"FeatureCollection\",\n description: {\n name: \"Windkraftanlage Jöllenbeck\",\n center: [8.482079840791243, 52.10062194039986],\n pitch: 71.49999999999994,\n bearing: -50.39999999999992,\n zoom: 17.17171513940881\n },\n features: [\n {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [8.4833, 52.10006]\n },\n properties: {\n name: \"Windrkaftanlage Jöllenbeck\"\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"function jsonToBase64(json) {\n return u8ArrToB64(muon.encode(json))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"function base64Tojson(base64) {\n return JSON.parse(muon.decode(b64toU8array(base64)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"u8ArrToB64 = {\n const UriSafeChars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-\".split(\"\");\n return function u8ArrToB64(bytes) {\n const u6 = new Uint8Array(Math.ceil(bytes.length * 4 / 3))\n let i = 0, b0 = 0, b1 = 0, b2 = 0;\n let str = \"\";\n while (i + 3 < bytes.length) {\n b0 = bytes[i];\n b1 = bytes[i+1];\n b2 = bytes[i+2];\n str +=\n UriSafeChars[(b0 >> 2) & 63] +\n UriSafeChars[((b0 << 4) + (b1 >> 4)) & 63] +\n UriSafeChars[((b1 << 2) + (b2 >> 6)) & 63] +\n UriSafeChars[b2 & 63];\n i += 3;\n }\n\n b0 = i < bytes.length ? bytes[i] : 0;\n b1 = i + 1 < bytes.length ? bytes[i + 1] : 0;\n b2 = i + 2 < bytes.length ? bytes[i + 2] : 0;\n str +=\n UriSafeChars[(b0 >> 2) & 63] +\n UriSafeChars[((b0 << 4) + (b1 >> 4)) & 63] +\n UriSafeChars[((b1 << 2) + (b2 >> 6)) & 63] +\n UriSafeChars[b2 & 63];\n\n return str;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"utf = {\n // A simple object wrapping TextEncoder/TextDecoder functions to conver strings to utf-8 byte representations\n // For more info, see:\n // https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder\n // https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder\n const encoder = new TextEncoder(\"utf-8\");\n const decoder = new TextDecoder(\"utf-8\");\n return {\n encode: (...args) => encoder.encode(...args),\n encodeInto: (...args) => encoder.encodeInto(...args),\n decode: (...args) => decoder.decode(...args)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"lzb64 = {\n return {\n compress: string => u8ArrToB64(LZ78.compress(utf.encode(string))),\n decompress: string => utf.decode(LZ78.decompress(b64toU8array(string)))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"import {muon} from \"@jobleonard/muon-js\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"dates = Array.from({ length: 365 }, (_, i) => {\n const date = new Date(2023, 0, 1);\n date.setDate(i + 1);\n return date;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"hours = Array.from({ length: 960 }, (_, i) => {\n return i;\n})\n/*\nhours = {\n // get sunrise and sunset for currently selected date\n const times = SunCalc.getTimes(date, centroid[1], centroid[0]);\n // get time difference in minutes\n const timeDiff = (times.sunset - times.sunrise) / (1000 * 60);\n // create an array of minutes from sunrise to sunset\n const start = times.sunrise.getMinutes();\n const arr = [];\n for (let i = 0; i < Math.floor(timeDiff); ++i) {\n const newMinute = new Date(times.sunrise);\n newMinute.setMinutes(start + i);\n arr.push(newMinute);\n }\n return arr;\n}\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"mutable forceReload = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"SunCalc = require(\"suncalc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"MapboxDraw = {\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css\"\n );\n document.head.appendChild(html``);\n\n return require(\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.1.2/mapbox-gl-draw.js\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"MapboxGeocoder = {\n const MapboxGeocoder =\n await require(\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js\");\n\n document.head.appendChild(\n html``\n );\n return MapboxGeocoder;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"Threebox = (await import(\"https://esm.sh/threebox-plugin@2.2.7\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.10.0\");\n if (!gl.accessToken) {\n // token allowed only this Observable\n gl.accessToken =\n \"pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw\";\n const href = await require.resolve(\"mapbox-gl@2.10.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 31:"$30:body"