Babylon.js

Using Javascript from SpiderBasic
Peter53
Posts: 12
Joined: Thu Mar 28, 2019 2:58 pm

Re: Babylon.js

Post by Peter53 »

Dirk Geppert wrote:Hi Falsam, do you know https://threejs.org ? Is it comparable with babylon and may be better usable with SpiderBasic?
Ciao Dirk
I didn't know about Three.js. It's fast, stable, extremely versatile and has everything needed to produce whatever comes to mind.
Thanks for the info. Time to play with Three. :-)
Phil
Posts: 4
Joined: Thu Oct 10, 2019 7:49 pm

Re: Babylon.js

Post by Phil »

falsam wrote: Fri May 12, 2017 7:37 pm Image

Babylon.sbi is a module coded with theSpiderBasic language that provides simplified access to the framework javascript 3D babylonjs.com created by David Catuhe and David Rousset, two web engineers at Microsoft.

Sources and examples on the GitHub platform.
:arrow: https://github.com/falsam/BJS

■ Structure of your folder.
Babylon A folder containing the interfaces with the Babylon.js framework (do not change the name).
sbbjs Folder containing the babylon.custom.js framework that will be exported when creating your application
Data Optional folder that will contain your textures, sound, etc ....
Code.sb Your code. (See examples 00-template.sb)

■ Example

Code: Select all

;Babylon.sbi - Basic Scene
EnableExplicit
 
IncludeFile "babylon/babylon.sbi"
 
Global Camera, Light, Plane, Sphere, Cylinder, Cube, Torus
 
Declare LoadGame()
Declare RenderGame()
 
UseModule BJS
 
InitEngine(@LoadGame())
 
Procedure LoadGame()    
  If CreateScene()
 
    ;Camera & Light
    Camera  = CreateCamera("camera", 0, 5, 7, #ArcRotate)
    Light   = CreateLight("light", 0, 10, 0)
 
    ;Objects (Plane, Sphere, ....)
    Plane   = CreateGround("plane", 10, 10)
    Sphere  = CreateSphere("sphere", 2)
    MoveMesh(Sphere, 0, 2, 0)
 
    Cylinder= CreateCylinder("cylinder", 2, 2, 2)
    MoveMesh(Cylinder, 3, 1, -2)
 
    Cube = CreateBox("cube", 2)
    MoveMesh(Cube, -3, 1, -2)
 
    Torus = CreateTorus("torus", 2, 1)
    MoveMesh(Torus, -2, 0.5, 2)
 
    RenderLoop(@RenderGame())
  EndIf
EndProcedure
 
Procedure RenderGame()
  RenderWorld() 
EndProcedure
Result
Image

■ ShowCase
Water http://falsam.com/sbbjs/water.html (Use the mouse to explore the scene)
Music http://falsam.com/sbbjs/music.html
particle http://falsam.com/sbbjs/particle.html

■ In french : http://falsam.com/sbbjs/wiki/doku.php?id=babylon
Hi there,

i was working on a project and i needed the latest babylon version and i found a trick to do it, see:

Code: Select all

IncludeFile "babylon/babylon.sbi"

Global nLoaded, nImports = 2

UseModule BJS

Declare LoadGame()
Declare RenderGame()

Procedure Main()
  InitKey()
  !if (BABYLON.Engine.isSupported()) {    
          !$('<canvas>').attr('id', 'renderCanvas')
          ! .css({ width : '100%', height : '100%' })
          ! .appendTo('body');
          !     v_bjscanvas = document.getElementById('renderCanvas');
          !     v_bjsengine = new BABYLON.Engine(v_bjscanvas, true); //, { preserveDrawingBuffer: true, stencil: true }); 
  !     window.addEventListener('resize', function(){v_bjsengine.resize(); });  
  !}
  LoadGame()
EndProcedure

Procedure Define_Disable()
  EnableJS
  window['hide-define'] = null;
  if(typeof define === 'function' && define.amd) {
    window['hide-define'] = define;
    define = null;
  }  
  DisableJS
EndProcedure

Procedure Define_Enable()
  EnableJS
  if(window['hide-define'] != null) {
    define = window['hide-define'];
    window['hide-define'] = null;
  }
  DisableJS
EndProcedure

Procedure ScriptLoaded(URL$, Success)
  If Success
    nLoaded + 1
    If nLoaded = nImports ; the number of files to import
      Define_Enable() ; our imports have completed so restore define
      Main()
    EndIf
  Else
    Debug "Failed to load external: " + URL$
  EndIf
EndProcedure

procedure LoadGame()
  !const canvas = v_bjscanvas; 
  !const engine = v_bjsengine;
  !v_bjscurrentscene  = new BABYLON.Scene(engine); 
  !v_bjsengine = engine;
  Camera = 0
  !v_camera =  new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -30), v_bjscurrentscene);
  Scene = 0
  !v_scene = v_bjscurrentscene;
  !var gravityVector = new BABYLON.Vector3(0,-210.81, 0);
  !var physicsPlugin = new BABYLON.CannonJSPlugin();
  !v_scene.enablePhysics(gravityVector, physicsPlugin);
  !v_scene.clearColor = new BABYLON.Color3( .0, .0, .0);
  
  ;    Camera  = CreateCamera("camera", 0, 5, 7, #BJS_ArcRotate)
    Light   = CreateLight("light", 0, 10, 0)
    
    ;Objects (Plane, Sphere, ....)
    Plane   = CreateGround("plane", 10, 10)
    Sphere  = CreateSphere("sphere", 2)
    MoveMesh(Sphere, 0, 2, 0)
    
    Cylinder= CreateCylinder("cylinder", 2, 2, 2)
    MoveMesh(Cylinder, 3, 1, -2)
    
    Cube = CreateBox("cube", 2 , 2, 4)
    MoveMesh(Cube, -3, 1, -2)
    
    Torus = CreateTorus("torus", 2, 1)
    MoveMesh(Torus, -2, 0.5, 2)
        
    RenderLoop(@RenderGame())
endprocedure

Procedure RenderGame()
  RenderWorld() 
endprocedure

Define_Disable() ; temporarily move define so it doesn't interfere with our imports
LoadScript("https://preview.babylonjs.com/babylon.js", @ScriptLoaded())
LoadScript("https://preview.babylonjs.com/cannon.js", @ScriptLoaded())
;LoadScript("https://cdn.babylonjs.com/babylon.js", @ScriptLoaded())
;LoadScript("https://cdn.babylonjs.com/cannon.js", @ScriptLoaded())
Post Reply