邓洁 : 隧道模型合并

package.json

@@ -9,14 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.4.0",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.5",
+    "js-cookie": "^3.0.5",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.35",
     "sass": "^1.62.1",
     "scss": "^0.2.4",
-    "js-cookie": "^3.0.5",
+    "three": "^0.159.0",
     "unplugin-icons": "^0.16.1",
     "vite-plugin-inspect": "^0.7.26",
     "vue": "^3.2.47",

src/assets/styles/tags/index.css

@@ -0,0 +1,89 @@
+canvas {
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  z-index: 100;
+}
+
+#tag {
+  height: 300px;
+  width: 200px;
+  background-color: rgba(236, 236, 236, 0.836);
+  position: absolute;
+  z-index: 999;
+  border-radius: 10px;
+  padding: 5px;
+  display: block;
+}
+#tag2 {
+  height: 300px;
+  width: 200px;
+  background-color: rgba(236, 236, 236, 0.836);
+  position: absolute;
+  z-index: 999;
+  border-radius: 10px;
+  display: block;
+  padding: 5px;
+}
+#tag3 {
+  height: 300px;
+  width: 200px;
+  background-color: rgba(236, 236, 236, 0.836);
+  position: absolute;
+  z-index: 999;
+  display: block;
+  border-radius: 10px;
+  text-align: center;
+}
+
+img {
+  width: 50px;
+}
+.title {
+  height: 20px;
+}
+.option-btn {
+  height: 40px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 10px;
+}
+.divice-list {
+  height: 240px;
+}
+.divice-list ul {
+  height: 100%;
+  padding: 7px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  align-content: first baseline;
+}
+.divice-list ul li {
+  border-radius: 5px;
+
+  overflow: hidden;
+  cursor: pointer;
+}
+
+#li-active {
+  background: red;
+}
+#view {
+  width: 260px;
+  height: 400px;
+  position: absolute;
+  background-color: rgb(246, 248, 250);
+  /* opacity: 0.5; */
+  border-radius: 10px;
+  z-index: 10;
+  right: 0;
+  top: 0;
+  margin: 5px 5px 0px 0px;
+  padding: 10px;
+}
+input {
+  width: 180px;
+  margin: 10px 3px 10px 0px;
+}

src/components/HelloWorld.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/components/content/tunnelScene/TunnelScene.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="scene" ref="content">
+    <dev-info ref="info" dev-name="no" dev-state="noState" />
+    <edit-dev ref="edit" @check-dev="handleCheckDev" />
+  </div>
+</template>
+
+<script setup>
+import * as three from "three";
+import ThreeDScene from "./sceneClass/demo.js";
+
+// 导入模模型加载器
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import * as TWEEN from "three/examples/jsm/libs/tween.module";
+import {
+  CSS3DRenderer,
+  CSS3DObject,
+  CSS3DSprite,
+} from "three/addons/renderers/CSS3DRenderer.js";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+
+import DevInfo from "./childComp/DevInfo.vue";
+import EditDev from "./childComp/EditDev.vue";
+import { onMounted, ref } from "vue";
+
+// 获取html标签跟随组件
+const content = ref(null);
+const info = ref(null);
+const edit = ref(null);
+
+const loader = new OBJLoader();
+// 模版挂载后
+onMounted(handleMounted);
+// 处理回调
+async function handleMounted() {
+  const doms = [info.value.$el, edit.value.$el];
+  const demo = new ThreeDScene(three, content.value);
+  demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.glb");
+  demo.addOrbitControls(OrbitControls);
+  demo.addTween(TWEEN);
+  demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
+  demo.addOBJLoader(OBJLoader);
+  demo.loadeOBJModel();
+
+  // 初始化设备模型
+
+  try {
+    const deviceList = [];
+    let result = await loadModel("../../../../public/devicesModel/Camera.obj");
+    deviceList.push(result);
+    result = await loadModel("../../../../public/devicesModel/box_device.obj");
+    deviceList.push(result);
+    result = await loadModel("../../../../public/devicesModel/dev2.obj");
+    deviceList.push(result);
+    result = await loadModel("../../../../public/devicesModel/dev3.obj");
+    deviceList.push(result);
+  } catch (e) {}
+  // demo.initDevicesModel();
+}
+
+function loadModel(path) {
+  return new Promise((resolve, reject) => {
+    loader.load(
+      path,
+      (obj) => {
+        resolve(obj);
+      },
+      (xhr) => {},
+      (err) => {
+        reject(err);
+      }
+    );
+  });
+}
+</script>
+
+<style lang="scss" scope>
+#scene {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+}
+</style>

