Three.js no shadow

Please tell me, what i’m doing wrong.
Everything is OK, but the glb file don’t hava a shadows on scene.
How to fix it??

Help please.

window.onload = function () {

    var clock, mixer, camera, controls, scene, renderer, model, delta;

    var init = function () {

        if (!clock) {

            clock = new THREE.Clock();


        if (mixer) {

            mixer = null;


        if (renderer) {



        if (scene) {



        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(25, 500 / 500, 0.01, 10);

        camera.position.set(-10, 15, 20);

        // var size = 2.5;

        // var divisions = 15;

        // var gridHelper = new THREE.GridHelper(size, divisions);

        // scene.add(gridHelper);

        renderer = new THREE.WebGLRenderer({

            antialias: true,

            alpha: true



        renderer.setSize(500, 500);

        container = document.createElement('div');




        window.addEventListener('resize', () => {

            renderer.setSize(500, 500);

            camera.aspect = 500 / 500;



        controls = new THREE.OrbitControls(camera, renderer.domElement);

        controls.addEventListener('change', function () {



        var GLBFile = 'hero.glb';

        var loader = new THREE.GLTFLoader();

        loader.load(GLBFile, async (gltf) => {

                model = gltf.scene;

                gltf.scene.traverse(function (node) {

                    if (node.isMesh || node.isLight) node.castShadow = true;

                    if (node.isMesh || node.isLight) node.receiveShadow = true;



                gltf.castShadow = true;

                gltf.receiveShadow = true;




                mixer = new THREE.AnimationMixer(gltf.scene);

                var action = mixer.clipAction(gltf.animations[0]);





            function (xhr) {

                console.log((xhr.loaded / * 100) + '% loaded');


            function (error) {

                console.log('An error happened');


        var light = new THREE.PointLight(0xffffff, 11, 0);

        light.position.set(-1, 10, 10);


        light.shadow.mapSize.width = 512; // default

        light.shadow.mapSize.height = 512; // default = 0.15; // default = 0.15 // default

        controls.enableDamping = false; // an animation loop is required when either damping or auto-rotation are enabled

        controls.dampingFactor = 10.5;

        controls.screenSpacePanning = false;

        controls.maxDistance = 0.15;

        controls.minDistance = 0.15;

        controls.maxPolarAngle = Math.PI / 2;

        controls.addEventListener('change', light_update);

        function light_update() {



        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;


            renderer.setSize(window.innerWidth, window.innerHeight);


        function animate() {

            delta = clock.getDelta();

            if (mixer) mixer.update(delta);





        function render() {

            renderer.render(scene, camera);

        }, 0.02, 0);





When creating your instance of WebGLRenderer, you also have to enable shadow maps like so:

renderer.shadowMap.enabled = true;

Besides, the near and far properties of your point light’s shadow camera are not correct. Depending on the scale of your scene, try it with: = 0.1; = 10;

You can visually debug the shadow camera’s frustum with CameraHelper:

scene.add( new THREE.CameraHelper( ) );

Shadows will only be visible inside the respective frustum.

I add what You said, i got that, but still no shadows :frowning:

Can you please share hero.glb in this thread? I’d like to inspect the asset.

Besides, try to position the light like so for the moment and see if it helps:

 light.position.set(0, 5, 0);

hero.glb (470.8 KB)

i changed light position, but it doesn’t work

A light can’t receive shadow but that just as a side note. Do you have a receiver like a plane? In your screencap i only see some wireframe meshes. Your model and the receiver like a floor plane needs to be within the shadow frustum you see with the helper as Mugen suggested.

I am working with three.js for the first time, and I don’t really understand the motor skills. What is needed and what is not. It took me a whole day to properly generate the model on stage. Now I am struggling with these shadows.
Probably I can guess that there is no floor on which this shadow is to show, but how to make it?

It’s not a problem with the asset. I’ve imported it into the three.js editor and the model can receive shadows. I originally though it would use MeshBasicMaterial which is unlit and thus can’t receive shadows.

Try it with this code:

var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );

Now i have something like this

Any chances to share your code as a GitHub repo?

I don’t have a github :frowning:

i will try :slight_smile:

check if that is ok. :stuck_out_tongue:

ok now, i forgot to make it public (663.1 KB)

I’ve updated your code so it has a similar style like the official examples. Just replace your script.js and index.html.

The app should now have proper lighting and shadow configurations. Besides, I removed the change event listeners from your controls since they are not necessary when you have an animation loop. The latter one is necessary in your app since your model has an animation.

1 Like

thank you very much for your time :slight_smile:
you saved my life :stuck_out_tongue:

1 Like