# Babylon.js Viewer - Model Natural Lighting

**URL:** <https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837>\
**Category:** Questions\
**Created:** [May 16, 2021, 12:13pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837 "2021-05-16T12:13:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![memoricab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/memoricab/32/16031_2.png) [@memoricab](https://forum.babylonjs.com/u/memoricab)\
**Post date:** [May 16, 2021, 12:13pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837/1 "2021-05-16T12:13:50Z")

</div>

Hello

I’m using babylon model viewer.

I extend minimal configuration as below

```
{
"templates": {
    "loadingScreen": {
        "params": {
            "backgroundColor": "#FFFFF"
        }
    }
},
"scene": {
    "clearColor": {
        "r": 1,
        "g": 1,
        "b": 1
    }
},
"camera": {
    "behaviors": {
        "autoRotate": {
            "type": 0
        },
        "framing": {
            "type": 2,
            "zoomOnBoundingInfo": true,
            "zoomStopsAnimation": false
        },
        "bouncing": {
            "type": 0
        }
    }
},
"engine": {
    "antialiasing": true
}

```

}

With the above configuration, I have model lighting as below

[https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/2/222920271cfe107b0ea8618449e4c95882874289.mp4](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/2/222920271cfe107b0ea8618449e4c95882874289.mp4)

I would like to have the same lighting as the “extended” configuration, but I don’t want to extend the “extended” configuration as I don’t want to use ground, skybox etc. As below, or at least bright model without ambient shadows bottom etc.

[https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/1/61394aa60e4f83b36d8060b6eb6cd1cb8e078beb.mp4](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/1/61394aa60e4f83b36d8060b6eb6cd1cb8e078beb.mp4)

I copied lighting configuration variables from the “extended” configuration and copied them into my configuration but unfortunately, it made the lightings darker.

Thank you in advance

---

<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:** [May 16, 2021, 12:42pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837/2 "2021-05-16T12:42:40Z")

</div>

The simplest way is to use the configuration which is good for you and simply dispose ground with shadows and skybox.

---

<div class="post-metadata">

**Author:** ![memoricab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/memoricab/32/16031_2.png) [@memoricab](https://forum.babylonjs.com/u/memoricab)\
**Post date:** [May 16, 2021, 1:18pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837/3 "2021-05-16T13:18:46Z")

</div>

Hi @labris, thank you for your answer.

If I extend extended configuration, I can’t dispose of skybox and ground.

Because if I use extended config as below, and override it with my configuration I can’t dispose of the fields that are already included in the extended configuration.

```
<babylon id="babylon-viewer" extends="extended" configuration="/model-viewer-config.json">

```

I guess the reason because, the viewer configuration uses deepmerge for extension so, I only can override fields to extend the configuration but can’t get rid of fields.

---

<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:** [May 16, 2021, 1:46pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837/4 "2021-05-16T13:46:23Z")

</div>

You may just disable background and skybox like:

`<babylon model="https://playground.babylonjs.com/scenes/Rabbit.babylon" skybox="false" ground="false"></babylon>`

---

<div class="post-metadata">

**Author:** ![memoricab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/memoricab/32/16031_2.png) [@memoricab](https://forum.babylonjs.com/u/memoricab)\
**Post date:** [May 16, 2021, 7:06pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837/5 "2021-05-16T19:06:27Z")

</div>

Thank you @labris, it worked. But now unfortunately I see the navbar Babylon.js logo and full-screen button. Also, the loading spinner is overridden by the default config.

I will try to override the loading image but what about disabling the navbar that default config provides?

---

<div class="post-metadata">

**Author:** ![memoricab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/memoricab/32/16031_2.png) [@memoricab](https://forum.babylonjs.com/u/memoricab)\
**Post date:** [May 16, 2021, 7:24pm UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837/6 "2021-05-16T19:24:50Z")

</div>

Actually as I said, I override the navbar and loading templates then issue is resolved 🙂

---

<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:** [May 17, 2021, 12:20am UTC](https://forum.babylonjs.com/t/babylon-js-viewer-model-natural-lighting/20837/7 "2021-05-17T00:20:36Z")

</div>

You can just disable the navbar - [https://codepen.io/raananw/pen/gOwBMEB](https://codepen.io/raananw/pen/gOwBMEB)