src/components/content/tunnelScene/childComp/DevInfo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div id="dev-info">
+    <div class="title">设备属性</div>
+    <div class="name">
+      <span>设备名称:</span><span>{{ devName }}</span>
+    </div>
+    <div class="state-info">
+      <span>设备状态:</span><span>{{ devState }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 接受参数
+defineProps({
+  devName: String,
+  devState: String,
+});
+</script>
+
+<style lang="scss" scoped>
+#dev-info {
+  height: 300px;
+  width: 200px;
+  background-color: rgba(236, 236, 236, 0.836);
+  position: absolute;
+  z-index: 999;
+  border-radius: 10px;
+  padding: 5px;
+  display: block;
+  .title {
+    height: 20px;
+  }
+}
+</style>

src/components/content/tunnelScene/childComp/EditDev.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="edit-dev">
+    <div class="title">编辑设备</div>
+    <div class="divice-list">
+      <ul>
+        <li
+          v-for="(item, key) of devicesList"
+          :key="key"
+          @click="checkDev(key)"
+        >
+          <img :src="item.devImgUrl" />
+          <div>{{ item.devName }}</div>
+        </li>
+      </ul>
+    </div>
+    <div class="option-btn">
+      <button @click="removeDev">移除设备</button>
+      <button @click="addDev">添加设备</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, onMounted, ref } from "vue";
+// 定义需要发射的事件
+const emit = defineEmits([
+  "initLoadDevicesModel",
+  "checkDev",
+  "addDev",
+  "removeDev",
+]);
+onMounted(initDevicesModel);
+//  挂载后加所有的设备模型
+function initDevicesModel() {
+  emit("initLoadDevicesModel");
+}
+
+const devItem = {
+  devName: "传感器",
+  devImgUrl: "../../../../../public/images/camera.jpg",
+};
+const list = [devItem, devItem, devItem, devItem];
+
+const devicesList = reactive(list);
+const checkIndex = ref(0);
+//选择设备
+function checkDev(key) {
+  checkIndex = key;
+  emit("checkDev", key); //携带参数发射事件
+}
+// 添加设备
+function addDev() {
+  emit("addDev");
+}
+//删除设备
+function removeDev() {
+  emit("removeDev");
+}
+</script>
+
+<style lang="scss" scoped>
+#edit-dev {
+  height: 300px;
+  width: 200px;
+  background-color: rgba(236, 236, 236, 0.836);
+  position: absolute;
+  z-index: 999;
+  display: block;
+  border-radius: 10px;
+  text-align: center;
+  img {
+    width: 50px;
+  }
+  .title {
+    height: 20px;
+  }
+  .option-btn {
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: 10px;
+  }
+  .divice-list {
+    height: 240px;
+  }
+  .divice-list ul {
+    height: 100%;
+    padding: 7px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 7px;
+    align-content: first baseline;
+  }
+  .divice-list ul li {
+    border-radius: 5px;
+
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  #li-active {
+    background: red;
+  }
+}
+</style>

src/components/content/tunnelScene/sceneClass/addDevice/index.js

@@ -0,0 +1,30 @@
+export function addDev(devId) {
+  if (!this.checkDevId) {
+    alert("请选择设备");
+    return;
+  }
+  const devModel = this.devMap.get(devId).clone();
+  handleLoadedDevice.call(this, devModel);
+}
+
+function handleLoadedDevice(model) {
+  if (!this.targetPoint) return;
+  //获取定位位置
+  const wp = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
+  model.position.copy(wp);
+  this.targetPoint.visible = false;
+
+  this.scene.add(model);
+  if (model.name === "camera") {
+    model.translateX(-5);
+    model.translateZ(4);
+    model.translateY(-0.5);
+  }
+  // 添加的信息请求或初始化的信息
+  this.targetPoint.info = {
+    name: "摄像头",
+    state: "未开启",
+    devId: model.id,
+  };
+  this.targetPoint.hasDevice = true;
+}

src/components/content/tunnelScene/sceneClass/checkDevModel/index.js

@@ -0,0 +1 @@
+export function checkDevModel() {}

src/components/content/tunnelScene/sceneClass/checkTag/index.js

@@ -0,0 +1,36 @@
+/**
+ *
+ * @param {Vector3} Vec3 出现位置
+ */
+
+export function checkAnimation(Vec3 = new this.THREE.Vector3(), size = 0.3) {
+  // 先清空group
+  if (this.group) {
+    if (Vec3.x === this.group.position.x && Vec3.z === this.group.position.z) {
+      return;
+    }
+    this.scene.remove(this.group);
+  }
+
+  // 创建一个group
+  this.group = new this.THREE.Group();
+  //  创建一个圆柱
+  const cylinder = new this.THREE.CylinderGeometry(0.5, 0.5, 3, 32);
+  const material = new this.THREE.MeshBasicMaterial({ color: "#0dbc79" });
+  const cylinderMesh = new this.THREE.Mesh(cylinder, material);
+  const header = new this.THREE.CylinderGeometry(1, 0.1, 3, 32);
+  const headerMesh = new this.THREE.Mesh(header, material);
+  headerMesh.position.set(0, -3, 0);
+  this.group.add(cylinderMesh, headerMesh);
+  this.group.position.set(Vec3.x, Vec3.y + 2, Vec3.z);
+
+  //   创建动画
+  this.checkAnimationTween = new this.TWEEN.Tween(this.group.position);
+  this.checkAnimationTween.to({ y: this.group.position.y + 1 }, 500);
+  //   循环动画
+  this.checkAnimationTween.repeat(Infinity);
+  this.checkAnimationTween.yoyo(true);
+  this.checkAnimationTween.start();
+  this.group.scale.set(size, size, size);
+  this.scene.add(this.group);
+}

