ThreeJS使用MeshDepthMaterial实现透明阴影时动画阴影不跟随问题

问题根源 #

你手动创建的MeshDepthMaterial默认没有开启动画相关的属性开关，骨骼蒙皮/形变目标的动画变换不会应用到深度材质的渲染计算中，导致阴影渲染用的深度图一直保留模型初始姿态的结果，不会跟随动画更新。
three.js默认自动生成的深度材质会自动同步原材质的动画配置，所以未替换自定义深度材质时阴影可以正常跟随动画移动。

修复方案 #

创建自定义深度材质时，根据你使用的动画类型开启对应配置即可：

• 骨骼蒙皮动画开启skinning: true
• 形变目标动画开启morphTargets: true、morphNormals: true

修改后的代码示例：

var customDepthMaterial = new THREE.MeshDepthMaterial( {
    depthPacking: THREE.RGBADepthPacking,
    alphaMap: alphaTex,
    alphaTest: 0.5,
    // 按需开启对应动画属性
    skinning: true,
    morphTargets: true
})
    
child.customDepthMaterial = customDepthMaterial;

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