# Constant light to all object

**URL:** <https://discourse.threejs.org/t/constant-light-to-all-object/28020>\
**Category:** Questions\
**Tags:** lighting\
**Created:** [July 14, 2021, 9:12am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020 "2021-07-14T09:12:16Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![QuanMCPC](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quanmcpc/32/19424_2.png) [@QuanMCPC](https://discourse.threejs.org/u/QuanMCPC)\
**Post date:** [July 14, 2021, 9:12am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/1 "2021-07-14T09:12:16Z")

</div>

Hello Everyone!  
Note: I’m new to using `three.js` so I’m not very good with thing like Lighting, Camera, Renderer

So, I’ve made a model and have imported to the scene, and I’ve also wanted to have a constant lighting all around the object, so I’ve tried `AmbientLight()` and it worked to some extent. But as soon as the camera move far out the object, there’s an area that’s darker. Is there any way to make the light always constant even if the camera move far out?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/6/46d16c456e25b00134af30d994d99760c5981a20.png)

Code I used:

```javascript
const alight = new THREE.AmbientLight(0xf0f0f0, 1.2)
scene.add(alight)

```

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [July 14, 2021, 2:56pm UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/2 "2021-07-14T14:56:33Z")

</div>

I would suggest to change strategy and modify your materials instead  
This way you don’t need any lights. It prevent issues coming from over-lighting (\> 1.0 intensity) and frustrum/shadows at far distance.

by using MeshBasicMaterial  
[https://threejs.org/docs/index.html?q=mesh#api/en/materials/MeshBasicMaterial](https://threejs.org/docs/index.html?q=mesh#api/en/materials/MeshBasicMaterial)

or emissive materials directly from your 3d software (with ambiant light set to 0x000000)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 14, 2021, 3:38pm UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/3 "2021-07-14T15:38:20Z")

</div>

What format is this model?

---

<div class="post-metadata">

**Author:** ![QuanMCPC](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quanmcpc/32/19424_2.png) [@QuanMCPC](https://discourse.threejs.org/u/QuanMCPC)\
**Post date:** [July 14, 2021, 3:48pm UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/4 "2021-07-14T15:48:29Z")

</div>

It’s a glTF model (.glb extension name)

---

<div class="post-metadata">

**Author:** ![QuanMCPC](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quanmcpc/32/19424_2.png) [@QuanMCPC](https://discourse.threejs.org/u/QuanMCPC)\
**Post date:** [July 14, 2021, 4:12pm UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/5 "2021-07-14T16:12:38Z")

</div>

Based on some Googling, I tried the solution which is from here: [https://stackoverflow.com/a/55308021/11418759](https://stackoverflow.com/a/55308021/11418759), and the code I’ve added:

```javascript
const material = new THREE.MeshBasicMaterial({ color: 0x444444 })
const loader = new GLTFLoader();
loader.load("./test.glb", (gltf) => {
    const object = gltf.scene;
    object.traverse( function( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.material = material;
        }
    } );
    scene.add(object)
}, undefined, (err) => {
    console.log(err)
})

```

But when I run it, it results in a solid color object.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/6/1692b0acdc7f758e64d9d3d3d5ab2b29f470d73e.png)  
Maybe I haven’t found the proper way to added the material, so is there another way to added the material to the model?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 14, 2021, 4:16pm UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/6 "2021-07-14T16:16:54Z")

</div>

> [@QuanMCPC](#):
>
> Maybe I haven’t found the proper way to added the material, so is there another way to added the material to the model?

Try dropping the model in here, opening the editor in the sidebar, and then running the script below. It should become MeshBasicMaterial automatically when loaded, after that.

> **[glTF Report](https://gltf.report/)**
>
> Viewer, analysis tool, script editor, and validator for 3D models in glTF 2.0 format.

```typescript
import { MaterialsUnlit } from '@gltf-transform/extensions';

const unlitExtension = document.createExtension(MaterialsUnlit);
const unlit = unlitExtension.createUnlit();

for (const material of document.getRoot().listMaterials()) {
	material.setExtension('KHR_materials_unlit', unlit);
}

```

---

<div class="post-metadata">

**Author:** ![QuanMCPC](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quanmcpc/32/19424_2.png) [@QuanMCPC](https://discourse.threejs.org/u/QuanMCPC)\
**Post date:** [July 15, 2021, 1:25am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/7 "2021-07-15T01:25:02Z")

</div>

I guess after that, I just have to press export. Although the exported file is way smaller than the original one, and it said that there’s no Drago decoder loaded.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 15, 2021, 5:14pm UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/8 "2021-07-15T17:14:35Z")

</div>

It sounds like you may have run the default script on the page (which does compression), rather than the script above?

---

<div class="post-metadata">

**Author:** ![QuanMCPC](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quanmcpc/32/19424_2.png) [@QuanMCPC](https://discourse.threejs.org/u/QuanMCPC)\
**Post date:** [July 16, 2021, 4:38am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/9 "2021-07-16T04:38:38Z")

</div>

So, I should run the script you provided above instead of the default script? And after that, what should I do next?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 16, 2021, 5:31am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/10 "2021-07-16T05:31:35Z")

</div>

Yes, I’d run that script — and nothing else — and then just export the file.

If you want to run the of the original script, too, to reduce filesize that’s OK, but you’d need to do additional steps to install the Draco loader (see [three.js docs](https://threejs.org/docs/?q=gltf#examples/en/loaders/GLTFLoader)).

---

<div class="post-metadata">

**Author:** ![QuanMCPC](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quanmcpc/32/19424_2.png) [@QuanMCPC](https://discourse.threejs.org/u/QuanMCPC)\
**Post date:** [July 16, 2021, 5:46am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/11 "2021-07-16T05:46:13Z")

</div>

Run the script you provided only, save the draft, export the glb file and it loaded into the scene with no need of light, altho the weird color on the far region is still here.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/b/6b5e3ff97b822193d0fbf6beff1908acd9e737dc.png)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 16, 2021, 4:35pm UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/12 "2021-07-16T16:35:26Z")

</div>

Not sure what I’m seeing in this image, are you able to share the GLB? Does it look the same in viewers like [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) or [https://gltf.report/](https://gltf.report/)?

---

<div class="post-metadata">

**Author:** ![QuanMCPC](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quanmcpc/32/19424_2.png) [@QuanMCPC](https://discourse.threejs.org/u/QuanMCPC)\
**Post date:** [July 17, 2021, 4:27am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/13 "2021-07-17T04:27:00Z")

</div>

I mean there are part of the model that have the color darker farther from the camera than the color near the camera.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 17, 2021, 5:37am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/14 "2021-07-17T05:37:00Z")

</div>

Sorry, what I mean is that I can’t tell you why that is happening just by looking at the image. You’ll probably need to share a demo or the model. Comparing whether the model looks the same way in online glTF viewers may also be helpful, to see if there’s an issue in your code or in the model.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 17, 2021, 6:34am UTC](https://discourse.threejs.org/t/constant-light-to-all-object/28020/15 "2021-07-17T06:34:05Z")

</div>

It looks like a spotlight, the round fall off and the moiree pattern are telltale signs. Ambient lights should not behave like that.