Published
Edited
Oct 4, 2021
1 fork
Importers
2 stars
Insert cell
md`# Hello, BabylonJS`
Insert cell
//BABYLON2 = import('https://cdn.skypack.dev/@babylonjs/core@4.2.0?min')
Insert cell
//BABYLON3 = require('babylonjs@4.2.0/babylon.max.js')
Insert cell
//BABYLONLoaders3 = require('babylonjs-loaders@4.2.0/babylonjs.loaders.min.js')
Insert cell
tag = "@5.0.0-alpha.48"
Insert cell
BABYLON = require('babylonjs' + tag);//https://preview.babylonjs.com/babylon.js')
Insert cell
//BABYLON_GUI = require.alias({
// babylonjs: BABYLON})('https://preview.babylonjs.com/gui/babylon.gui.min.js')
Insert cell
//BABYLON_MATERIALS = require.alias({
// babylonjs: BABYLON})('https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js')
Insert cell
BABYLON_Loaders = require('babylonjs-loaders' + tag);//https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js')
Insert cell
//INSPECTOR2 = BABYLON, require('https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js')
Insert cell
INSPECTOR = require.alias({
babylonjs: BABYLON,
//"babylonjs-gui": BABYLON_GUI,
//"babylonjs-materials": BABYLON_MATERIALS,
})('babylonjs-inspector'+tag);//https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js');
Insert cell
renderCanvas = { INSPECTOR; return html`<canvas ></canvas>` }
Insert cell
Insert cell
url = {
//const blb = new Blob([boxString], {type: 'text/plain'});
const fle = new File([boxString], "box.babylon", {type: 'text/plain'});
return URL.createObjectURL(fle)
}
Insert cell
dataurl = "data:;base64," + btoa(boxString)
Insert cell
render = {
const engine = new BABYLON.Engine(renderCanvas, true); // Generate the BABYLON 3D engine

// Add your code here matching the playground format
const createScene = function () {
const scene = new BABYLON.Scene(engine);

//BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");
//debugger;
//BABYLON.SceneLoader.ImportMeshAsync("", "", dataurl, undefined, undefined, undefined, ".babylon");
BABYLON.SceneLoader.ImportMeshAsync("", "", url);//, undefined, undefined, undefined, ".babylon");
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
camera.attachControl(renderCanvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

return scene;
};

const scene = createScene(); //Call the createScene function
//debugger;
scene.debugLayer.show();

// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});

// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
return scene;
}
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