AmbientLight doesn't work on my imported model

Questions
, ,
1

I am importing my glb model from blender, and I wanna illuminate whole scene for which I use ambient light, but for some reason scene remains dark, but when I use some other light like Directional it works as expected.

Here is my code:

const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

gltfLoader.load(
    './untitled.glb',
    gltf => {
        for (const child of gltf.scene.children){
            scene.add(child)
        }
    },
    onProgress => {
        console.log("PROGRESS")
    },
    onError => {
        console.log("ERROR")
    }
)


// Lights

const ambientLight = new THREE.AmbientLight( 0x404040, 54)
scene.add(ambientLight)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 10
scene.add(camera)


// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */

const clock = new THREE.Clock()

const tick = () =>
{

    const elapsedTime = clock.getElapsedTime()


    // Update Orbital Controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

I added my glb model also.
untitled.glb (2.1 KB)

2

Your cube has a metalness value of 1 which is the reason for your issue. Try to lower it (probably near to 0) to see a more intense effect of the ambient light.

Sidenote: Ambient and directional lights in three.js represent totally different things (indirect vs. direct light). Hence, different material properties affect their influence on 3D objects.

3

Tnx for the answer, is there some way to preserve metalness of model and still use ambient light?

4

No, but you can try to use a different kind of environmental lighting like an environment map that you assign to Scene.environment.

1 Like