javascript - three.js 不能玩透明webm？

Question

三个js都可以有透明素材，透明视频以webm的形式存在。我有一个透明的 webm 我正在尝试输入一种 Material ，但我得到了 2 个不令人满意的结果。

1. 没有透明度，即使 transparent = true

2. 这 - 透明度但质量差，使用视频本身作为 alpha 贴图:

代码:

var video = document.createElement( 'video' );
    //video.src = './src/images/sintel.mp4';
    video.src = './src/images/dancer1.webm';
    video.load(); // must call after setting/changing source
    video.preload = 'auto';
    video.autoload = true;
    // video.play();

    this.videoTex = video;


    var texture = new THREE.VideoTexture( video );
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.format = THREE.RGBFormat;

    var runnerMaterial = new THREE.MeshBasicMaterial( { map: texture, transparent: true, side:THREE.DoubleSide } );
    var runnerGeometry = new THREE.PlaneGeometry(5, 5, 1, 1);
    runnerMaterial.transparent = true;
    runnerMaterial.alphaMap = texture;
    // runnerMaterial.alphaMap.magFilter = THREE.NearestFilter;
    // runnerMaterial.alphaMap.wrapT = THREE.RepeatWrapping;
    // runnerMaterial.alphaMap.repeat.y = 1;
    var runner = new THREE.Mesh(runnerGeometry, runnerMaterial);

如何播放透明视频？

Answer 1

您不应使用 alphaMap = texture;，因为 alphaMap 读取绿色 channel 以确定不透明度，如 in the docs 所述.这就是为什么你会得到那种奇怪的透明度；它正在读取绿色 channel 。

您正在将格式设置为 THREE.RGBFormat(这已经是默认设置，您可以看到它 in its source code )，所以如果您希望考虑 alpha channel ，您'必须将该属性更新为 THREE.RGBAFormat；

最后，不要忘记将 Material 的 AlphaTest 属性设置为一个合理的值，也许 0.5 会起作用:https://threejs.org/docs/index.html#api/en/materials/Material.alphaTest