Web developer and autodidact with an interest in creative coding.
Published
Edited
Sep 3, 2019
3 forks
9 stars
// Change the variable below to "true" to enable the orthographic projection.
ortho = false
{
// A shorthand to get the current width.
const getWidth = () => document.body.clientWidth;
const canvas = html`<canvas width=${getWidth()} height=400>`;
// BabylonJS expects the canvas to be present in the DOM.
yield canvas;
// Create a new engine with enabled antialiasing and attach it to the canvas.
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8);
// Add a rotatable camera with a radius of 3 units and point it to the center of the scene.
const camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 3, new BABYLON.Vector3(0, 0, 0), scene);
if(ortho) {
// In BabylonJS the orthographic projection is available for all camera types.
camera.mode = camera.ORTHOGRAPHIC_CAMERA;
// For the orthographic camera mode we need to set the left, right, bottom and
// top boundaries. Usually you'll want to maintain the aspect ratio of the
// renderer canvas.
const rect = engine.getRenderingCanvasClientRect();
const aspect = rect.height / rect.width;
// In this example we'll set the distance based on the camera's radius.
camera.orthoLeft = -camera.radius;
camera.orthoRight = camera.radius;
camera.orthoBottom = -camera.radius * aspect;
camera.orthoTop = camera.radius * aspect;
}
// Prevent zooming by setting the lower and upper radius boundaries to the current radius.
camera.lowerRadiusLimit = camera.upperRadiusLimit = camera.radius;
// Attach the camera to the canvas and prevent default events.
camera.attachControl(canvas, true);
const light = new BABYLON.PointLight('light', new BABYLON.Vector3(10, 10, 0), scene);
const boxMaterial = new BABYLON.StandardMaterial('material', scene);
boxMaterial.emissiveColor = new BABYLON.Color3(0, 0.58, 0.86);
// Add a box with a size of 1 unit.
const box = BABYLON.Mesh.CreateBox('box', 1, scene);
box.material = boxMaterial;
// The main render loop.
const renderLoop = () => {
box.rotation.x -= .013;
box.rotation.y += .007;
scene.render();
};
const onResize = () => {
canvas.width = getWidth();
engine.resize();
}
window.addEventListener('resize', onResize);
// Remove handlers, destroy the WebGL context and free up resources.
invalidation.then(() => {
window.removeEventListener('resize', onResize);
engine.dispose();
});
// Start the render loop.
engine.runRenderLoop(renderLoop);
}
BABYLON = import(`https://cdn.jsdelivr.net/npm/babylonjs@${VERSION}/es6.min.js`)
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.
