唐润平：上线版,功能为待完善

src/components/content/tunnelScene/TunnelScene.vue

@@ -1,13 +1,24 @@
 <template>
-  <div id="scene" ref="content">
+  <div id="scene">
+    <div id="cvs" ref="content"></div>
     <dev-info ref="info" :devInfo="devInfo" />
-    <edit-dev ref="edit" @addDev="handleAddDev" @removeDev="handleRemoveDev" :hasDev="hasDevice" />
+    <edit-dialog
+      ref="edit"
+      @addEquipment="handleAddEqu"
+      @removeEquipment="handleRemoveEqu"
+      @cancel="handleCancel"
+      :hasDev="hasDevice"
+      :pointNum="pointNum"
+      pointGap="500"
+    />
   </div>
 </template>
 
 <script setup>
 import * as three from "three";
 import ThreeDScene from "./sceneClass/demo.js";
+import DevInfo from "./displayInfoComp/DevInfo.vue";
+import editDialog from "./editEquComp/editDialog.vue";
 
 // 导入模模型加载器
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -19,23 +30,28 @@ import {
   CSS3DObject,
   CSS3DSprite,
 } from "three/addons/renderers/CSS3DRenderer.js";
+// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
+import {
+  CSS2DRenderer,
+  CSS2DObject,
+} from "three/addons/renderers/CSS2DRenderer.js";
+
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
-import DevInfo from "./childComp/DevInfo.vue";
-import EditDev from "./childComp/EditDev.vue";
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref } from "vue";
 
-import { ElMessage } from "element-plus";
-// 获取html标签跟随组件
+// 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-const num = 10000;
 let demo; //定义demo全局变量
-const loader = new OBJLoader();
+// const loader = new OBJLoader();
+const loader = new GLTFLoader();
+let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
-// 模版挂载后
+
 onMounted(handleMounted);
-// 处理回调
+// 挂载后回调
 async function handleMounted() {
   const doms = [info.value.$el, edit.value.$el];
   demo = new ThreeDScene(three, content.value);
@@ -44,28 +60,20 @@ async function handleMounted() {
   demo.addTween(TWEEN);
   demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
   demo.setDistance(10);
-  lClickCallback(demo); //左键回调
-  rClickCallback(demo); //右键回调
+  lClickCallback(demo); //绑定左键回调
+  rClickCallback(demo); //绑定右键回调
+
   //加载HDR背景图片
-  demo.loadBackground(backColorSet)
+  demo.loadBackground(hdrLoader, backColorSet);
+
   // 初始化设备模型
   try {
     const deviceList = [];
-    let result = await loadModel("/devicesModel/Camera.obj");
+    let result = await loadModel("/devicesModel/fan.glb");
     deviceList.push(result);
-    modelEffectProcess(result);
-    result = await loadModel("/devicesModel/fan.obj");
+    result = await loadModel("/devicesModel/sensor.glb");
     deviceList.push(result);
-    modelEffectProcess(result);
-    result = await loadModel("/devicesModel/sensors.obj");
-    deviceList.push(result);
-    modelEffectProcess(result);
-    result = await loadModel("/devicesModel/sensors.obj");
-    deviceList.push(result);
-    modelEffectProcess(result);
-    result = await loadModel("/devicesModel/sensors.obj");
-    deviceList.push(result);
-    modelEffectProcess(result);
+
     // 给对象初加载设备模型
     demo.initDevicesModel(deviceList);
     console.info("设备模型加载完毕");
@@ -75,6 +83,7 @@ async function handleMounted() {
     console.log(err);
   }
 }
+
 // 每个模型加载回调
 function loadModel(path) {
   return new Promise((resolve, reject) => {
@@ -83,7 +92,7 @@ function loadModel(path) {
       (obj) => {
         resolve(obj);
       },
-      (xhr) => { },
+      (xhr) => {},
       (err) => {
         reject(err);
       }
@@ -91,15 +100,6 @@ function loadModel(path) {
   });
 }
 
-
-function modelEffectProcess(model) {
-  model.traverse((v) => {
-    v.material = new three.MeshBasicMaterial
-    v.material.color = new three.Color(0xC0C0C0)
-  })
-}
-
-
 let hasDevice = ref(true);
 let devInfo = reactive({
   meshId: null,
@@ -108,7 +108,7 @@ let devInfo = reactive({
   position: "无",
 });
 
-// 赋值功能
+// 对象建构赋值功能
 function editDevInfo(
   value = {
     meshId: null,
@@ -123,7 +123,7 @@ function editDevInfo(
   devInfo.position = value.position;
 }
 
-//点击左键返回附着点信息给组件
+//左键/双击左键回调函数
 function lClickCallback(demo) {
   //demo动态添加函数，为操作组件内部
   function displayDevInfo(targetPoint = null) {
@@ -138,10 +138,18 @@ function lClickCallback(demo) {
   demo.addFunction("displayDevInfo", displayDevInfo);
 }
 
-// 点击右键设备返回附着点对象
+let pointNum = ref(0);
+// 右键点击附着点后调函数
 function rClickCallback(demo) {
   function editDev(targetPoint = null) {
     hasDevice = targetPoint.hasDevice;
+    pointNum.value = Number(
+      targetPoint.name.substring(
+        targetPoint.name.indexOf("_") + 1,
+        targetPoint.name.lastIndexOf("_")
+      )
+    );
+
     if (!targetPoint.info) return;
     editDevInfo(targetPoint.info);
   }
@@ -149,39 +157,40 @@ function rClickCallback(demo) {
 }
 
 // 添加设备
-function handleAddDev(devInfo) {
-  if (!demo) {
-    //  处理未加载完场景情况
-    console.info("3D场景正在渲染，请稍后操作");
-    return;
-  }
-  const tempDevInfo = demo.addDev(devInfo);
-  hasDevice.value = true;
-  editDevInfo(tempDevInfo);
-  ElMessage({
-    message: "添加成功",
-    type: "success",
-  });
+function handleAddEqu() {
+  console.log("添加", pointInfo);
 }
 
 // 删除设备
-async function handleRemoveDev() {
-  const result = await demo.removeDev(devInfo.meshId);
-  if (result === "ok") {
-    hasDevice.value = false;
-    editDevInfo();
-    ElMessage({
-      message: "删除成功",
-      type: "success",
-    });
-  }
+async function handleRemoveEqu() {
+  // const result = await demo.removeDev(devInfo.meshId);
+  // if (result === "ok") {
+  //   hasDevice.value = false;
+  //   editDevInfo();
+  //   ElMessage({
+  //     message: "删除成功",
+  //     type: "success",
+  //   });
+  // }
+  console.log("删除");
+}
+
+// 处理取消关闭编辑框事件
+function handleCancel() {
+  if (!demo) return;
+  // 关闭标签
+  demo.isControlOrbit(true);
+  demo.clearTagsObj();
 }
 </script>
 
 <style lang="scss" scope>
 #scene {
   position: relative;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
+  #cvs {
+    height: 100%;
+  }
 }
 </style>