Three.js中方向光阴影无法生成问题求助

你的代码里有两个核心问题导致球体无法在平面上投射阴影：

1. 平面使用了不支持光照/阴影的材质 #

你给平面配置的MeshBasicMaterial是不受光照影响的基础材质，无法接收阴影效果。需要替换为支持光照计算的材质，比如MeshStandardMaterial（和球体使用的材质类型一致）：

// 原代码
const planMaterial = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide,
});

// 修改后
const planMaterial = new THREE.MeshStandardMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide,
});

2. 方向光的阴影相机范围未覆盖场景物体 #

DirectionalLight的阴影相机默认范围极小，没有包含你的球体和平面。需要手动调整阴影相机的参数，确保它能覆盖整个场景区域：

const directionLight = new THREE.DirectionalLight(0xffffff);
scene.add(directionLight);
directionLight.position.set(-30, 50, 0);
directionLight.castShadow = true;

// 添加以下代码扩展阴影相机范围
directionLight.shadow.camera.left = -40;
directionLight.shadow.camera.right = 40;
directionLight.shadow.camera.top = 40;
directionLight.shadow.camera.bottom = -40;
directionLight.shadow.camera.near = 1;
directionLight.shadow.camera.far = 100;

// 可选：添加阴影相机助手，方便可视化调试范围
const shadowHelper = new THREE.CameraHelper(directionLight.shadow.camera);
scene.add(shadowHelper);

另外还有个非功能性小问题：变量名spherMaterial存在拼写错误（应为sphereMaterial），不影响运行但建议修正以保持代码规范。

修复以上两点后，球体就能正常在平面上投射阴影了。

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