邓洁 : 合并模型代码

src/components/content/tunnelScene/TunnelScene.vue

@@ -1,7 +1,12 @@
 <template>
   <div id="scene" ref="content">
-    <dev-info ref="info" dev-name="no" dev-state="noState" />
-    <edit-dev ref="edit" @check-dev="handleCheckDev" />
+    <dev-info ref="info" :devInfo="devInfo" />
+    <edit-dev
+      ref="edit"
+      @addDev="handleAddDev"
+      @removeDev="handleRemoveDev"
+      :hasDev="hasDevice"
+    />
   </div>
 </template>
 
@@ -21,31 +26,33 @@ import {
 } from "three/addons/renderers/CSS3DRenderer.js";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 
-import DevInfo from "./childComp/DevInfo.vue";
+import DevInfo from "./childComp/devinfo.vue";
 import EditDev from "./childComp/EditDev.vue";
-import { onMounted, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 
+import { ElMessage } from "element-plus";
 // 获取html标签跟随组件
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-
+const num = 10000;
+let demo; //定义demo全局变量
 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 = 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();
+  demo.setDistance(10);
+  lClickCallback(demo); //左键回调
+  rClickCallback(demo); //右键回调
 
   // 初始化设备模型
-
   try {
     const deviceList = [];
     let result = await loadModel("/devicesModel/Camera.obj");
@@ -56,10 +63,16 @@ async function handleMounted() {
     deviceList.push(result);
     result = await loadModel("/devicesModel/dev3.obj");
     deviceList.push(result);
-  } catch (e) {}
-  // demo.initDevicesModel();
+    // 给对象初加载设备模型
+    demo.initDevicesModel(deviceList);
+    console.info("设备模型加载完毕");
+    // 清空内存
+    result = null;
+  } catch (err) {
+    console.log(err);
+  }
 }
-
+// 每个模型加载回调
 function loadModel(path) {
   return new Promise((resolve, reject) => {
     loader.load(
@@ -74,6 +87,83 @@ function loadModel(path) {
     );
   });
 }
+
+let hasDevice = ref(true);
+let devInfo = reactive({
+  meshId: null,
+  name: "无",
+  state: "无",
+  position: "无",
+});
+
+// 赋值功能
+function editDevInfo(
+  value = {
+    meshId: null,
+    name: "无",
+    state: "无",
+    position: "无",
+  }
+) {
+  devInfo.meshId = value.meshId;
+  devInfo.name = value.name;
+  devInfo.state = value.state;
+  devInfo.position = value.position;
+}
+
+//点击左键返回附着点信息给组件
+function lClickCallback(demo) {
+  //demo动态添加函数，为操作组件内部
+  function displayDevInfo(targetPoint = null) {
+    hasDevice.value = targetPoint.hasDevice;
+    if (!targetPoint.info) {
+      editDevInfo();
+      return;
+    }
+    editDevInfo(targetPoint.info);
+  }
+  // 传给内部使用
+  demo.addFunction("displayDevInfo", displayDevInfo);
+}
+
+// 点击右键设备返回附着点对象
+function rClickCallback(demo) {
+  function editDev(targetPoint = null) {
+    hasDevice = targetPoint.hasDevice;
+    if (!targetPoint.info) return;
+    editDevInfo(targetPoint.info);
+  }
+  demo.addFunction("editDev", editDev);
+}
+
+// 添加设备
+function handleAddDev(devInfo) {
+  if (!demo) {
+    //  处理未加载完场景情况
+    console.info("3D场景正在渲染，请稍后操作");
+    return;
+  }
+  const tempDevInfo = demo.addDev(devInfo);
+  hasDevice.value = true;
+  editDevInfo(tempDevInfo);
+  ElMessage({
+    message: "添加成功",
+    type: "success",
+  });
+}
+
+// 删除设备
+async function handleRemoveDev() {
+  const result = await demo.removeDev(devInfo.meshId);
+  if (result === "ok") {
+    hasDevice.value = false;
+    editDevInfo();
+    ElMessage({
+      message: "删除成功",
+      type: "success",
+    });
+  }
+}
 </script>
 
 <style lang="scss" scope>