# Babylon js viewer config

**URL:** <https://forum.babylonjs.com/t/babylon-js-viewer-config/21374>\
**Category:** Questions\
**Created:** [June 3, 2021, 1:24pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374 "2021-06-03T13:24:16Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 1:24pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/1 "2021-06-03T13:24:16Z")

</div>

Hello, i have several questions/problems

Is the babylon viewer still getting updates?  
As it apears it seems to have a lot of problems (for me at least)  
i have been trying to follow [this](https://doc.babylonjs.com/extensions/babylonViewer/configuringViewer#configuring-using-javascript) but it has multiple problems

1. Google chrome have a shadow/light problem where the model turns pitch black
2. the render canvas have a size issue on all browsers where they no longer fill the full screen

i have been trying to make a viewer scene without the box that serounds the model but keep the toolbar in tact. And enable the vr option aswell. i have spend countless hours bu with no succsess unforuntate, so i was wondering if this was even still getting updated

---

<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:** [June 3, 2021, 1:31pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/2 "2021-06-03T13:31:32Z")

</div>

The viewer is being updated with the latest babylon core version, and if there is any bug we fix it as soon as we can.

Do you want to share what you are trying to do? some code? we might be able to help further if we knew what the issues are.

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 1:36pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/3 "2021-06-03T13:36:37Z")

</div>

i have tried starting out easy and tried following the link i provied  
right now i’m just trying to config babylon viewer using javasript,

but somehow once i try do the same, the canvas somehow horizontally shrinks, this happens in all browsers, to make things worse, in Google chrome the boombox modle turns pitch black, above the problem i already have

---

<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:** [June 3, 2021, 1:44pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/4 "2021-06-03T13:44:14Z")

</div>

the viewer is working and is being used in different websites already.  
If you want to share your code it will be simpler to help.

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 1:52pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/5 "2021-06-03T13:52:50Z")

</div>

like i mentiond i have just made a simple

`<babylon id="babylon-viewer" model="https://models.babylonjs.com/boombox.glb"></babylon>`

and just took the javascript from [this link](https://doc.babylonjs.com/extensions/babylonViewer/configuringViewer#configuring-using-javascript)

---

<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:** [June 3, 2021, 2:04pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/6 "2021-06-03T14:04:13Z")

</div>

We’ll eventually get to a point where we can help 🙂

Doing that should work. If that doesn’t work (without javascript), then something is wrong in the setup, or the viewer is totally not functional. But it does - [BabylonJS Viewer - Basic usage](https://viewer.babylonjs.com/basicexample).

Now - what are you doing in javascript, what is not working, do you have any errors in the console? What do you mean that the object turns dark? Have you configured the canvas’s size using css? Are you running this code:

```javascript
let domElement = document.getElementById('my-amazing-element');

let viewer = new BabylonViewer.DefaultViewer(domElement, {
    scene: {
        debug: true
    },
    camera: {
        behaviors: {
            autoRotate: 0
        }
    },
    model: {
        url: "https://playground.babylonjs.com/scenes/Rabbit.babylon"
    }
});

```

? different code?

Telling us “the viewer doesn’t work” leaves us with little details to work with. telling us the model turns dark doesn’t let us understand what actually happens. Screenshots, code examples, non-working demos.

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 2:13pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/7 "2021-06-03T14:13:40Z")

</div>

in that case i apoligize

i posted a screenshot where the with somehow shrinks once i try use a config using javascript

[[Album] bug? ![](https://i.imgur.com/pXpYLO0.png?fb "bug?") ](https://imgur.com/a/nVPsvpb)

the same result but the model turns pitch black if google chrome is used

[[Album] google chrome bug? ![](https://i.imgur.com/4gn90c7.png?fb "google chrome bug?") ](https://imgur.com/a/ihgArTv)

and if you want the full html

```auto
<html>
<head>
  <title>View 3D models on the web and in mixed reality</title>
  <link rel="stylesheet" href="style.css">
</head> 
<body>
    <babylon id="babylon-viewer" model="https://models.babylonjs.com/boombox.glb"></babylon>
    <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [June 3, 2021, 2:23pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/8 "2021-06-03T14:23:29Z")

</div>

Did you try in your environment any of examples from this page? - [Babylon.js Viewer Examples | Babylon.js Documentation](https://doc.babylonjs.com/extensions/babylonViewer/viewerExamples)

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 2:29pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/9 "2021-06-03T14:29:04Z")

</div>

yes, they dont have give the problems i have, but i’m trying to avoid dom configuration,  
as 1 i dont like it,2 it gets unreadeble fast, 3 i’m trying for 1 global config

i’m trying to make a javascript config that’s basicly the same as the **default** setup, but without the cube around the model, and Vr enabled

---

<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:** [June 3, 2021, 3:20pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/10 "2021-06-03T15:20:17Z")

</div>

Here is a pen - [[Babylon.js Viewer] Display a 3D model (codepen.io)](https://codepen.io/raananw/pen/YzZaWzm)

skybox is set to false, fullscreen mode

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 3:31pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/11 "2021-06-03T15:31:20Z")

</div>

i took a look at the codepen you made and tried it,  
but the page is somehow hust white, there’s nothing  
no errors in the log, no vissible content

the log says: `Babylon.js viewer (v5.0.0-alpha.24)`

[[Album] still problems ![](https://i.imgur.com/aINV4dO.png?fb "still problems") ](https://imgur.com/a/mmH5Xz9)

i’m also using vscode live server plugin, maybe that is usefull to know but should have no problems  
running in firefox

also have i tried downloading the model loccally and use that instead no chance  
the default scene loads but no model

---

<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:** [June 3, 2021, 3:36pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/12 "2021-06-03T15:36:44Z")

</div>

Check your network tab and make sure the model loaded. Also try not to use the babylon tag, but use a different tag (`div`?) just to be sure the browser is not trying to initialize the viewer

There is no magic done in this code pen… if it works in codepen, it should work locally

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 4:48pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/13 "2021-06-03T16:48:54Z")

</div>

yes after chancing it to a div and moving both script tags to the bottom of the page worked,  
also thank you for the skybox tip

oh btw: is there perhaps also a way to remove the babylon button ?  
i know how to add buttons to the toolbar, but not remove them

---

<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:** [June 3, 2021, 5:25pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/14 "2021-06-03T17:25:43Z")

</div>

Sure, set the navBar’s `hideLogo` to true.

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 3, 2021, 6:35pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/15 "2021-06-03T18:35:30Z")

</div>

it seems i have some more trouble with the config i made a copy of your repo and tried enable Vr there aswell, but it seems not to be working im i missing something ?

https://codepen.io/weshuiz13/embed/preview/poeLegq?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=poeLegq

---

<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:** [June 4, 2021, 10:34am UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/16 "2021-06-04T10:34:19Z")

</div>

Params were in the wrong place -

[[Babylon.js Viewer] Display a 3D model (codepen.io)](https://codepen.io/raananw/pen/zYZWJav)

---

<div class="post-metadata">

**Author:** ![weshuiz13](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/weshuiz13/32/16613_2.png) [@weshuiz13](https://forum.babylonjs.com/u/weshuiz13)\
**Post date:** [June 4, 2021, 1:44pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-config/21374/17 "2021-06-04T13:44:53Z")

</div>

ah thank you once again, but i’l have to question some more.  
because i dont understand yet why turning the vr button on doesn’t make the Vr work?  
clicking the button does not start Vr