Babylon.js

falsam · Post by **falsam** » Tue Jan 13, 2026 5:13 pm

Hello,
I am trying to integrate Babylon.js, but I get the following message:

C:\SpiderBasic Project\Babylon\test.sb:7 BABYLON is not defined

■ Small test code to initialize the 3D engine.

HeaderSection
<meta name="description" content="babylon.js">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<canvas id="renderCanvas"></canvas>
EndHeaderSection

EnableJS
const canvas = document.getElementById('renderCanvas');
console.log(canvas);

const engine = new BABYLON.Engine(canvas);
console.log(engine);
DisableJS

Thank for your help

Dirk Geppert · Post by **Dirk Geppert** » Wed Jan 14, 2026 8:23 am

Unfortunately, HeaderSection inserts the code at the end of the head section.
For this to work correctly, you need the HtmlPreprocessor.

Code: Select all

HeaderSection
  <canvas id="renderCanvas"></canvas>
EndHeaderSection

;!  <HtmlPreprocessor>
;!    [
;!      {
;!        "search": "</title>",
;!        "replace": "</title>\n\n<meta name=\"description\" content=\"babylon.js\">\n<script src=\"https://cdn.babylonjs.com/babylon.js\"></script>"
;!      }
;!    ]
;!  </HtmlPreprocessor>

EnableJS
const canvas = document.getElementById('renderCanvas');
console.log(canvas);

const engine = new BABYLON.Engine(canvas);
console.log(engine);
DisableJS

falsam · Post by **falsam** » Thu Jan 15, 2026 6:30 pm

Thank you for your response to my problem.
However, <HtmlPreprocessor> is a proprietary solution that I cannot use to distribute babylon.pbi.

SpiderBasic allows to easily customize the <header></header> section of the app HTML file. It can be useful when needed to add additional meta tags or to include css or javascript files directly in the HTML.

The example was provided with a call to the babylon.js script.

Code: Select all

HeaderSection
    <meta name="description" content="Customizd description">
    <script type="text/javascript" src="https://cdn.babylonjs.com/babylon.js"></script>
EndHeaderSection

I was happy and thought it would work. Unfortunately, it didn't

I tested this example with the three.js framework. It doesn't work.

falsam · Post by **falsam** » Thu Jan 15, 2026 6:55 pm

When I look at the source code with the debug console, I see that the script babylon.js is correctly placed between the <head></head> tags and the canvas is correctly placed between the <body></body> tags.

For me, the HeaderSection & EndHeaderSection functionality works correctly.

However, the babylon.js or three.js script does not work.

Dirk Geppert · Post by **Dirk Geppert** » Fri Jan 16, 2026 8:03 am

In other words: the order in which JavaScript libraries are initialized matters!

This works (created with HtmlPreProcessor)

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">var spider = {}; spider.nbModules = 1; spider.nbLoadedModules = 0;</script>

<title>SpiderApp</title>

<meta name="description" content="babylon.js">
<script src="https://cdn.babylonjs.com/babylon.js"></script>

<script type="text/javascript">function onLoad() { spiderCheckBrowser(); }</script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/platform.js"></script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/init.js"></script>
<script type="text/javascript">dojoConfig.baseUrl = '/spiderbasic/libraries/javascript/'; </script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/dojo/dojo.js"></script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/debug.js?t=1768550638"></script>
<script type="text/javascript">
spider.debugFilename="C:\\Users\\dirkgeppert\\AppData\\Local\\Temp\\1\\PB_EditorOutput.pb";
spider.debugSourcePath="";
spider.debugIncludes=[
];
if (window.spiderDebug) { window.spiderDebug( { "command": 0, "filename": spider.debugFilename, "sourcePath": spider.debugSourcePath, "includes": spider.debugIncludes } ); }
</script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/main.js?t=1768550638"></script>
<link rel="stylesheet" href="/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css" />
<link rel="stylesheet" href="/spiderbasic/libraries/javascript/dojo/dgrid/css/dgrid.css" />
<script type="text/javascript" src="/spiderbasic/libraries/javascript/xdate.min.js"></script>
<link rel="stylesheet" title="Default" href="/spiderbasic/libraries/javascript/themes/flat/window.css" type="text/css"/>
<script type="text/javascript" src="spiderbasic.js?t=1768550638"></script>

  <canvas id="renderCanvas"></canvas>

