Published
Edited
Dec 27, 2021
1 star
Insert cell
Insert cell
{
let w = width < 600 ? width : 600;
let h = (2 * w) / 3;
yield html`
<div style="width: ${w}px; height: ${h}px;">
<x3d width=${w}px height=${h}px>
<scene>
<viewpoint position="-2.98997 1.47817 8.01876"
orientation="-0.42247 -0.90060 -0.10219 0.39628"
zNear="3.55371" zFar="15.51291" centerOfRotation="0.00000 0.00000 0.00000"
fieldOfView="0.78540" description="defaultX3DViewpointNode">
</viewpoint>
<shape>
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<box></box>
</shape>
<transform translation='-3 0 0'>
<shape>
<appearance>
<material diffuseColor='0 1 0'></material>
</appearance>
<cone></cone>
</shape>
</transform>
<transform translation='3 0 0'>
<shape>
<appearance>
<material diffuseColor='0 0 1'></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
</scene>
</x3d>`;
x3dom.reload();
}
Insert cell
html`<style>
canvas {
outline: none
}
</style>`
Insert cell
x3dom = require('x3dom').catch(() => window['x3dom'])
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