三.js视频纹理线框报错答案

【问题标题】：three.js video texture wireframe error三.js视频纹理线框报错
【发布时间】：2016-03-04 14:28:29
【问题描述】：

我正在尝试使用视频纹理将视频纹理映射到 three.js 中的几何图形，但它仅在我的材质上将线框设置为 true 时才有效（我看到视频在网格上播放，但使用线框）。一旦我把它变成假的，我什么也看不到（只是一块黑色的画布）。我想弄清楚为什么会这样，有什么想法吗？

我的视频是一个html标签：

<video id="videoV">
    <source src="shot13.mp4" type="video/mp4">
</video>

这是我的 javascript：

var renderer = new THREE.WebGLRenderer();

    video = document.getElementById( 'videoV' );
    texture = new THREE.VideoTexture( video );

    var material = new THREE.MeshLambertMaterial( {
        color: 0xffffff,
        map: texture, 
        **wireframe: true**
        } );

    geometry = new THREE.BoxGeometry(80, 800, 800);

    var plane = new THREE.Mesh( geometry, material);
    scene.add(plane);

【问题讨论】：

改用MeshBasicMaterial。
好主意，只是试过了，并没有改变任何东西。谢谢

标签： javascript video 3d three.js html5-video

【解决方案1】：

尝试更新以下行：

v = new THREE.VideoTexture( video );
texture = v.texture;

纹理是 VideoTexture 的成员。

【讨论】：

这是否意味着我需要先创建一个基本纹理，然后在其上创建一个视频纹理？我试过这个，但结果仍然是黑色的。

【解决方案2】：

我解决了。

问题是我没有在 BoxGeometry 中制作双面纹理。所以当我设置wireframe = "true"时，我看到立方体里面是黑色的。

这解决了它：

    var material = new THREE.MeshBasicMaterial( {
        map: texture, 
        side: THREE.DoubleSide
    } );

希望这对任何人都有帮助！

【讨论】：