Viewer & related BABYLON methods

Questions
1

I’m slowly learning how to use Babylon.js, and am having some trouble with the Viewer (which I assume is still actively maintained to stay up to date with the main babylon.js?):
I’m currently using the viewer rather than core babylon.js, as it seems to be a slightly smaller file - but I can’t work out how access things like the Vector3 with it. BabylonViewer.Vector3 doesn’t work, and BABYLON isn’t defined, so I can’t do BABYLON.Vector3 (I also need other methods such as CubicEase(), .Animation etc. which work with BABYLON.)
Or would it maybe be easier to just give up on the Viewer and use the main babylon.js and babylon.loader.min.js files?
Any help would be greatly appreciated :slight_smile:

2

Cc @RaananW and @ryantrem

3

BabylonViewer is the main module, and whithin you can find all exported modules from babylon.js, including the BABYLON namespace. Try using BabylonViewer.BABYLON.Vector3. I assume you are using the UMD version?

1 Like
4

Ah - that does indeed work. I can’t believe I didn’t try that :sweat_smile:

Does babylon.viewer.js contain everything babylon.js and babylon.loaders.min.js contain then? If so, how come it’s a slightly smaller file than those two together (5015KB vs 5043+197KB)? I.e. do I lose any functionality through using the viewer?
I am indeed using the UMD version.

Thanks for your help!

1 Like
5

It doesn’t include everything babylon has to offer. It includes everythign the viewer needs in order to work correctly. Some engine extensions, for example, will not be included, as opposed to the full UMD version of the engine, which provides everything as is.
If you use the es6 version of the viewer you will be able to add missing functionality by including it in your bundle, if you are missing something.

1 Like
6

I see, that makes sense. Unfortunately as far as I understand the ES6 version won’t work for me as I’m not using a compiler, I’m just uploading my HTML/CSS/JS directly to the server. One day I’ll work out how to use one of the build tools, but after taking a quick look recently I decided it was more trouble than it was worth for now - it looks weirdly complex to set up multi-page websites with them :sweat_smile:

Thank you for your help with this - I really appreciate the speed of your answers! I’m loving babylon.js so far!

1 Like
7

Sorry, one other related query! I have the viewer set up in the HTML (see end of message) without a model, as the model depends on a url parameter. I then load a model in the JS like this:

BabylonViewer.viewerManager.getViewerPromiseById("babylon-viewer").then(function(viewer) {
        BabylonViewer.BABYLON.SceneLoader.ImportMeshAsync("", modelUrl, "").then((result) => {

This however is presenting two issues:

  • The camera framing doesn’t work, presumably because the model isn’t loaded yet when the camera is. However I’ve more or less solved this by, once the mesh is loaded, calculating the bounding info manually and then setting the camera target / radius.
  • The loading screen doesn’t ever disappear for some reason. I’d like to keep the loading screen and have it disappear once the model is loaded - is there any method or something I can call to signal to it that the scene is loaded and it should go away?

Thank you! While I’m not new to webdev I am new to babylon.js and am finding some aspects a bit confusing, so I really appreciate your help!

<babylon id="babylon-viewer" extends="minimal" templates.loading-screen.params.background-color="transparent">
  <engine antialiasing="true"></engine>
  <scene>
    <clear-color r="0" g="0", b="0" a="0"></clear-color>
  </scene>
  <camera beta="1.1"></camera>
</babylon>
8

Just to add to this - I did find a potential function viewer.engine.hideLoadingUI(); which doesn’t throw an error so it seems it exists? But it doesn’t seem to hide the loading icon or anything… So I’m still no closer to solving it :thinking:

EDIT: Whoops, forgot I could edit posts, sorry abou that :upside_down_face:

9

The viewer’s loading screen works a bit differently, as it is an HTML template. If you want to use babylon’s loading screen you can decide when to call show and hide, as you have full control of the engine as well.
The viewer instance has two functions - showLoadingScreen and hideLoadingScreen to control the viewer’s loading screen directly.

1 Like