</head>

<body oncontextmenu="return false;" class="flat" id="spiderbody" onload="onLoad()">

</body>
</html>

If you use HeaderSection, it will not work:

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">var spider = {}; spider.nbModules = 1; spider.nbLoadedModules = 0;</script>

<title>SpiderApp</title>
<script type="text/javascript">function onLoad() { spiderCheckBrowser(); }</script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/platform.js"></script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/init.js"></script>
<script type="text/javascript">dojoConfig.baseUrl = '/spiderbasic/libraries/javascript/'; </script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/dojo/dojo.js"></script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/debug.js?t=1768550638"></script>
<script type="text/javascript">
spider.debugFilename="C:\\Users\\dirkgeppert\\AppData\\Local\\Temp\\1\\PB_EditorOutput.pb";
spider.debugSourcePath="";
spider.debugIncludes=[
];
if (window.spiderDebug) { window.spiderDebug( { "command": 0, "filename": spider.debugFilename, "sourcePath": spider.debugSourcePath, "includes": spider.debugIncludes } ); }
</script>
<script type="text/javascript" src="/spiderbasic/libraries/javascript/main.js?t=1768550638"></script>
<link rel="stylesheet" href="/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css" />
<link rel="stylesheet" href="/spiderbasic/libraries/javascript/dojo/dgrid/css/dgrid.css" />
<script type="text/javascript" src="/spiderbasic/libraries/javascript/xdate.min.js"></script>
<link rel="stylesheet" title="Default" href="/spiderbasic/libraries/javascript/themes/flat/window.css" type="text/css"/>
<script type="text/javascript" src="spiderbasic.js?t=1768550638"></script>

<meta name="description" content="babylon.js">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<canvas id="renderCanvas"></canvas>

</head>

hoerbie · Post by **hoerbie** » Fri Jan 16, 2026 10:53 am

Please correct me, when I'm wrong, but shouldn't the

Code: Select all

<canvas id="renderCanvas"></canvas>

be placed in the html body?

And you are right, there seem to be a lot of different libs, that can't be included with the new HeaderSection, because its data is included at the bottom of the html head, I've stumbled over the same problem and used the preprocessor.

Post by **Peter** » Fri Jan 16, 2026 5:53 pm

In general, it would be worth testing whether it makes more sense to place the content of the HeaderSection BEFORE the include of spiderbasic.js.

But that doesn't help in general. babylon.js is quite large and takes time to load. If I call it up before it is completely loaded, you get an error message.

In the first example (as recommended by Dirk), it works because other js and css files are loaded before babylon is called.

In the second example, it no longer works because there is not enough time between loading babylon.js and calling the object.

Works:

Code: Select all

<!DOCTYPE html>
<html>
<head>
...
<title>SpiderApp</title>

<meta name="description" content="babylon.js">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<canvas id="renderCanvas"></canvas>

... SpiderBasic-Includes ...

<script type="text/javascript" src="spiderbasic.js?t=1768583340"></script>

Doesn't work:

Code: Select all

<!DOCTYPE html>
<html>
<head>
...
<title>SpiderApp</title>

... SpiderBasic-Includes ...

<meta name="description" content="babylon.js">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<canvas id="renderCanvas"></canvas>

<script type="text/javascript" src="spiderbasic.js?t=1768583340"></script>

SpiderBasic

Babylon.js

Babylon.js

Re: Babylon.js

Re: Babylon.js

Re: Babylon.js

Re: Babylon.js

Re: Babylon.js

Re: Babylon.js