three.js视频纹理线框错误

three.js video texture wireframe error

本文关键字：线框 错误 纹理 视频 js three      更新时间：2023-09-26

我正试图使用视频纹理将视频纹理映射到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);

尝试更新以下行：

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

该纹理是VideoTexture的成员。

我解决了它。

问题是我没有把纹理做成双面的，因为我在BoxGeometry里面。所以当我设置线框="true"时，我看到了立方体内部的黑色。

这解决了问题：

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

希望这能帮助到任何人！

相关文章：