Ambient Light and GLTF models not working - Results in black model

Questions
, ,
#1

So my code for the renderer is:

  renderer = new THREE.WebGLRenderer({ antialias: true, canvas: drawingSurface, alpha: false });
  renderer.setPixelRatio(window.devicePixelRatio); 
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.render(scene, camera);

The code for the loader is

  var loader = new THREE.GLTFLoader();
  loader.load( 'models/desk colorised.gltf', function ( gltf ) {
    gltf.scene.scale.set( 2, 2, 2 );
    scene.add( gltf.scene );
  }, undefined, function ( error ) {
    console.error( error );
  } );

and then I am adding the ambient light as such:

function addLight(){
  var ambientLight = new THREE.AmbientLight( 0xcccccc );
  scene.add( ambientLight );
};

Now it seems to work when the the light is DirectionalLight but not when AmbientLight - it just gives a black object.

Thanks

#2

It seems your issue is a duplicate of:

#3

So the problem is the model ? The model was acquired from a 3D scanner, converted from obj to dae then to gltf. If that is the problem then there isn’t much that I can do ?

#4

Also why does it work fine when I use this ? https://gltf-viewer.donmccurdy.com
I checked his code and he uses an ambient light

#5

Because the viewer applies and environment map to the asset.

Anyway, try to traverse through gltf.scene and set metalness to 0 for a quick test.

gltf.scene.traverse( child => {

    if ( child.material ) child.material.metalness = 0;

} );

Applying an environment map is even better to get the best visual result from MeshStandardMaterial.

1 Like
#6

The code you linked works. I am not sure how to apply an environment map. Will that map be the equivalent of setting the metalness = 0; ?

#7

No, that’s something totally different. Modulating metalness influences the actual property of a material’s surface. Using an environment map is a IBL technique which stands for image-based lighting. I suggest you google the topic since there are enough resources that explain IBL far better than I could^^.

The basic glTF example also shows how to apply an environment map to a model.

https://threejs.org/examples/webgl_loader_gltf

3 Likes
#8

Ok thanks!