Published unlisted
Edited
Jun 18, 2020
3 forks
Insert cell
Insert cell
scene = {
yield html`<x3d width='${0.6 * width}px' height='${0.6 * width}px'>
<scene>
<Viewpoint
position="2.54927 -1.32900 1.70090"
orientation="0.63222 0.34801 0.69223 1.45156"
fieldOfView="0.78540">
</Viewpoint>
<PointLight on='TRUE' intensity='0.8' color='1 1 1' location='0 0 10 ' radius='20' >
</PointLight>
${textured_rect(1)}
${textured_rect(2)}
${textured_rect(3)}
${textured_rect(4)}
</scene>
</x3d>`;
x3dom.reload();
}
Insert cell
function textured_rect(i) {
return `
<transform translation='0 0 ${1.25 - i / 2}'>
<shape>
<appearance>
<material diffuseColor='1 1 1' transparency='1'></material>
<ImageTexture url=${urls[i - 1]} />
</appearance>
<plane size='1.8,1' solid='false'></plane>
</shape>
</transform>
`;
}
Insert cell
x3dom = require('https://assets.compclassnotes.com/js/x3dom/x3dom.js').catch(
() => window['x3dom']
)
Insert cell
urls = [
await FileAttachment("transparentCanvas1@4.png").url(),
await FileAttachment("transparentCanvas2@4.png").url(),
await FileAttachment("transparentCanvas3@2.png").url(),
await FileAttachment("transparentCanvas4@2.png").url()
]
Insert cell
style = html`<style>
canvas {
outline: none
}
</style>`
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