Constant light to all object

Questions
1

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
image1366×625 61.1 KB

Code I used:

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

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

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

3

What format is this model?

4

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

5

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

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
image1366×626 2.01 KB

Maybe I haven’t found the proper way to added the material, so is there another way to added the material to the model?

6

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.

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);
}
7

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.

8

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

9

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

10

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).

11

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
image1366×768 159 KB

12

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/ or https://gltf.report/?

13

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

14

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.

15

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