Public
Edited
Oct 30, 2022
1 fork
1 star
Insert cell
Insert cell
scene = {
let size = width < 600 ? width : 600;
yield html`<x3d width='${size}px' height='${size}px'>
<scene>
<Viewpoint position="-6.22457 2.85211 -3.57766" orientation="-0.27553 -0.95709 -0.08977 2.06576"></Viewpoint>
<shape>
<appearance>
<material diffuseColor='1 1 1'></material>
<ImageTexture url="https://upload.wikimedia.org/wikipedia/commons/b/b0/Thermohaline_circulation.png" />
</appearance>
<sphere radius=2> </sphere>
</shape>
</scene>
</x3d>`;
x3dom.reload();
}
Insert cell
x3dom = require('x3dom').catch(() => window['x3dom'])
Insert cell
Insert cell
fetch(
"https://www.richelle-gama.org/antarctica/Thermohaline_Circulation_alt-v1.png"
)
Insert cell
Insert cell
fetch(
"https://upload.wikimedia.org/wikipedia/commons/b/b0/Thermohaline_circulation.png"
)
Insert cell
Insert cell
local_imageURL = fetch(
"https://corsproxy.io/?https://www.richelle-gama.org/antarctica/Thermohaline_Circulation_alt-v1.png"
)
.then((response) => response.blob())
.then((imageBlob) => URL.createObjectURL(imageBlob))
Insert cell
Insert cell
scene2 = {
let size = width < 600 ? width : 600;
yield html`<x3d width='${size}px' height='${size}px'>
<scene>
<Viewpoint position="-6.22457 2.85211 -3.57766" orientation="-0.27553 -0.95709 -0.08977 2.06576"></Viewpoint>
<shape>
<appearance>
<material diffuseColor='1 1 1'></material>
<ImageTexture url=${local_imageURL} />
</appearance>
<sphere radius=2> </sphere>
</shape>
</scene>
</x3d>`;
x3dom.reload();
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more