Trying to add Bablylon GUI - not working

Hi all,

I am loading up babylonjs 3.3.0 with no issues.

When I try to load up ‘https://cdn.babylon.js/com/gui/babylon.gui.js’ I get this error. Any ideas are appreciated. Thanks!

Try this url instead of cdn.babylon.js/com it’s cdn.babylonjs.com
https://cdn.babylonjs.com/gui/babylon.gui.min.js

edit: sorry, I can see that is a typo in the post from your stacktrace. can you post both script sources to make sure you are not mixing versions?

https://cdn.babylonjs.com/babylon.js is what I am using

Can you post the full script links and in the order you have them on your page?

$.when(

$.getScript('https://cdn.babylonjs.com/babylon.js’),

$.getScript(’/js/lib/pep.js’),

$.getScript(’/js/lib/earcut.min.js’),

$.getScript('https://cdn.babylonjs.com/gui/babylon.gui.js’),

$.Deferred(function(deferred){

$(deferred.resolve);

})

).done(function(){

_this.privateState.babylonLoaded = true;

mcb.editor.threeDLoader = new mcb.threed.Loader(mcb.threed.CSG);

});

looks like you are loading GUI first, due to timing. I think you need to getScript for GUI in the callback to getScript for babylonjs (second parameter).
ie: .getScript('.../babylon.js', function() { .getScript(’…/babylon.gui.js’)
}}

1 Like

actually, if you do that then your .done() may not have GUI yet. So, you probably need to check in done and also in callback for GUI. :slight_smile: Interested to know if that will fix your issue.

I added it as you said and it seemed to load without an error.

But…

now when I try to

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“UI”);

It gives me this error.

Uncaught TypeError: Cannot read property ‘AdvancedDynamicTexture’ of undefined

at Loader.CSG [as sceneConstructor] (app.js:35861)

at app.js:36207

So maybe it is what you are talking about in the done? unfortunately, I don’t know enough to code what you are asking with checking in done…

this code is hideous, but will hopefully explain the concept of promises and the order they complete:
`
var currentStage = 0;
onStageComplete = function() {
currentStage++;
if (currentStage === 2) {
_this.privateState.babylonLoaded = true;
mcb.editor.threeDLoader = new mcb.threed.Loader(mcb.threed.CSG);
}
}

$.when(

.getScript('[https://cdn.babylonjs.com/babylon.js’](https://cdn.babylonjs.com/babylon.js'), function() { .getScript('https://cdn.babylonjs.com/gui/babylon.gui.js’, function () {
onStageComplete();
}),
}),

$.getScript(’/js/lib/pep.js’),

$.getScript(’/js/lib/earcut.min.js’),

$.Deferred(function(deferred){

$(deferred.resolve);

})

).done(function(){

onStageComplete()

});
`

You can convert that into something more elegant using regular promise structure. Final call may look something like:
Promise.all(scriptPromisesArray).then(() => { _this.privateState.babylonLoaded = true; mcb.editor.threeDLoader = new mcb.threed.Loader(mcb.threed.CSG); });

ps: wish we had the editor from the old forum, or am I missing something?

1 Like

Here is the code to load… Still errors out when trying to add the AdvancedDynamicTexture

$.when(

$.getScript(‘https://cdn.babylonjs.com/babylon.js’, function() {

$.getScript('https://cdn.babylonjs.com/gui/babylon.gui.js’);

}),

$.getScript(’/js/lib/pep.js’),

$.getScript(’/js/lib/earcut.min.js’),

$.Deferred(function(deferred){

$(deferred.resolve);

})

).done(function(){

_this.privateState.babylonLoaded = true;

mcb.editor.threeDLoader = new mcb.threed.Loader(mcb.threed.CSG);

});

1 Like

I used the hideous code and now it works.

Thanks!

3 Likes