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`)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.