SpiderBasic

- a basic to master the web -
https://forums.spiderbasic.com/

Babylon.js

https://forums.spiderbasic.com/viewtopic.php?t=2896

Page 1 of 1

Babylon.js

Posted: Tue Jan 13, 2026 5:13 pm
by falsam
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.

Code: Select all

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 🙏🌞

Re: Babylon.js

Posted: Wed Jan 14, 2026 8:23 am
by Dirk Geppert
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

Re: Babylon.js

Posted: Thu Jan 15, 2026 6:30 pm
by falsam
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.

Re: Babylon.js

Posted: Thu Jan 15, 2026 6:55 pm
by falsam
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.

Re: Babylon.js

Posted: Fri Jan 16, 2026 8:03 am
by Dirk Geppert
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>

Re: Babylon.js

Posted: Fri Jan 16, 2026 10:53 am
by hoerbie
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.

Re: Babylon.js

Posted: Fri Jan 16, 2026 5:53 pm
by Peter
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>
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited