three.js - A-Frame 和 Three.js 的视频透明度

Question

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

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

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

感谢您的帮助:)

Answer 1

似乎分配的纹理格式没有 alpha channel (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 .