Three JS - GLTF model is dark

Question

I have succeeded to load my model into ThreeJS using GLTFLoader but my model is dark. I tried uploading it to glTF Viewer and BabylonJS and it works perfectly there. Here is my javascript code:

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )
const controls = new THREE.OrbitControls( camera )
const light = new THREE.AmbientLight( 0x404040 ); // soft white light


const renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
renderer.setClearColor( 0xffffff )
document.body.appendChild( renderer.domElement )

// Instantiate a loader
const loader = new THREE.GLTFLoader();

// Load a glTF resource
loader.load(
    // resource URL
    'untitled2.gltf',
    // called when the resource is loaded
    function ( gltf ) {

        scene.add( gltf.scene )

        gltf.animations // Array<THREE.AnimationClip>
        gltf.scene // THREE.Scene
        gltf.scenes // Array<THREE.Scene>
        gltf.cameras // Array<THREE.Camera>
        gltf.asset // Object

    }
    // loading and error function
)

camera.position.y = 1
camera.position.z = 2

// Vertical
controls.minPolarAngle = 1; // radians
controls.maxPolarAngle = 1; // radians

//Horizontal
controls.minAzimuthAngle = - Infinity; // radians
controls.maxAzimuthAngle = Infinity; // radians

scene.add( light );

const animate = function () {
    requestAnimationFrame( animate )
    renderer.render( scene, camera )
}

animate()

I tried adding ambient lighting because according to the documentation it is supposed to act as global illumination and changing the background color.

Here is when I upload the model to babylonJS:

Here is when I upload the model to glTF viewer:

And here is when I load it to ThreeJS (it's dark):

Mohamed Seif Khalid Mohamed Seif Khalid · Accepted Answer · 2018-08-08T14:12:44

2

votes

Solved it finally! The solution was that I needed to add intensity to the ambient light.

Three JS - GLTF model is dark

1 Answers