Load JS library before SB libs
Posted: Sat Apr 25, 2026 4:34 pm
In the following example we load Babylon.js before SpiderBasic libs.
1.) We get the page source (incl. head and body)
2.) We add the new library in front of SpiderBasic libs
3.) We restart with the modified page source, inside a new iframe
I think it‘s okay for developing. In the final release we would just add the scripts to the HTML file, so this dirty trick is not required.
1.) We get the page source (incl. head and body)
2.) We add the new library in front of SpiderBasic libs
3.) We restart with the modified page source, inside a new iframe
I think it‘s okay for developing. In the final release we would just add the scripts to the HTML file, so this dirty trick is not required.
Code: Select all
Global isInitialized
Procedure.s GetInnerHTML()
!return document.documentElement.innerHTML;
EndProcedure
Procedure LoadJSLibFirst(file.s)
Protected string.s = GetInnerHTML()
output.s = ~"<script type=\"text/javascript\" fetchpriority=\"high\" src=\""+file+~"\"></script>"
If Not FindString(string,output)
string = ReplaceString(string,"</title>","</title>"+#LF$+output+#LF$)
;Debug string
!var iframe = document.createElement('iframe');
!iframe.style.width = '100vw';
!iframe.style.height = '100vh';
!iframe.allowfullscreen = true;
!iframe.style.display = 'block';
!iframe.style.background = '#000000FF';
!document.body.style.margin = '0';
!document.body.style.overflow = 'hidden';
!document.body.appendChild(iframe);
!iframe.srcdoc = v_string;
isInitialized = #False
Else
isInitialized = #True
EndIf
EndProcedure
LoadJSLibFirst("https://cdn.babylonjs.com/babylon.js")
Procedure BabylonAvailable()
Protected result=0
!try {
! var testingBabylonNamespace = new BABYLON.NullEngine();
result = #True
!} catch {
result = #False
!}
ProcedureReturn result
EndProcedure
Procedure.i InitBabylon()
Protected result=0
EnableJS
try {
var canvas = document.createElement('canvas');
canvas.id = 'renderCanvas';
canvas.style.width = '100vw';
canvas.style.height = '100vh';
canvas.style.display = 'block';
canvas.style.background = '#80808080';
document.body.style.margin = '0';
document.body.style.overflow = 'hidden';
document.body.appendChild(canvas);
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera('cam', -Math.PI / 2, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.9;
var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 2, segments: 32}, scene);
sphere.position.y = 1;
var matSphere = new BABYLON.StandardMaterial('matSphere', scene);
matSphere.diffuseColor = new BABYLON.Color3(0.8, 0.2, 0.2);
sphere.material = matSphere;
var ground = BABYLON.MeshBuilder.CreateGround('ground', {width: 10, height: 10}, scene);
var matGround = new BABYLON.StandardMaterial('matGround', scene);
matGround.diffuseColor = new BABYLON.Color3(0.3, 0.6, 0.3);
ground.material = matGround;
var box = BABYLON.MeshBuilder.CreateBox('box', {size: 1.5}, scene);
box.position = new BABYLON.Vector3(-3, 0.75, 0);
var matBox = new BABYLON.StandardMaterial('matBox', scene);
matBox.diffuseColor = new BABYLON.Color3(0.2, 0.3, 0.9);
box.material = matBox;
scene.registerBeforeRender(function() {
box.rotation.y += 0.01;
});
engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
v_result = 1;
}
catch {
v_result = 0;
}
DisableJS
ProcedureReturn result
EndProcedure
If isInitialized And BabylonAvailable() And InitBabylon()
Debug GetInnerHTML()
Debug "OKAY"
win = OpenWindow(#PB_Any,100,100,300,200,"Title",#PB_Window_SizeGadget|#PB_Window_SystemMenu)
EndIf
Thanks, Danilo!