src/components/content/tunnelScene/sceneClass/demo.js

@@ -0,0 +1,456 @@
+import { handleLClick } from "./handleRLclick/handleLclick";
+import { handleRClick } from "./handleRLclick/handleRclick";
+import { handleDBLClick } from "./handleDBLclick";
+import { checkAnimation } from "./checkTag";
+import {
+  handleEndChange,
+  handleStartChange,
+} from "./handleOrbitControlsChange";
+import { saveState, resetState } from "./viewBack";
+
+import { addDev } from "./addDevice";
+import { removeDev } from "./removeDevice";
+import { checkDevModel } from "./checkDevModel";
+export default class Demo {
+  // 摄像机看向位置
+  origin = null;
+  //附着点的模型
+  points = [];
+  //设备模型数组
+  deviceModels = [];
+  constructor(three, mountedElement) {
+    // 外部引入匿名函数
+    this._handleLClick = handleLClick;
+    this._handleRClick = handleRClick;
+    this._handleDBLClick = handleDBLClick;
+    this._checkAnimation = checkAnimation;
+    this._saveSate = saveState;
+    this._resetState = resetState;
+    this._removeDev = removeDev;
+
+    this.THREE = three;
+    this.mountedElement = mountedElement;
+    //初始化场景
+    this.scene = new this.THREE.Scene();
+    // 初始化摄像机
+    this.camera = new this.THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+
+    this.camera.position.z = 130;
+    this.camera.position.y = 35;
+    this.camera.position.x = 40;
+
+    this.camera.lookAt(0, 0, 1000);
+    // 初始化渲染器
+    this.renderer = new this.THREE.WebGLRenderer({
+      // 抗锯齿
+      antialias: true,
+    });
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.domElement.style.position = "absolute";
+    this.mountedElement.appendChild(this.renderer.domElement);
+    // 创建渲染帧
+    this.render = () => {
+      this.__renderScope();
+      requestAnimationFrame(this.render);
+    };
+    this.render();
+    this.canvasResize();
+    this.addXYZ();
+
+    this.HTMLTagEventListener();
+
+    this.bindRightPlaneInfo();
+  }
+  //渲染函数作用域(这里主要写渲染帧内操作)
+  __renderScope() {
+    this.renderer.render(this.scene, this.camera);
+    // 轨道控制器更新
+    if (this.orbitControls) {
+      this.orbitControls.update();
+    }
+
+    // 摄像头移动动画
+    if (this.cameraPositionTween) {
+      this.cameraPositionTween.update();
+    }
+
+    //html标签渲染
+    if (this.CSS2Renderer) {
+      this.CSS2Renderer.render(this.scene, this.camera);
+    }
+    // 选中标签动画渲染
+    if (this.checkAnimationTween) {
+      this.checkAnimationTween.update();
+    }
+    // 视角重置动画
+    if (this.resetViewAngleAnimation) {
+      this.resetViewAngleAnimation.update();
+    }
+    //视角回退动画
+    if (this.viewSateResetAnimation) {
+      this.viewSateResetAnimation.update();
+    }
+    // 视角跟随动画
+    if (this.intoPointAnimation) {
+      this.intoPointAnimation.update();
+    }
+  }
+
+  // 添加世界坐标系
+  addXYZ() {
+    // const axesHelper = new this.THREE.AxesHelper(100);
+    // this.scene.add(axesHelper);
+  }
+
+  // 屏幕自适应
+  canvasResize() {
+    window.addEventListener("resize", () => {
+      this.camera.aspect = window.innerWidth / window.innerHeight;
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+      this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+  }
+
+  // 模型加载
+  /**
+   * @param {Object}  GLTFLoader 模型加载器
+   * @param {String} path 模型资源路径
+   */
+  loadModel(GLTFLoader, path) {
+    return new Promise((resolve, reject) => {
+      this.gltfloader = new GLTFLoader();
+      this.gltfloader.load(
+        "../../../../../public/tunnelModel/chanel.glb",
+        (gltf) => {
+          gltf.scene.traverse((child) => {
+            this._forModels(child);
+          });
+          this.scene.add(gltf.scene);
+
+          // 加载完后可执行函数
+          this._afterLoaded(gltf.scene);
+          resolve(gltf);
+        },
+        (xhr) => {
+          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+        },
+        (error) => {
+          console.log(error);
+          reject(error);
+        }
+      );
+    });
+  }
+  // 模型加载完函数
+  _afterLoaded() {
+    // 可以进行选中
+    this._hoverModel(this.points);
+    // 可以进行点击
+    this._ClickModel(this.points);
+  }
+
+  // 在此方法中对模型批量操作
+  _forModels(child) {
+    // 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
+    if (child.isMesh && /^point+/.test(child.name)) {
+      this.points.push(child);
+      // 改变为基础材质
+      child.material = new this.THREE.MeshBasicMaterial();
+
+      // 遍历一个属性是否存在设备
+      child.hasDevice = false; //初始化
+    }
+  }
+
+  // 添加轨道控制器
+  /**
+   * @param {Object} OrbitControls 轨道控制器
+   */
+  addOrbitControls(OrbitControls) {
+    this.orbitControls = new OrbitControls(
+      this.camera,
+      this.renderer.domElement
+    );
+
+    //限制轨道控制器的视角变化
+    this.orbitControls.maxPolarAngle = Math.PI * (3 / 5);
+    // 监听控制器变化
+    this.orbitControls.addEventListener("end", handleEndChange.bind(this));
+    this.orbitControls.addEventListener("start", handleStartChange.bind(this));
+  }
+  /**
+   * @param {Class} Tween 添加补间动画
+   */
+
+  addTween(Tween) {
+    this.TWEEN = Tween;
+  }
+
+  /***
+   * 鼠标移入可以高亮的模型
+   *@param {Array} hoverModels 需要高亮的模型
+   */
+  _hoverModel(hoverModels) {
+    this.renderer.domElement.addEventListener("mousemove", (e) => {
+      const mouse = new this.THREE.Vector2();
+      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+      const raycaster = new this.THREE.Raycaster();
+      raycaster.setFromCamera(mouse, this.camera);
+      const intersects = raycaster.intersectObjects(hoverModels);
+      if (intersects.length > 0) {
+        if (!this.preHover) {
+          this.preHover = intersects[0].object;
+        } else {
+          this.preHover.material.color.set("white");
+          this.preHover = intersects[0].object;
+        }
+
+        intersects[0].object.material.color.set("red");
+        const tagP = intersects[0].object.getWorldPosition(
+          new this.THREE.Vector3()
+        );
+
+        this._checkAnimation(tagP);
+      } else {
+        if (!this.preHover) return;
+        this.preHover.material.color.set("white");
+      }
+    });
+  }
+  /**
+   * @param {Array} isClickModels 可以进行点击的模型吧
+   */
+  _ClickModel(isClickModels) {
+    // 点击两次处理事件
+    this.renderer.domElement.addEventListener(
+      "dblclick",
+      this.__handleListenerDBLClickEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
+    );
+    // 点击一次时处理时间
+    this.renderer.domElement.addEventListener(
+      "mousedown",
+      this.__handleListenerClickRLEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
+    );
+  }
+  // 处理点击2次触发事件事件
+  __handleListenerDBLClickEvent(isClickModels, e) {
+    // 如果监听到双击则清空单次点击事件
+    clearTimeout(this.EventTimer);
+    //最后一个是监听器默认参数
+    const mouse = new this.THREE.Vector2();
+    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+    const raycaster = new this.THREE.Raycaster();
+    raycaster.setFromCamera(mouse, this.camera);
+    const intersects = raycaster.intersectObjects(isClickModels);
+    // 取消定位的视角返回初始化
+    if (intersects.length === 0) {
+      this.clearTagsObj();
+      this._resetState();
+      return;
+    }
+    //  处理连续双击击事件
+    this._handleDBLClick(intersects[0].object);
+  }
+
+  // 处理点击左右键触发的事件
+  __handleListenerClickRLEvent(isClickModels, e) {
+    clearTimeout(this.EventTimer);
+    this.EventTimer = setTimeout(() => {
+      const mouse = new this.THREE.Vector2();
+      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+      const raycaster = new this.THREE.Raycaster();
+      raycaster.setFromCamera(mouse, this.camera);
+      const intersects = raycaster.intersectObjects(isClickModels);
+      if (intersects.length === 0) return;
+      this.setBoxHelper(intersects[0].object);
+
+      // 处理点击左右键事件
+      if (e.button === 0) {
+        this._handleLClick(intersects[0].object);
+      } else if (e.button === 2) {
+        this._handleRClick(intersects[0].object);
+      }
+    }, 400);
+  }
+
+  // 添加css3Renderer
+  addCSS3Renderer(CSS2Renderer, CSS2DObject, [infoDom, editDom]) {
+    this.CSS2Renderer = new CSS2Renderer();
+    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
+    this.CSS2Renderer.render(this.scene, this.camera);
+
+    this.mountedElement.appendChild(this.CSS2Renderer.domElement);
+
+    // 初始化html标签
+    this.tagHtml = infoDom;
+    this.tag2Html = infoDom;
+    this.tag3Html = editDom;
+    this.CSS2DObject = CSS2DObject;
+    // 创建html标签模型
+    this.tagCSS2DObj = new CSS2DObject(this.tagHtml);
+    this.tag2CSS2DObj = new CSS2DObject(this.tag2Html);
+    this.tag3CSS2DObj = new CSS2DObject(this.tag3Html);
+    // 设置该标签初始化透明
+
+    this.tagCSS2DObj.element.style.display = "none";
+    this.tag2CSS2DObj.element.style.display = "none";
+    this.tag3CSS2DObj.element.style.display = "none";
+    this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
+    this.tag2CSS2DObj.scale.set(0.1, 0.1, 0.1);
+    this.tag3CSS2DObj.scale.set(0.1, 0.1, 0.1);
+
+    this.tagCSS2DObj.scale.set(3, 3, 3);
+  }
+  clearTagsObj() {
+    if (this.preDBLModel) {
+      this.preDBLModel.remove(this.tagCSS2DObj);
+    }
+    // 所有标签看不见
+    this.scene.remove(this.tag2CSS2DObj);
+    this.scene.remove(this.tag3CSS2DObj);
+    // 删除标记动画
+    this.scene.remove(this.group);
+  }
+  /**
+   * @param {Array} paths 所有设备模型的路径
+   */
+  addDeviceModels(paths) {
+    const gltfloader = this.gltfloader;
+    load(paths);
+    function load(paths, current = 0) {
+      return new Promise((resolve, reject) => {
+        // try {
+        gltfloader(paths[current], (deviceModel) => {
+          this.deviceModels.push(deviceModel);
+          current++;
+          console.log(deviceModel);
+          load(paths, current);
+          if (current > paths.length) {
+            resolve("ok");
+          }
+        });
+        // } catch (e) {
+        //   reject(new Error("加载异常"));
+        // }
+      });
+    }
+  }
+  // 附着点选中线宽包围
+  setBoxHelper(obj) {
+    //  判断场景是否纯在该3d对象
+    if (this.scene.getObjectByName("boxHelper")) {
+      const preModel = this.scene.getObjectByName("boxHelper");
+      this.scene.remove(preModel);
+    }
+    const boxHelper = new this.THREE.BoxHelper(obj, 0xffff00);
+    boxHelper.name = "boxHelper";
+    this.scene.add(boxHelper);
+  }
+  /**
+   *@param {Class} DRACOLoader 解压器
+   * @param {String} dracoPath 解压器路径
+   */
+  addDARCOLoder(DRACOLoader, dracoPath) {
+    this.DRAC = new DRACOLoader();
+    this.DRAC.setDecoderPath(dracoPath);
+    //给模型加载器添解压器
+    this.gltfloader.setDRACOLoader(this.DRAC);
+  }
+
+  // 监听tagHTML标签内事件
+  HTMLTagEventListener() {
+    // this.addBtn = document.querySelector("#add-model");
+    // this.removeBtn = document.querySelector("#remove-model");
+    // //开启监听
+    // this.addBtn.addEventListener("click", addDev.bind(this));
+    // this.removeBtn.addEventListener("click", removeDev.bind(this));
+    // //监听选择设备
+    // this.devList = document.querySelector(".divice-list ul");
+    // this.devList.addEventListener("click", checkDevModel.bind(this));
+  }
+
+  /**
+   * @param {Meshes} meshes gltf加载过后的模型数组
+   */
+  initDevicesModel(meshes) {
+    this.deviceList = [];
+    meshes.forEach((mesh) => {
+      this.deviceList.push(mesh);
+    });
+    console.log(this.deviceList);
+  }
+  /**
+   * @param {String} devId 添加的设备ID
+   */
+  addDevice(devId) {
+    addDev.bind(this, devId);
+  }
+  /**
+   * @param {String} devId 删除的设备ID
+   */
+  removeDevice(devId) {
+    removeDev.bind(this, devId);
+  }
+  //获取右边面板信息
+  bindRightPlaneInfo() {
+    // this.chanelLengthInput = document.querySelector("#chanel-length-input");
+    // this.aspectValue = document.querySelector("#aspect-length-value");
+    // this.chanelLengthInput.addEventListener("input", (e) => {
+    //   // console.log(e.target.value);
+    // });
+  }
+  /**
+   * @param {OBJLoader} objloader 模型加载器
+   */
+  addOBJLoader(objloader) {
+    this.OBJLoader = new objloader();
+  }
+  // 先把模型加载完成
+  loadeOBJModel() {
+    this.devMap = new Map();
+    this.OBJLoader.load(
+      "../../../../../public/devicesModel/Camera.obj",
+      callBack.bind(this, "dev_1")
+    );
+    this.OBJLoader.load(
+      "../../../../../public/devicesModel/Camera.obj",
+      callBack.bind(this, "dev_2")
+    );
+    this.OBJLoader.load(
+      "../../../../../public/devicesModel/Camera.obj",
+      callBack.bind(this, "dev_3")
+    );
+    this.OBJLoader.load(
+      "../../../../../public/devicesModel/Camera.obj",
+      callBack.bind(this, "camera")
+    );
+    function callBack(param, model) {
+      switch (param) {
+        case "dev_1":
+          model.scale.set(0.2, 0.2, 0.2);
+          break;
+        case "dev_2":
+          model.scale.set(0.2, 0.2, 0.2);
+          break;
+        case "dev_3":
+          model.scale.set(0.1, 0.1, 0.1);
+          break;
+        case "camera":
+          model.scale.set(0.7, 0.7, 0.7);
+
+          model.name = "camera";
+          break;
+      }
+      this.devMap.set(param, model);
+    }
+  }
+}

src/components/content/tunnelScene/sceneClass/handleDBLclick/index.js

@@ -0,0 +1,99 @@
+export function handleDBLClick(e) {
+  this._saveSate();
+  // 注意位置不能改变
+  this.clearTagsObj();
+
+  this.preDBLModel = e;
+  //获取模型世界坐标位置
+  const modelP = new this.THREE.Vector3();
+  e.getWorldPosition(modelP);
+  this._checkAnimation(modelP);
+
+  this.setBoxHelper(e);
+  if (/l$/.test(e.name)) {
+    //匹配单个隧道左边附着点
+    modelP.x += 5;
+    modelP.y -= 5;
+    modelP.z += 10;
+
+    this.orbitControls.target = modelP;
+    this.cameraPositionTween = new this.TWEEN.Tween(this.camera.position);
+    this.cameraPositionTween.to(modelP, 400);
+    this.cameraPositionTween.start();
+
+    modelP.x -= 4;
+    modelP.y += 4;
+    modelP.z -= 20;
+  } else if (/r$/.test(e.name)) {
+    //匹配单个隧道右边附着点
+    modelP.x -= 5;
+    modelP.y -= 5;
+    modelP.z += 10;
+    this.orbitControls.target = modelP;
+    this.cameraPositionTween = new this.TWEEN.Tween(this.camera.position);
+    this.cameraPositionTween.to(modelP, 400);
+    this.cameraPositionTween.start();
+    modelP.x += 4;
+    modelP.y += 4;
+    modelP.z -= 20;
+  }
+  if (this.preTargetModel) {
+    this.preTargetModel.remove(this.tagCSS2DObj);
+  }
+  this.cameraPositionTween.onComplete(() => {
+    this.orbitControls.target = modelP;
+    this.camera.lookAt(modelP);
+    // 选中的物体闪梭(这里必需放在下一个函数之前，这里需要使用到下一个函数需要清空的上一个模型)
+    // handleModelFlash(e, this);
+
+    // 动画完成过后自动弹出标签
+    autoOutTag(e, this);
+    this.listenerEventFlag = false;
+  });
+}
+//点击模型视角位移过去后模型闪烁函数
+// function handleModelFlash(e, context) {
+//   if (context.timer) {
+//     clearInterval(context.timer);
+//     context.preTargetModel.material.color.set("white");
+//   }
+//   context.timer = setInterval(fun, 400);
+//   let flag = false;
+//   function fun() {
+//     if (flag) {
+//       e.material.color.set("red");
+//       flag = false;
+//     } else {
+//       e.material.color.set("white");
+//       flag = true;
+//     }
+//   }
+// }
+// 视角移动过去自动弹出标签
+function autoOutTag(targetModel, context) {
+  // 判断是否纯在设备
+  // if (targetModel.hasDevice) return;
+  context.preTargetModel = targetModel;
+  context.tagCSS2DObj.element.style.display = "block";
+  displayDevInfo(context, targetModel);
+  targetModel.add(context.tagCSS2DObj);
+  if (/l$/.test(targetModel.name)) {
+    context.tagCSS2DObj.position.set(150, 0, 700);
+  } else if (/r$/.test(targetModel.name)) {
+    context.tagCSS2DObj.position.set(-150, 0, 700);
+  }
+}
+
+function displayDevInfo(context, targetModel) {
+  if (!targetModel.info) {
+    // 因为标签内的内容共同使用所以附着点没有信心则清空信息
+    // context.tagCSS2DObj.element.children[1].children[1].innerHTML = "无";
+    // context.tagCSS2DObj.element.children[2].children[1].innerHTML = "无";
+    return;
+  }
+  console.log(targetModel.info);
+  context.tagCSS2DObj.element.children[1].children[1].innerHTML =
+    targetModel.info.name;
+  context.tagCSS2DObj.element.children[2].children[1].innerHTML =
+    targetModel.info.state;
+}

src/components/content/tunnelScene/sceneClass/handleOrbitControlsChange/index.js

@@ -0,0 +1,9 @@
+// 轨道控制器开始结束hook
+export function handleStartChange(e) {
+  // console.log("开始");
+}
+export function handleEndChange(e) {
+  //   围绕点到照相机的位置
+  // console.log("结束");
+  // console.log(this.camera.position);
+}

src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js

@@ -0,0 +1,71 @@
+export function handleLClick(targetPoint) {
+  this.clearTagsObj();
+  const worldPosition = new this.THREE.Vector3();
+  //获取附着点的世界坐标系
+  targetPoint.getWorldPosition(worldPosition);
+  this._checkAnimation(worldPosition);
+  // 显示左键属性栏
+  this.tag2CSS2DObj.element.style.display = "block";
+  // 设置标签位置
+  this.tag2CSS2DObj.position.set(
+    worldPosition.x,
+    worldPosition.y,
+    worldPosition.z
+  );
+
+  this.tag2CSS2DObj.translateY(-15);
+  this.tag2CSS2DObj.translateX(15);
+  displayDevInfo(this, targetPoint);
+  this.scene.add(this.tag2CSS2DObj);
+  intoAnimation.call(this, targetPoint);
+}
+
+function displayDevInfo(context, targetModel) {
+  if (!targetModel.info) {
+    // 因为标签内的内容共同使用所以附着点没有信心则清空信息
+    context.tag2CSS2DObj.element.children[1].children[1].innerHTML = "无";
+    context.tag2CSS2DObj.element.children[2].children[1].innerHTML = "无";
+    return;
+  }
+
+  context.tag2CSS2DObj.element.children[1].children[1].innerHTML =
+    targetModel.info.name;
+  context.tag2CSS2DObj.element.children[2].children[1].innerHTML =
+    targetModel.info.state;
+}
+
+function intoAnimation(targetPoint) {
+  const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
+  const positionOBj = this.camera.position;
+
+  const start = this.orbitControls.target;
+  this.intoPointAnimation = new this.TWEEN.Tween({
+    x: positionOBj.x,
+    y: positionOBj.y,
+    z: positionOBj.z,
+    xTarget: start.x,
+    yTarget: start.y,
+    zTarget: start.z,
+  });
+
+  this.intoPointAnimation.to(
+    {
+      x: worldP.x + 20,
+      y: worldP.y + 5,
+      z: worldP.z + 50,
+      xTarget: worldP.x,
+      yTarget: worldP.y,
+      zTarget: worldP.z,
+    },
+    600
+  );
+  this.intoPointAnimation.start();
+  this.intoPointAnimation.onUpdate((obj) => {
+    this.camera.position.set(obj.x, obj.y, obj.z);
+    this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
+    this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
+  });
+  this.intoPointAnimation.onComplete(() => {
+    this.camera.lookAt(worldP.x, worldP.y, worldP.z);
+  });
+}

src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js

@@ -0,0 +1,56 @@
+export function handleRClick(targetPoint) {
+  this.clearTagsObj();
+  // 全局临时标记该选中的模型;
+  this.targetPoint = targetPoint;
+  const worldPosition = new this.THREE.Vector3();
+  //获取附着点的世界坐标系
+  targetPoint.getWorldPosition(worldPosition);
+  this._checkAnimation(worldPosition);
+  // 显示左键属性栏
+  this.tag3CSS2DObj.element.style.display = "block";
+  // 设置标签位置
+  this.tag3CSS2DObj.position.set(
+    worldPosition.x,
+    worldPosition.y,
+    worldPosition.z
+  );
+
+  this.tag3CSS2DObj.translateY(-15);
+  this.tag3CSS2DObj.translateX(15);
+  this.scene.add(this.tag3CSS2DObj);
+
+  intoAnimation.call(this);
+}
+
+function intoAnimation() {
+  const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
+  const positionOBj = this.camera.position;
+
+  const start = this.orbitControls.target;
+  this.intoPointAnimation = new this.TWEEN.Tween({
+    x: positionOBj.x,
+    y: positionOBj.y,
+    z: positionOBj.z,
+    xTarget: start.x,
+    yTarget: start.y,
+    zTarget: start.z,
+  });
+
+  this.intoPointAnimation.to(
+    {
+      x: worldP.x + 20,
+      y: worldP.y + 20,
+      z: worldP.z + 50,
+      xTarget: worldP.x,
+      yTarget: worldP.y,
+      zTarget: worldP.z,
+    },
+    600
+  );
+  this.intoPointAnimation.start();
+  this.intoPointAnimation.onUpdate((obj) => {
+    this.camera.position.set(obj.x, obj.y, obj.z);
+    this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
+    this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
+  });
+}

src/components/content/tunnelScene/sceneClass/removeDevice/index.js

@@ -0,0 +1,20 @@
+export function removeDev() {
+  if (!this.targetPoint.hasDevice) {
+    alert("该附着点不存在设备");
+    return;
+  } else {
+    //  删除模型逻辑
+    const devId = this.targetPoint.info.devId;
+
+    const model = this.scene.getObjectById(devId);
+    this.scene.remove(model);
+
+    //   附着点可见
+    this.targetPoint.visible = true;
+    this.targetPoint.info = null;
+    //   按钮可否操作情况
+    this.addBtn.disabled = false;
+    this.removeBtn.disabled = true;
+    this.targetPoint.hasDevice = false;
+  }
+}

src/components/content/tunnelScene/sceneClass/viewBack/index.js

@@ -0,0 +1,29 @@
+/**
+ *
+ * @param {*} Vec3  保存单前摄像机位置状态
+ */
+export function saveState() {
+  //  保存当前摄像机位置
+  if (this.viewSate && this.viewSate.isSave) return;
+  this.viewSate = {
+    position: this.camera.position.clone(),
+    isSave: true,
+  };
+}
+/**
+ * 恢复摄像机状态
+ */
+export function resetState() {
+  if (this.viewSate && this.viewSate.isSave) {
+    this.viewSate.isSave = false;
+    //恢复原始的镜头指向
+    this.camera.lookAt(0, 0, 0);
+    this.orbitControls.target.set(0, 0, 0);
+    //创建动画
+    this.viewSateResetAnimation = new this.TWEEN.Tween(this.camera.position);
+    this.viewSateResetAnimation.to(this.viewSate.position, 800);
+    this.viewSateResetAnimation.start();
+    //清空boxHelper
+    this.scene.remove(this.scene.getObjectByName("boxHelper"));
+  }
+}

src/router/index.js

@@ -22,6 +22,15 @@ const routes = [
       title: '首页',
       breadcrumb: true
     }
+  },
+  {
+    path: '/socket',
+    name: 'socket',
+    component: () => import('@/views/socket/index.vue'),
+    meta: {
+      title: 'socket',
+      breadcrumb: true
+    }
   }
 ];
 

