{
const canvas = html`<canvas style="position: absolute; top: 0; width: 100%; height: 100%">`;
yield html`<div style="position: relative; width: 100%; padding-top: 50%">${canvas}</div>`;
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
const fov = 60;
const aspect = 1;
const near = 0.1;
const far = Number.MAX_SAFE_INTEGER;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 5;
const controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.minDistance = 2;
controls.maxDistance = 5;
const scene = new THREE.Scene();
scene.background = new THREE.Color("#fff");
{
const circle = new THREE.Shape();
const x = 0;
const y = 0;
const radius = 2;
circle.absarc(x, y, radius);
const segments = 100;
const geometry = new THREE.ShapeGeometry(circle, segments / 2);
const material = new THREE.MeshBasicMaterial({
color: settings.colors.circle,
side: THREE.DoubleSide,
depthWrite: false
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
let squareMesh;
{
const square = new THREE.Shape();
square.moveTo(1, 1);
square.lineTo(1, -1);
square.lineTo(-1, -1);
square.lineTo(-1, 1);
const geometry = new THREE.ShapeGeometry(square);
const material = new THREE.MeshBasicMaterial({
color: settings.colors.square,
side: THREE.DoubleSide,
depthWrite: false
});
squareMesh = new THREE.Mesh(geometry, material);
scene.add(squareMesh);
}
{
const helper = new THREE.GridHelper(4, 4);
helper.rotation.x = Math.PI / 2;
helper.material.depthWrite = false;
scene.add(helper);
}
let running = true;
invalidation.then(() => {
controls.dispose();
renderer.dispose();
running = false;
});
controls.addEventListener("change", () => renderer.render(scene, camera));
while (running) {
resizeRendererToDisplaySize();
squareMesh.rotation.z += 0.01;
controls.update();
renderer.render(scene, camera);
await Promises.tick(1000 / settings.framesPerSecond);
}
function resizeRendererToDisplaySize() {
const pixelRatio = window.devicePixelRatio;
const width = canvas.clientWidth * pixelRatio;
const height = canvas.clientHeight * pixelRatio;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
}
}
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.
