THREE.JS-How can I add shadows for my GLTF model?

Question

I'm new to Three.js. I was wondering how can I make my GLTF model cast a shadow on itself? I've been trying different things however I'm not sure if I'm even doing it right. The light is a PointLight and the camera is Perspective IDK if it matters please tell me. Here's the code. Please and Thank you :)

---

var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        0.01,
        1000
    );
    //camera.rotation.x=-20*Math.PI/180;
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.body.appendChild(renderer.domElement);


    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth/ window.innerHeight;
        
        
        camera.updateProjectMatrix();
    });


    function mousemovement(event) {
        const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
        const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
  
        light.position.x = mouseX * 11 + 2 ;

       light.position.y = mouseY * 4 + 4.5 ;
    };

    var numberofclicks = 2;

    window.addEventListener('mousemove', mousemovement);
    
    window.addEventListener('click', e =>{
        numberofclicks = numberofclicks + 1;
        if(numberofclicks % 2 == 0) {
    window.addEventListener('mousemove', mousemovement);
    }
    else {
    window.removeEventListener('mousemove', mousemovement);
    }
    });

    

    //GLTF moldal
    var loader = new GLTFLoader();

     loader.load("wrktblv2.gltf", function (gltf) {

            loader.castShadow = true;
            loader.receiveShadow = true;
         scene.add(gltf.scene);

     });
     
     var light = new THREE.PointLight(0xffffff, 2, 20);
     
     light.position.set(1,10,2)
    
     scene.add(light);
     
     camera.position.set(2,3,9);

     
     
        //const lightHelper = new THREE.PointLightHelper(light);
        //const gridHelper = new THREE.GridHelper(200,50);
        //scene.add(lightHelper, gridHelper);
     
    function animate(){
         requestAnimationFrame(animate);
         renderer.render(scene,camera);      
     }
     animate();

---

Again Thank you and cheers!

---

Edit--I got some help there's shadows but now there's an issue.

---

The issue.

Answer 1

Try adding light.castShadow = true. Also, you shouldn't cast shadows on the loader, but on each mesh. So replace

loader.castShadow = true;
loader.receiveShadow = true;

with

gltf.scene.traverse(function(child) {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
})