# Viewer & related BABYLON methods

**URL:** <https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917>\
**Category:** Questions\
**Created:** [May 29, 2024, 9:12am UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917 "2024-05-29T09:12:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![leo\_h](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leo_h/32/39859_2.png) [@leo\_h](https://forum.babylonjs.com/u/leo_h)\
**Post date:** [May 29, 2024, 9:12am UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/1 "2024-05-29T09:12:49Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 29, 2024, 9:30am UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/2 "2024-05-29T09:30:31Z")

</div>

Cc @RaananW and @ryantrem

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 29, 2024, 1:07pm UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/3 "2024-05-29T13:07:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![leo\_h](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leo_h/32/39859_2.png) [@leo\_h](https://forum.babylonjs.com/u/leo_h)\
**Post date:** [May 29, 2024, 2:39pm UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/4 "2024-05-29T14:39:21Z")

</div>

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

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!

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 29, 2024, 2:44pm UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/5 "2024-05-29T14:44:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![leo\_h](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leo_h/32/39859_2.png) [@leo\_h](https://forum.babylonjs.com/u/leo_h)\
**Post date:** [May 29, 2024, 3:01pm UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/6 "2024-05-29T15:01:55Z")

</div>

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 😅

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

---

<div class="post-metadata">

**Author:** ![leo\_h](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leo_h/32/39859_2.png) [@leo\_h](https://forum.babylonjs.com/u/leo_h)\
**Post date:** [May 29, 2024, 4:19pm UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/7 "2024-05-29T16:19:15Z")

</div>

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:

```auto
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!

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![leo\_h](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leo_h/32/39859_2.png) [@leo\_h](https://forum.babylonjs.com/u/leo_h)\
**Post date:** [May 30, 2024, 3:44pm UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/8 "2024-05-30T15:44:03Z")

</div>

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 🤔

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 30, 2024, 3:51pm UTC](https://forum.babylonjs.com/t/viewer-related-babylon-methods/50917/9 "2024-05-30T15:51:56Z")

</div>

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.
