展厅屏幕播放宣传视频

接着前面视频纹理内容讲解，把宣传视频设置到展厅的屏幕模型上。

建模注意：表示的屏幕的Mesh

在建模时候，要注意，表示屏幕的网格模型要单独用一个Mesh表示，不要与别的模型合并在一起，要独立存在，这样方便后面通过代码设置纹理贴图。

给表示屏幕的模型随便起个名字就行，方便代码中获取，课程中命名电视。

twin.loader.load('./展厅.glb', function (gltf) {
    twin.scene.add(gltf.scene)
    // 代码中获取表示屏幕的模型
    const planeMesh = gltf.scene.getObjectByName('电视');
})

Blender与threejs对接工作

如果你对UV坐标有概念，应该明白UV坐标的值会影响图像纹理在网格模型上映射的效果。

当然你不了解UV也没关系，美术通过Blender提供展厅模型的时候，用一张图片，刚好填充满表示屏幕的Mesh即可，注意图像纹理本身不用特别设置，只要设置好UV坐标就行。

课程中展厅屏幕是一个矩形平面，如果是曲面平面，也一样可以适用。

设置视频纹理

宣传视频作为展厅屏幕的纹理。

const video = document.createElement('video')
video.loop = true
video.src = './医院宣传.mp4'
const texture = new THREE.VideoTexture(video)
texture.colorSpace = THREE.SRGBColorSpace
addEventListener('mousedown', () => {
    video.play()
})

twin.loader.load('./展厅.glb', function (gltf) {
    twin.scene.add(gltf.scene)
    // 代码中获取表示屏幕的模型
    const planeMesh = gltf.scene.getObjectByName('电视');
    // 宣传视频作为展厅屏幕的纹理    
    planeMesh.material = new THREE.MeshBasicMaterial({
        map:texture
    })
})

纹理属性.flipY

执行上面代码，你可以看到视频的方向上下颠倒了，你可以修改.flipY默认值解决。

texture.flipY=false;//颠倒视频上下方向