why is three.js cast shadow not working on a 3D model

Question

I have 3D models as such:

I want to add a cast shadow similar to this:

And I have the following piece of code responsible for the model:

var ambLight = new THREE.AmbientLight( 0x404040 );
this.scene.add(ambLight)

var loader = new THREE.GLTFLoader();
loader.load(path,function (gltf) {
 gltf.scene.traverse( function( model ) {
  if (model.isMesh){ 
   model.castShadow = true; 
  }
 });
 this.scene.add(gltf.scene);
}

I added the castSHadow part as seen in this StackOverflow post.

I've tried model.castShadow = true and I've tried removing the if condition and just leave the castShadow but that doesn't work either. Am I missing a step? The full custom layer code is here if it helps.

Answer 1

• You only have an instance of AmbientLight in your scene which is no shadow-casting light.
• 3D objects can only receive shadow if they set Object3D.receiveShadow to true and if the material is not unlit. Meaning MeshBasicMaterial would not work as the ground's material.
• You have to globally enable shadows via: renderer.shadowMap.enabled = true;

I suggest you have a closer look to the shadow setup of this official example.