Family of good boyz and gurlz who code for most advanced education and analytix products.
Published
Edited
May 15, 2020
scene = html`
<x3d width='${0.8 * width}px' height='${width}px'>
<scene>
<Viewpoint
position="2.51615 -1.82458 1.52178"
orientation="0.72540 0.42492 0.54151 1.36199"
fieldOfView="0.78540">
</Viewpoint>
<PointLight on='TRUE' intensity='0.7' 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>
`
function textured_rect(i) {
return `
<transform translation='0 0 ${1.25 - i / 2}'>
<shape>
<appearance>
<material diffuseColor='0 0 1'></material>
<ImageTexture url=${urls[i - 1]} />
</appearance>
<plane size='1.8,1' solid='false'></plane>
</shape>
</transform>
`;
}
// Better reload to make sure the scene shows up.
{
scene;
x3dom.reload();
}
urls = [
await FileAttachment("canvas1.png").url(),
await FileAttachment("canvas2.png").url(),
await FileAttachment("canvas3.png").url(),
await FileAttachment("canvas4.png").url(),
await FileAttachment("canvas5.png").url()
]
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.
