three.js - ThreeJS - GLTF No Shadow Casting

Question

I am having issues with my meshes not casting shadows on other meshes in the scene. I have looked around the Stack Overflow and three.js forums, implemented all suggestions and nothing happened/improved.

Here is the code snippet:

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( - 20, 20, 20);

scene = new THREE.Scene();


const loader = new GLTFLoader();
loader.load( 'here_is_path_to_brown_model', function ( gltf ) {     
    gltf.scene.traverse( function ( node ) {
        if ( node.isMesh ) {
            node.castShadow = true;
            node.receiveShadow = true;
        }
    } );
    scene.add( gltf.scene );
    render();
} );

const cubeloader = new GLTFLoader();
cubeloader.load( 'here_is_path_to_white_model', function ( gltf ) {
    gltf.scene.traverse( function ( node) {
        if ( node.isMesh ) {
            node.castShadow = true;
            node.receiveShadow = true;
        }
    } );
    scene.add( gltf.scene );
    render();
} );


const geometry = new THREE.PlaneGeometry( 5, 20, 512,512);
const groundMaterial = new THREE.MeshPhongMaterial( { color: 0xFFFFFF ,side: THREE.DoubleSide} );
//const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, groundMaterial );
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add( plane ); 

const spotLight = new THREE.SpotLight( 0xffffff );
//var spotLight = new THREE.DirectionalLight(0xffffff,1);
spotLight.position.set( 10, 5, 10 );
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 50;
spotLight.shadow.camera.far = 400;
spotLight.shadow.camera.fov = 10;
spotLight.shadow.camera.left = -500;
spotLight.shadow.camera.bottom = -500;
spotLight.shadow.camera.right = 500;
spotLight.shadow.camera.top = 500;
scene.add( spotLight );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaOutput = true;
renderer.gammaFactor = 1;

And the picture of the outcome:

As you can see, even the ThreeJS mesh with Phong does not receive any shadow.

I am stuck here. Any hints?

question from:https://stackoverflow.com/questions/65907675/threejs-gltf-no-shadow-casting

Answer 1

Waitting for answers