使用 A-Frame 和 Three.js 实现视频透明度

Question

我正在从 A-Frame Github 页面转发 this open issue，希望有些人可能知道这个问题是怎么回事。它仍然不适用于 A-Frame 1.0.3，我真的不知道在哪里搜索。关于 Github 问题有两个示例，一个使用 A-Frame 0.8.0，另一个使用 A-Frame 0.9.0。 javascript 控制台中绝对没有警告或信息，因此很难找到问题所在。

在 0.8.0 版上，它使用了 Three v90，在 0.9.0 版上，它使用了 v101。所以也许在这两个版本之间做了一些事情，但我不明白是什么。

有没有人找到在最新版本的 A-Frame 和/或 Three.js 上使用透明视频的方法？

感谢您的帮助:)

Answer 1

分配的纹理格式似乎没有alpha通道（THREE.RGBFormat，您可以记录并检查值here）。

您可以通过将视频纹理的格式更改为THREE.RGBAFormat来解决此问题：

videoTexture.format = THREE.RGBAFormat

在包含如下修复的自定义组件中：

// wait until the material is ready
this.el.addEventListener('materialtextureloaded', e => {
   // grab the material
   let material = this.el.getObject3D("mesh").material;
   // swap the format
   material.map.format = THREE.RGBAFormat;
   material.map.needsUpdate = true;
})

工作故障here。