将video texture 输出为纹理

首先需要html5 video的标签

 <video id="video" autoplay loop muted  controls>  // 这里的 loop muted 是自动播放静音的效果  controls是播放按钮
        <source src="lib/vido.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    </video>

然后需要加载视频资源 再将视频输出为纹理

        //添加立方体
        var geometry = new THREE.PlaneGeometry( 22, 12.5);

        var video = document.querySelector("#video");
        //通过video对象实例化纹理
        var texture = new THREE.VideoTexture(video);
        texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.format = THREE.RGBFormat;
        material = new THREE.MeshBasicMaterial( { map: texture } );
        //再将纹理和立方体加载到场景中
        scene.add(new THREE.Mesh(geometry, material));

本文借鉴了 这位大佬的文章