THREE.js项目阴影异常求助：模型或代码问题排查

代码层面排查 #

• 确认阴影启用状态：
  • 渲染器需开启阴影：renderer.shadowMap.enabled = true，建议搭配阴影类型优化：renderer.shadowMap.type = THREE.PCFSoftShadowMap
  • 光源要开启阴影投射：light.castShadow = true，同时调整阴影相机参数（light.shadow.camera.near/far/left/right/top/bottom），确保立方体完全处于阴影相机视锥体范围内
  • 立方体需设置接收阴影：cube.receiveShadow = true；若内部有投射阴影的物体，需给该物体设置castShadow = true
• 检查材质属性：
  • 必须使用支持光照与阴影的材质，比如MeshStandardMaterial、MeshPhongMaterial，禁用MeshBasicMaterial（无光照阴影支持）
  • 自定义着色器材质需确保正确处理阴影相关的uniform和varying变量
• 验证场景层级与遮挡：
  • 排查立方体内部是否有物体遮挡阴影投射路径；可临时设置material.side = THREE.DoubleSide，测试是否因面法线方向（默认向外）导致内部无法接收阴影

模型层面排查 #

• 检查模型拓扑与法线：
  • 用建模工具（如Blender）查看立方体内部面的法线方向，若法线向外需翻转；同时排查是否存在非流形几何、重叠面等异常拓扑
• 确认模型导出设置：
  • 导出时必须勾选法线、UV等数据，这些是阴影计算的必要条件
  • 确保GLTF/GLB等导出格式的配置正确，未丢失关键几何信息

快速定位测试 #

用THREE.js内置立方体替换现有模型，验证阴影是否正常：

const cubeGeo = new THREE.BoxGeometry(1, 1, 1);
const cubeMat = new THREE.MeshStandardMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(cubeGeo, cubeMat);
cube.receiveShadow = true;
scene.add(cube);

若内置立方体阴影正常，问题大概率在自定义模型；若仍异常，问题则出在代码配置。

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