I am trying to build a BabylonJS app inside of ObservableJS. I've already made an ObservableJS page with a working BabylonJS app inside, just by writing BabylonJS code inside a code cell. So I know that in principle this works. To get it working I included an HTML canvas element,
<canvas id="lib"></canvas>
and then in an OJS cell, used a jQuery to get the canvas and then write a BabylonJS app with it.
However, I'm also trying to abstract a bunch of the functions that I will be using over and over, into a library of helper functions. I've put them into an NPM module and published it has babylon-helper-lib. In particular, one of the helper functions is the following:
export let twodgrid = function(scene: Scene, width=20, height=20, name="box") {
const box = MeshBuilder.CreateBox(name, {width:width,height:height,depth:.2}, scene);
const boxmat = new GridMaterial(`${name}_mat`, scene);
boxmat.majorUnitFrequency = 2;
boxmat.useMaxLine = false;
box.material = boxmat;
return {box, boxmat};
}
I've tested this function outside the context of OJS and can confirm that it works as intended. Basically it draws a box with some styling.
Then in a webpage with OJS, I have included a canvas element with id lib:
{
const LIB = await import("https://esm.sh/babylon-helper-lib");
const bag = LIB.init("#lib");
const scene = bag.scene;
const planebag = LIB.twodgrid(scene);
// console.log(planebag.box);
bag.engine.runRenderLoop( () => {
scene.render();
});
}
Again this is code that I've tested outside of OJS and can confirm that it works as intended.
However, when run inside an OJS cell, I don't get any console errors in the web browser, but it simply does not draw the box.
My best guess about why this might be happening, is that JavaScript is pass-by-copy-of-reference. So although I am passing the scene into CreateBox, maybe somewhere along the way the scene is getting copied and the box is created on the copy. I wouldn't have thought so, because it should just be mutating the properties of the scene at the referenced address, so I would think that scene is the scene being mutated. But it's still my best guess. I tried checking the docs on how CreateBox works, but I couldn't find the source code and the given description doesn't help me to understand how it works.
On the other hand, it just now occurs to me that actually my helper library is written in TypeScript, and compiled to JavaScript. But then again I'm pretty sure TypeScript is also pass-by-reference, so I'm not sure that explains anything.
I'm not exactly sure why the question was closed, the code should be reproducible and minimal. But I'll guess that maybe my expectation about the behavior of the program wasn't stated clearly enough. I expect the code to produce a BabylonJS app which contains a box. Instead, it produces a BabylonJS app with nothing in it.
I guess there needs to be a direct question: Why does my expected behavior not occur, and how can I make it occur?