17. 视频作为纹理贴图VideoTexture

下面两节课：展厅中有一个屏幕需要展示宣传视频。

我们需要先了解threejs一个知识点，把一个视频作为网格模型Mesh的纹理贴图。

HTML5视频元素video

HTML5音频元素audio是用来播放音频文件的，视频元素video是用来播放视频文件的。

// 创建一个audio对象
const audio = document.createElement('audio');
audio.src = './背景音乐.wav';//设置音频文件路径
audio.loop = true;//循环播放
audio.volume = 0.5;//音量大小0~1
audio.play();//播放音频
audio.pause();//暂停播放

视频video和前面提到的音频audio方法或属性相似。

// 创建视频video对象
const video = document.createElement('video');
video.loop = true;//循环播放
video.src = "./医院宣传.mp4";//设置视频文件路径
video.volume = 0.5;//音量大小0~1
video.play();//播放视频
video.pause();//暂停播放

如果你想了解video更多属性或方法，可以查询html5相关文档。

创建一个视频对象video

在HelloWorld.vue文件创建一个视频对象video。

const video = document.createElement('video');
video.loop = true;//循环播放

课件提供了一个mp4格式的视频文件医院宣传.mp4,你可以放到vue项目public文件下，然后设置视频的路径属性src即可。

video.src = "./医院宣传.mp4";//设置视频文件路径

把视频作为Mesh的颜色贴图.map

随便创建一个矩形Mesh，用来测试视频作为纹理的功能。

const geometry = new THREE.PlaneGeometry(4, 2);
const material = new THREE.MeshBasicMaterial({
    color:0x00ffff
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.y=1;

twin.scene.add(mesh)

把video对象，转化为纹理贴图，然后作为map属性的值。

// video对象，转化为纹理贴图
const texture = new THREE.VideoTexture(video);
const material = new THREE.MeshBasicMaterial({
    map:texture
});

这时候，你可以看到视频作为纹理成功了，只是视频还没有播放。

播放视频

注意：有些浏览器有限制，不能直接代码video.play()自动播放音频，可以通过用户交互触发，比如鼠标点击事件，执行video.play()

//鼠标事件触发视频播放
addEventListener('mousedown', () => {
    video.play();
});