Adding Sandbox to web app

johntdaly7 · March 30, 2021, 7:18pm

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!

Deltakosh · March 30, 2021, 9:21pm

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

johntdaly7 · March 30, 2021, 9:28pm

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

Deltakosh · March 30, 2021, 9:39pm

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

Can you share a repro in the PG?

johntdaly7 · March 30, 2021, 10:55pm

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:

github.com

BabylonJS/Babylon.js/blob/master/sandbox/public/index.js

var hostElement = document.getElementById("host-element");

BABYLON.Sandbox.Show(hostElement);

this line is called:
BABYLON.Sandbox.Show(hostElement);

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!

johntdaly7 · March 30, 2021, 10:57pm

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:

github.com

BabylonJS/Babylon.js/blob/master/sandbox/src/components/renderingZone.tsx

import * as React from "react";
import { GlobalState } from "../globalState";

import { Engine } from "babylonjs/Engines/engine";
import { SceneLoader } from "babylonjs/Loading/sceneLoader";
import { GLTFFileLoader } from "babylonjs-loaders/glTF/glTFFileLoader";
import { Scene } from "babylonjs/scene";
import { Vector3 } from "babylonjs/Maths/math.vector";
import { ArcRotateCamera } from "babylonjs/Cameras/arcRotateCamera";
import { FramingBehavior } from "babylonjs/Behaviors/Cameras/framingBehavior";
import { EnvironmentTools } from "../tools/environmentTools";
import { Tools } from "babylonjs/Misc/tools";
import { FilesInput } from "babylonjs/Misc/filesInput";
import { Animation } from "babylonjs/Animations/animation";
import { PBRBaseMaterial, PBRMaterial, StringTools, Texture } from "babylonjs";
import { Mesh } from "babylonjs/Meshes/mesh";

require("../scss/renderingZone.scss");

function isTextureAsset(name: string): boolean {

This file has been truncated. show original

?

Thanks!

Deltakosh · March 30, 2021, 11:23pm

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

johntdaly7 · March 31, 2021, 12:09am

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.

sebavan · March 31, 2021, 11:31am

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.

johntdaly7 · March 31, 2021, 6:09pm

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

sebavan · March 31, 2021, 6:23pm

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