MixVideo.js代码：

//视频融合

import * as THREE from '../build/three.module.js';
import { API } from '../js.my/API.js';
import { Msg } from '../js.my/Msg.js';

let api = new API();
let msg = new Msg();

let mesh;
let material;
let videoTexture;

let changeMaterialMap = () => {
    if (material && videoTexture) {
        material.map = videoTexture;
    }
};

function createVideoMesh(scene, fly, video, loadingVideo, mixVideoBounds, mixVideoCameraPosition, mixVideoCameraTarge) {

    videoTexture = new THREE.VideoTexture(video);
    videoTexture.minFilter = THREE.LinearFilter;
    videoTexture.magFilter = THREE.LinearFilter;
    videoTexture.format = THREE.RGBFormat;

    let loadingVideoTexture = new THREE.VideoTexture(loadingVideo);
    loadingVideoTexture.minFilter = THREE.LinearFilter;
    loadingVideoTexture.magFilter = THREE.LinearFilter;
    loadingVideoTexture.format = THREE.RGBFormat;

    let geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(mixVideoBounds[0].x, mixVideoBounds[0].y, mixVideoBounds[0].z));
    geometry.vertices.push(new THREE.Vector3(mixVideoBounds[1].x, mixVideoBounds[1].y, mixVideoBounds[1].z));
    geometry.vertices.push(new THREE.Vector3(mixVideoBounds[2].x, mixVideoBounds[2].y, mixVideoBounds[2].z));
    geometry.vertices.push(new THREE.Vector3(mixVideoBounds[3].x, mixVideoBounds[3].y, mixVideoBounds[3].z));

    let normal = new THREE.Vector3(0, 0, 1);

    let face0 = new THREE.Face3(0, 1, 2, normal);
    let face1 = new THREE.Face3(0, 2, 3, normal);
    geometry.faces.push(face0, face1);

    let t0 = new THREE.Vector2(0, 0);
    let t1 = new THREE.Vector2(1, 0);
    let t2 = new THREE.Vector2(1, 1);
    let t3 = new THREE.Vector2(0, 1);
    let uv1 = [t0, t1, t2];
    let uv2 = [t0, t2, t3];
    geometry.faceVertexUvs[0].push(uv1, uv2);

    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    material = new THREE.MeshBasicMaterial({
        map: loadingVideoTexture,
        color: 0xffffff,
        depthTest: false,
        transparent: true,
        opacity: 1.0
    });

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

    fly.moveCameraOnly(mixVideoCameraPosition, mixVideoCameraTarge)
}

function mixVideo(scene, fly, cameraIndexCode, mixVideoBounds, mixVideoCameraPosition, mixVideoCameraTarge) {
    msg.show("即将加载视频请稍等");
    mesh && scene.remove(mesh);

    //创建DOM
    if ($('#mixVideo').length == 0) {

        //video标签，外层div测试用
        let videoStr = `
            <div id="mixVideoDiv" style="display:none; z-index: -999999; position: absolute; float: left; top: 0; left: 0; background-color: #ff0000;">
                <video id="mixVideo" style="width:100px; height:100px;" loop="loop" poster="images/mix-video/loading.gif">
                    <source src="../../video/videoPlane.mp4" type="video/mp4">
                </video>
                <video id="loadingVideo" style="width:100px; height:100px;" loop="loop" >
                    <source src="images/mix-video/loading.mp4" type="video/mp4">
                </video>  
            </div>`

        $('body').append(videoStr);
    }

    let video = document.getElementById('mixVideo');
    let loadingVideo = document.getElementById('loadingVideo');
    let videoSource = $(video).find('source');

    //取流
    // api.getVideoUrl(cameraIndexCode, data => {
    //     createVideoMesh(scene, fly, video, loadingVideo, mixVideoBounds, mixVideoCameraPosition, mixVideoCameraTarge);
    //     hlsPlay(video, loadingVideo, data);
    // }, errMsg => {
    //     playTestMp4(scene, fly, video, loadingVideo, videoSource, mixVideoBounds, mixVideoCameraPosition, mixVideoCameraTarge);

    //     msg.show("取流失败：" + errMsg);
    // });

    //测试播放hls流
    let testUrl = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8';
    let testUrl2 = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
    createVideoMesh(scene, fly, video, loadingVideo, mixVideoBounds, mixVideoCameraPosition, mixVideoCameraTarge);
    hlsPlay(video, loadingVideo, testUrl);

}

/** 播放hls流 */
function hlsPlay(video, loadingVideo, url) {
    loadingVideo.play();

    if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, () => {

        });
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play();
        });
        hls.on(Hls.Events.ERROR, (event, data) => {

        });
        hls.on(Hls.Events.FRAG_LOADED, () => {
            changeMaterialMap();
        });
    } else {
        msg.show("您的浏览器不支持播放该视频流");
    }
}

function playTestMp4(scene, fly, video, loadingVideo, videoSource, mixVideoBounds, mixVideoCameraPosition, mixVideoCameraTarge) {
    loadingVideo.play();
    video.play();
    createVideoMesh(scene, fly, video, loadingVideo, mixVideoBounds, mixVideoCameraPosition, mixVideoCameraTarge);
    changeMaterialMap();
}

export { mixVideo }

View Code

涉及到的变量说明：

video 视频标签DOM

loadingVideo 视频加载出来前的loading动画，mp4格式

mixVideoBounds 播放视频的Geometry的四个顶点的坐标

mixVideoCameraPosition 场景相机position(PerspectiveCamera对象的position)

mixVideoCameraTarge 场景相机target(OrbitControls.js的OrbitControls对象的target)

效果图：

没有真实的视频，随便找了个在线的hls流