src/views/home/index.vue

@@ -1,10 +1,9 @@
 <template>
-home
+  <tunnel-scene />
 </template>
 
 <script setup>
+import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
 </script>
 
-<style scoped>
+<style lang="scss" scoped></style>
-
-</style>

src/views/socket/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="chat-box">
+      <div>
+        <span>请输入序列号: </span>
+        <el-input v-model="serialNumber" placeholder="请输入序列号" clearable></el-input>
+      </div>
+      <el-button type="primary" @click="initWebSocket">确认连接</el-button>
+      <el-button type="primary" @click="closeSocket">关闭连接</el-button>
+      <div class="socket-box">
+        <div v-for="item in data" ref="child">
+          <div v-if="item.type == 3">
+            <span style="color: #007bff">server send:</span>
+            <div>{{ item.cmd }}</div>
+          </div>
+          <div v-if="item.type == 4">
+            <span style="color: #28a745"> server receive:</span>
+
+            <div>{{ item.cmd }}</div>
+          </div>
+        </div>
+      </div>
+      <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
+    </div>
+    <div class="logout">
+      <el-button @click="handleLogout">退出登录</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from '@/store/userstore.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const serialNumber = ref('')
+let send = {
+  type: "ping"
+}
+let data = ref([])
+let customerSend = ref([])
+let token = getToken();
+const child = ref();
+watch(
+    () => data.value,
+    (newVal) => {
+      nextTick(() => {
+        child.value[newVal.length - 1].scrollIntoView(); // 关键代码
+      });
+    },
+    {
+      deep: true,
+    }
+);
+let socket = reactive('')
+const initWebSocket = () => {
+  // let wsUrl = `ws://192.168.31.175:8000/wstunnel/debug/${token}/${serialNumber.value}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${token}/${serialNumber.value}`
+  console.log(wsUrl)
+  socket = new WebSocket(wsUrl)
+  // 2. ws.send()给服务器发送信息
+  //连接发生错误的回调方法
+  socket.onerror = function () {
+    console.log("ws连接发生错误");
+  };
+  //连接成功建立的回调方法
+  socket.onopen = function () {
+    // let authInfo = {
+    //   // token: getToken(),
+    //   type: "auth",
+    //   cluster: "notice"
+    // }
+    // socket.send(JSON.stringify(authInfo))
+    console.log("ws连接成功");
+  }
+  //接收到消息的回调方法
+  socket.onmessage = function (event) {
+    data.value.push(JSON.parse(event.data))
+    // else {
+    //   customerSend.value.push(JSON.parse(event.data))
+    // }
+    console.log("服务器返回的信息: ", JSON.parse(event.data));
+  }
+  //连接关闭的回调方法
+  socket.onclose = function () {
+    // initWebSocket()
+    console.log("ws连接关闭");
+  }
+  // setInterval(() => {
+  //   socket.send(JSON.stringify(send))
+  // }, 30000)
+}
+const closeSocket = () => {
+  socket.close();
+}
+const handleLogout = () => {
+  authStore.userLogout()
+  router.push('/login')
+}
+const handleClear = () => {
+  data.value = []
+}
+// initWebSocket()
+</script>
+
+<style lang="scss" scoped>
+.chat-box {
+  width: 500px;
+  height: 600px;
+  border: 1px solid #ccc;
+  //overflow: auto;
+  padding: 10px;
+  margin: 10px;
+
+  .socket-box {
+    width: 475px;
+    height: 450px;
+    border: 1px solid #ccc;
+    overflow-y: auto;
+    margin-top: 10px;
+  }
+}
+
+.logout {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>