Thteejs已有场景中使用CSS3DRenderer插入Vue视频操作组件

1，创建Vue视频组件

<template>
  <div id="surveillance-content">
    <div class="c-title">
      <div class="c-t-content">
        <div style="display:flex;">
          <div class="c-t-name">
            视频监控
          </div>
        </div>
        <div @click.stop="close">
          <img src="../assets/iconfont/guanbi.png" alt="" class="c-t-close">
        </div>
      </div>
    </div>
    <div id="video-player-container">
      <video id="video-player"
             ref="videoPlayer"
             @ready="onPlayerReady"
             controls="true"
             muted>
        <source :src="videoSrc" type="video/mp4">
      </video>
      <div id="container"/>
      <div class="controls">
        <div class="c-t-content-sx">
          <div class="c-t-content-sx-btn">
            上一个
          </div>
          <div class="c-t-content-sx-btn">
            下一个
          </div>
        </div>
        <div class="angle-control">
          <label>角度:</label>
          <input type="range" min="0" max="360" v-model="angle" @input="onAngleChange" />
        </div>
        <div class="angle-control">
          <label>灵敏度:</label>
          <input type="range" min="1" max="10" v-model="sensitivity" />
        </div>
        <div class="angle-control">
          <label>视角:</label>
          <input type="range" min="50" max="150" v-model="perspective" />
        </div>
        <div class="c-t-content-sxt">
          摄像头模拟
        </div>
        <div class="c-t-content-sx">
          <div class="c-t-content-sx-btn c-t-content-sxt-btn">
            全部
          </div>
          <div class="c-t-content-sx-btn c-t-content-sxt-btn">
            当前
          </div>
          <div class="c-t-content-sx-btn c-t-content-sxt-btn">
            取消
          </div>
        </div>
        <div class="c-t-content-sx">
          <div class="c-t-content-sx-btn c-t-content-sxt-btn">
            分布
          </div>
          <div class="c-t-content-sx-btn c-t-content-sxt-btn">
            退出
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import scene from "@/three/scene";
import {zoomInCamera} from "@/utils/zoomInCamera";
import camera from "@/three/camera";
import controls from "@/three/controls";
export default {
  name: "Surveillance",
  components: {
  },
  data() {
    return {
      isPlaying: false,
      videoSrc: './zhangyan-substation/video/videoPlane.mp4', // 替换为你的视频源
      angle: 0,
      sensitivity: 5,
      perspective: 100,
    }
  },
  mounted() {
  },
  methods: {
    close() {},
    onPlayerReady(player) {
      player.src({ type: 'video/mp4', src: this.videoSrc });
    },
    onAngleChange() {},
    videoPlayer(){
      if (videoPlayer) {
        videoPlayer.pause();
        videoPlayer.currentTime = 0;
      }
    }
  }
}
</script>
<style scoped>
#surveillance-content {
  width: 800px;
  height: 410px;
  transform-style: preserve-3d; 
  background-color: rgba(25, 33, 47);
  border: 1px solid rgba(84, 148, 173);
}

.c-title {
  display: flex;
  justify-content: space-between;
  border: 2px solid rgba(2, 164, 247, 0.3);
  line-height: 30px;
}

.c-t-content {
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px transparent solid;
  background: linear-gradient(90deg, rgba(2, 164, 247, 0.37), rgba(2, 164, 247, 0), rgba(2, 164, 247, 0.03));
}

.c-t-name {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #02A4F7;
}

.c-t-close {
  cursor: pointer;
  margin-top: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(81, 146, 173);
  background-color: rgba(81, 146, 173);
}
#video-player-container {
  position: relative;
  margin: 0 auto;
  display: flex;
}

.controls {
  margin-top: 30px;
  margin-left: 10px;
}

.angle-control{
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
#video-player{
  width: 72%;
  height: 375px;
}
.c-t-content-sx{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.c-t-content-sx-btn{
  width: 70px;
  cursor: pointer;
  height: 30px;
  font-size: 14px;
  border-radius: 5px;
  color: white;
  text-align: center;
  line-height: 30px;
  border: 1px solid rgba(60, 69, 76, 0.5);
}
.c-t-content-sxt{
  color: white;
  margin-bottom: 10px;
}
.c-t-content-sxt-btn{
  width: 50px;
}
</style>

封装CSS3DObject.js组件

import {CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import Surveillance from '../views/surveillance.vue';//引入Vue视频组件
import {createApp} from 'vue';
export function createCSS3DObject(x,y,z){
    let div = document.createElement('div');
    div.style.width = '820px';
    div.style.height = '430px';
    div.style.backgroundColor = 'rgba(0,0,0,0.5)';

    const app = createApp(Surveillance);
    app.mount(div);

    const iframe = document.createElement('iframe');
    iframe.style.width = '820px';
    iframe.style.height = '430px';
    iframe.style.border = '0px';

    iframe.appendChild(div);
    const css3DObject = new CSS3DObject(div);
    css3DObject.position.set(x, y, z);
    css3DObject.scale.set(0.005, 0.005, 0.005);
    css3DObject.rotation.y = Math.PI / 2;
    css3DObject.name = 'css3DObject';
    return css3DObject;
}

调用createCSS3DObject方法插添加到scene场景中

scene.add(createCSS3DObject(-69.2, -4.4, 26.6));//Vue组件通过参数传不过去所以没有进行传参

可以通过scene.getObjectByName方法对视频组件进行旋转隐藏等操作

let css3DObject = scene.getObjectByName('css3DObject');
css3DObject.visible = false;//没有从场景中删除的原因为重新加载消耗性能