Aframe中glTF模型阴影透明度动画实现求助

针对你遇到的模型透明度动画生效但阴影仍显示的问题，可通过以下几种方式解决：

1. 扩展model-opacity脚本，同步控制阴影投射开关 #

核心思路是在修改模型材质透明度的同时，根据当前透明度值自动启用/禁用模型的castShadow属性，当透明度接近0时关闭阴影投射，恢复时重新开启。

修改后的model-opacity组件示例：

AFRAME.registerComponent('model-opacity', {
  schema: { default: 1.0 },
  init: function () {
    this.model = null;
    this.el.addEventListener('model-loaded', (e) => {
      this.model = e.detail.model;
      // 确保所有材质开启透明属性，让opacity生效
      this.traverseMaterials(this.model, (mat) => {
        mat.transparent = true;
      });
    });
  },
  update: function () {
    if (!this.model) return;
    const targetOpacity = this.data;
    // 遍历所有材质设置透明度
    this.traverseMaterials(this.model, (mat) => {
      mat.opacity = targetOpacity;
    });
    // 根据透明度阈值切换阴影投射
    this.el.setAttribute('castShadow', targetOpacity > 0.05);
  },
  // 递归遍历模型所有子物体的材质
  traverseMaterials: function (obj, callback) {
    if (obj.material) callback(obj.material);
    if (obj.children) obj.children.forEach(child => this.traverseMaterials(child, callback));
  }
});

2. 结合animation-manager同步阴影状态动画 #

如果你希望在动画序列中精确控制阴影的开关时机，可以在现有淡入淡出动画的前后，添加控制castShadow属性的动画：

比如在淡出动画完成后添加关闭阴影的动画，淡入前添加开启阴影的动画：

<a-entity 
  gltf-model="#yourModel"
  castShadow="true"
  animation-manager="
    animations: [
      { name: 'fadeOut', property: 'model-opacity', from: 1, to: 0, dur: 1000 },
      { name: 'disableShadow', property: 'castShadow', from: true, to: false, dur: 1 },
      { name: 'wait', delay: 2000 },
      { name: 'enableShadow', property: 'castShadow', from: false, to: true, dur: 1 },
      { name: 'fadeIn', property: 'model-opacity', from: 0, to: 1, dur: 1000 }
    ];
    sequence: fadeOut -> disableShadow -> wait -> enableShadow -> fadeIn;
    loop: true;
  "
></a-entity>

注意事项 #

• 如果模型使用多材质，必须确保所有材质都开启transparent属性，否则opacity修改可能不生效，阴影也无法同步隐藏。
• 若需要更平滑的阴影过渡效果（而非直接开关），可以尝试调整光源的shadow.intensity属性，但这会影响场景中所有物体的阴影，需谨慎使用。

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