How to load script from separate file?

Questions
1

I am new in babylon. I want to use visual studio code for editing and load the

file from separatejs. Can someone help me?

1 Like
2

Welcome to the forum!

It would be easier to answer if you would explain with more details what kind of problem do you have.
Below is the minimal HTML code required to display rendered scene:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon.js sample code</title>
<link rel="stylesheet" type="text/css" href="style.css">        
    <!-- Babylon.js -->
    <script src="https://preview.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="myscript.js"></script>
</body>
</html>

In this case all your code is in myscript.js.

Another example - how to include own .js files into Babylon script

Actually there are no limitations how to use Babylon.js except inherent limitations of JS,HTML and Web environment.

1 Like
3

Labris is spot on. Below is an example of what he describes. Overall, it is probably best to follow the typescript/es6 module loading build system … doc link he provided. There are probably many more links to dig up. The docs are great here.

And, for others (like my team), we had very unusual design requirements to build PWA.
We needed to ‘lazyload’ (everything) behind an interactive title screen - to get good score in PWA Lighthouse. Also we needed to render (many) dynamic scenes - afterAssetSuccess - across many modules. It was tricky. Here is the baseline file loader of that SOLUTION (for example):

/**************************-BABYLON-LOADER-****************************************/
var loadBabylon = function() {
    var load = (function() { //https://davidwalsh.name/javascript-loader
      function _load(tag) { // Function returns a function: https://davidwalsh.name/javascript-functions
        return function(url) {
          return new Promise(function(resolve, reject) { //used by Promise.all, success or fail
            var element = document.createElement(tag);
            var parent = 'body';
            var attr = 'src';
            element.onload = function() { resolve(url); }; //success and error for the promise
            element.onerror = function() { reject(url); };
            switch(tag) { //different attributes depending on tag type
              case 'script': element.async = true; break;
              case 'link': element.type = 'text/css'; element.rel = 'stylesheet'; attr = 'href'; parent = 'head';
            }
            element[attr] = url; //inject and load
            document[parent].appendChild(element);
          });
        };
      }
      return { js: _load('script'), css: _load('link')/*, img: _load('img')*/ }
    })();
    Promise.all([
        load.js('../../lib/babylon/babylon.3.0.2-alpha.max.js'), /*working bjs from sps scene 8 */
        load.js('../../lib/babylon/hand.min-1.2.js') ,
        load.css('../../lib/font-awesome/fontawesome-free-5.10.2/css/all.min.css')
      ]).then(function() {
        load.js('../../lib/babylon/materials/babylon.gridMaterial.min.js') 
        load.js('./mods/modGroundz.js') 
        load.js('./mods/modCamz.js')  
        load.js('./mods/modZonez.js') 
        load.js('./mods/modEditorz.js') 
        load.js('./mods/modSonicz1.js') 
        //...
        .then(function(){ 
              //...
        });
        setTimeout(function(){ createWorld(); },1) //create-appshell-world, and start assetReadyCount-.
      }).then(function(){
        nx.loadEpicSeq();
        nx.loadGameSeq();//load-scene0-.
      }).catch(function() { console.log('ERROR: loading.'); });
}

Again, not for everyone.
But, it might be nice if you need: lazy load PWA, to ‘instrument’ many modules, and to render scene(s) sequentially after promise completion. Not shown is how createWorld holds until after (multiple) assetManager.load’s succeed.

Hope it helps. And… welcome to the forum.
:eagle:

4

Thank you for your quick replay. I make it work.