threejs 摄像头视频流投影到模型上

注意 请使用高版本threejs 低版本有问题

其实就是将视频作为SpotLight的贴图 给SpotLight.map设置就好了 根据官方webgl_lights_spotlight改动

官方案例链接 https://threejs.org/examples/#webgl_lights_spotlight

.vue里

<template>
  <div>
      <div id="containerss"></div>

    <video id="spotLight_test_video" style="display:none;width: 100px;height: 100px" ref="videosmallone"
           preload="auto" muted autoplay type="rtmp/flv">
      <source src=""/>
    </video>
  </div>
</template>

<script>
import index from "./index.js";
export default index;
</script>

<style>
</style>

.js

import * as THREE from "three";
import Stats from 'three/examples/jsm/libs/stats.module.js';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js';
import flvjs from "flv.js";
// 可视化改变三维场景库
import {GUI} from "three/examples/jsm/libs/lil-gui.module.min.js";
let scene = null;
let camera = null;
let spotLight = null;
let renderer = null;
let lightHelper = null;
//性能统计对象
const stats = new Stats();
export default {
    data() {
        return {
            scene: null,
            camera: null,
            player: null,
            texture: null,
        };
    },
    mounted() {
        this.initss()
        this.initTextures()
        this.init()
        this.initModel()

    },
    beforeDestroy() {
        this.resetScene()
    },
    methods: {
        initModel(){
            const geometry = new THREE.PlaneGeometry( 40, 40 );
            const material = n