ThreeJS不會投下任何陰影

Question

我在ThreeJS遇到了一些麻煩。我有一些立方體，應該在下面的飛機上投下陰影，但他們不這樣做 - 我一直在Google上搜索一個解決方案几個小時，並嘗試了所有我能找到的東西，但我無法得到它工作。

我在所有對象上使用MeshPhongMaterial，並且向所有適當的對象添加了.castShadow和.receiveShadow。我用一個SpotLight，指向地面 - 它點亮立方體和地面，但立方體不會投下陰影。這裏有一個立方體和地面的例子：

var cubeGeometry = new THREE.CubeGeometry(20, 20, 20); 
    cube1 = new THREE.Mesh(cubeGeometry, material); 
    cube1.shading = THREE.FlatShading; 
    cube1.castShadow = true; 
    cube1.receiveShadow = true; 
    var groundGeometry = new THREE.PlaneGeometry(200, 200); 
    var groundMaterial = new THREE.MeshPhongMaterial({color: 0xf0dc3f}); 
    ground = new THREE.Mesh(groundGeometry, groundMaterial); 
    ground.shading = THREE.FlatShading; 
    ground.position.y = -30; 
    ground.rotation.x = Math.PI/2; 
    ground.rotation.z = Math.PI/4; 
    ground.receiveShadow = true; 

而且我的jsfiddle：https://jsfiddle.net/fggjp2n9/

Answer 1

你缺少：

renderer.shadowMap.enabled = true;

https://jsfiddle.net/fggjp2n9/1/