ThreeJS - GLTF 无阴影投射

Question

我的网格无法在场景中的其他网格上投射阴影时遇到问题。我环顾了 Stack Overflow 和three.js 论坛，实施了所有建议，但没有发生/改进。

这是代码片段：

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;

以及结果的图片：

如您所见，即使是带有 Phong 的 ThreeJS 网格也没有收到任何阴影。

我被困在这里。有什么提示吗？