three.js入门问题：场景物体无法在平面上投射阴影如何解决

你的代码存在2处导致阴影无法显示的错误，修改后即可正常显示阴影：

• 属性名大小写错误：开启渲染器阴影映射的属性名拼写错误，原代码写的是renderer.shadowMap.Enabled = true，Three.js 官方API中该属性为小写开头的enabled，修改为renderer.shadowMap.enabled = true即可开启全局阴影渲染支持。
• 球体位置设置错误：原代码中球体y轴坐标设置为0，球体半径为4，会导致球体下半部分完全嵌入平面，无法投射正常阴影，将球体位置修改为sphere.position.set(20, 4, 2)即可。

修正后的完整init函数代码 #

function init()
{
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth /
  window.innerHeight,0.1, 1000);
  var renderer =new THREE.WebGLRenderer();
  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 修正属性名大小写
  renderer.shadowMap.enabled = true;
  var axes = new THREE.AxesHelper(20);
  scene.add(axes);
  var planeGeometry = new THREE.PlaneGeometry(60,20,1,1)
  var planeMaterial = new THREE.MeshLambertMaterial({
    color: 0xffffff
  });
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.receiveShadow = true;
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.set(15,0,0);
  scene.add(plane); 
  var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  var cubeMaterial = new THREE.MeshLambertMaterial({
      color: 0xff0000
  });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.castShadow = true;
  cube.position.set(-4, 4, 0);
  scene.add(cube);
  var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  var sphereMaterial = new THREE.MeshLambertMaterial({
      color: 0x7777ff,
  });
  var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.castShadow = true;
  // 修正球体y轴坐标，避免嵌入平面
  sphere.position.set(20, 4, 2);
  scene.add(sphere);
  camera.position.set(-30, 40, 30);
  camera.lookAt(scene.position);
  var ambienLight = new THREE.AmbientLight(0x353535);
  scene.add(ambienLight);
  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-10, 20, -5);
  spotLight.castShadow = true;
  scene.add(spotLight);  
  document.getElementById("webgl-output").appendChild(renderer.domElement);
  renderer.render(scene, camera);
}

内容的提问来源于stack exchange，提问作者Waqar