Adding Sandbox to web app

I am trying to add to reproduce the exact sandbox in my web app as a separate component in order to compare performance between the sandbox and my current code.

However, when I try to do

Sandbox.Show({hostElement: document.getElementById(“host”)});

Babylon doesn’t know where to get the Sandbox from. I’m not sure where it is imported from. Does the Sandbox not come with the ‘babylonjs’ npm package? which package does it come in? Thanks!

Nope it is not a package :slight_smile: But you can still copy the code from there: Babylon.js/sandbox at master · BabylonJS/Babylon.js (

So why is it that I can access the sandbox via BABYLON.Sandbox, but I cannot in my own code?

“BABYLON.Sandbox” are you?
What is inside this?

Can you share a repro in the PG?

Sorry, I misspoke.

I meant that it seems that it can be accessed the normal way of BABYLON.Sandbox
because in the sandbox index.js here:

this line is called:

So it kind of looks like this file is getting it from ‘babylonjs’ or ‘@babylonjs/core’ but there are no imports in the file, hence the confusion.

Thank you for the quick responses!

But if it is the case that it cannot be imported, would the main code I would want to port over for my testing of reproducing the sandbox in my code to compare performances be the code here:



The only thing you need to import is this line:
Babylon.js/index.html at master · BabylonJS/Babylon.js (

but that’s local to the github repo, so if I wanted to import in my web app with npm packages installed, would the path be …/babylonj/dist/babylon.sandbox.js ?

Sorry, just want to make sure I’d be able to grab it.

The file would be in sandbox/public/dist/babylon.sandbox.js after a build but it is heavily linked to the current html/css layout of the index.html of the public folder.

Would you mind setting up a short PG to illustrate this? I tried several different ways of adding this but I haven’t gotten anywhere useful.

Is all I have to add is in my component html, add
a hostElement div and then

script src="[path-to-babylonjs-in-node-modules]/sandbox/public/dist/babylon.sandbox.js" /script

and then I should be able to call:

Sandbox.Show(hostElement); in my .ts file ?

Sorry, I know this is probably really simple, I’m just having some difficulty following what exactly I need to move over to reproduce the sandbox

You need to copy the index.html of the Sandbox project in the repo