ThreeJS中导入的模型没有正常生成阴影解决办法

1. 背景问题描述

在一个Three.js项目中，我试图在场景中渲染一个导入的滑板模型，并希望它能在聚光灯下产生阴影。然而，在实际渲染时，我发现滑板并没有在地面上产生任何阴影。这是一个令人困惑的问题，因为其他对象（如基本的Three.js几何体）在同样的光照条件下可以正常产生阴影。

为了更好地说明这个问题，以下是我当时的核心代码：

<mesh ref={mesh} position={originalPosition} castShadow>
    <primitive object={obj} scale={1.5} />
</mesh>

在这段代码中，我使用了 <primitive> 标签来渲染一个从外部文件加载的OBJ模型，并确保了 <mesh> 标签具有 castShadow 属性，意味着该物体应该能够投射阴影。

2. 解决办法

经过一系列的排查和试验，最终找到了问题的解决方案。以下是关键的解决步骤：

if (obj) {
    obj.traverse((child) => {
        if (child instanceof THREE.Mesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
}

这段代码的核心思想是遍历导入模型的每一个子物体，并确保每一个子物体都设置了 castShadow 和 receiveShadow 属性。

3. 深入分析原因

导入的模型可能是一个复杂的物体，由多个子物体或子部分组成。在Three.js中，只有当一个物体的 castShadow 属性被设置为 true 时，它才会投射阴影。因此，即使我们为整体模型设置了 castShadow 属性，但如果模型的某个子部分没有设置这个属性，那么该子部分就不会投射阴影。

这也是为什么基本的Three.js几何体可以正常产生阴影，而导入的模型不能的原因。基本几何体是单一的物体，不包含子部分，所以当我们为其设置 castShadow 属性时，整个物体都会响应。而对于导入的模型，我们需要确保每一个子部分都被正确地设置。

---

希望这篇博客可以帮助其他遇到类似问题的开发者。如果您在使用Three.js时遇到了阴影问题，不妨检查一下模型的子部分是否都正确地设置了 castShadow 和 receiveShadow 属性。