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/