Unable to cast shadow in imported model

Questions
,
1

Hey I am importing a map of .glb type. I am using ambient light and directional lights. I have set castShadow and receiveShadow for every children(mesh instance) of the scene. But I am not unable to cast shadow.
Code:

const updateMaterial = () => {
  scene.traverse((child) => {
    if (
      child instanceof THREE.Mesh &&
      child.material instanceof THREE.MeshStandardMaterial
    ) {
      child.castShadow = true;
      child.receiveShadow = true;
      if(child.material.map) {
        child.material.map.anisotropy = 16;
      }
    }
  });
}

gltfLoader.load("/models/map17.glb", (gltf) => {
  gltf.scene.scale.set(0.025, 0.025, 0.025);
  scene.add(gltf.scene);
  updateMaterial()
})

const ambientLight = new THREE.AmbientLight(0xffffff, 1.8);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.castShadow = true;
directionalLight.shadow.bias = 0.0001;
directionalLight.shadow.mapSize.set(1024*4, 1024*4);
directionalLight.shadow.camera.far = 15;
directionalLight.shadow.camera.left = -7;
directionalLight.shadow.camera.top = 3;
directionalLight.shadow.camera.right = 7;
directionalLight.shadow.camera.bottom = -7;
directionalLight.position.set(-55, 41, 4);
scene.add(directionalLight);

const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.021,
  120
);
camera.position.set(4.58, 0.13, 1.36);
camera.rotation.set(0, 2.01, 0);
scene.add(camera);

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
});
renderer.physicallyCorrectLights = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(0x87CEEB);
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ReinhardToneMapping
renderer.toneMappingExposure = 2.5
2

I think you can try using DirectionalLightHelper.

I think some value of directionalLight.shadow.xx are wrong.

https://threejs.org/examples/?q=shad#webgl_shadowmap

It seems value of directionalLight.shadow.camera.far is too small. I dont know. :slightly_smiling_face:

1 Like