Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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;
    }
})
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!