BJSCanvasHtml = {
const renderCanvas = htl.html`<canvas style='height: ${height}; width: 100%'></canvas>`;
yield renderCanvas
INSPECTOR;
const engine = new BABYLON.Engine(renderCanvas, true); // Generate the BABYLON 3D engine
engine.scenes[0] && engine.scenes[0].dispose();
engine.clear( new BABYLON.Color4(0, 0, 0, 0), true, true, true );
async function createScene () {
//const scene = new BABYLON.Scene(engine);
const scene = await BABYLON.SceneLoader.LoadAsync("", model, engine, undefined, ".babylon");
scene.useRightHandedSystem = true; // may work
//processAugmentedSerialization(scene);
scene.activeCamera.attachControl(renderCanvas);
scene.activeCamera.inertia *= 0.8;
if (sceneInspector) scene.debugLayer.show();
engine.runRenderLoop(function() {
scene.render();
});
};
const scene = createScene(); //Call the createScene function
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
}
model = "https://playground.babylonjs.com/scenes/Rabbit.babylon"
height = '600px'
sceneInspector = true
import {BABYLON, INSPECTOR} from "@andreasplesch/hello-babylonjs"
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.
