Merge pull request '邓洁 : 合并模型代码' (#42) from dj into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/42
2023-12-07 15:31:25 +00:00
parent 223ecdbeb9 38820566ec
commit 3edbf7312f
10 changed files with 225 additions and 197 deletions
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/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>
--- a/src/components/content/tunnelScene/childComp/DevInfo.vue
+++ b/src/components/content/tunnelScene/childComp/DevInfo.vue
@@ -2,20 +2,28 @@
  <div id="dev-info">
    <div class="title">设备属性</div>
    <div class="name">
-      <span>设备名称:</span><span>{{ devName }}</span>
+      <span>设备名称:</span><span>{{ devInfo.name }}</span>
    </div>
    <div class="state-info">
-      <span>设备状态:</span><span>{{ devState }}</span>
+      <span>设备状态:</span><span>{{ devInfo.state }}</span>
+    </div>
+    <div class="state-info">
+      <span>设备位置:</span><span>{{ devInfo.position }}</span>
    </div>
  </div>
 </template>

 <script setup>
+import { defineProps, watch } from "vue";
 // 接受参数
-defineProps({
-  devName: String,
-  devState: String,
-});
+const params = defineProps(["devInfo"]);
+watch(
+  () => params.devInfo,
+  (newValue, oldValue) => {
+    console.log("监听");
+    console.log(newValue, oldValue);
+  }
+);
 </script>

 <style lang="scss" scoped>
@@ -28,8 +36,10 @@ defineProps({
  border-radius: 10px;
  padding: 5px;
  display: block;
+  opacity: 0;
  .title {
    height: 20px;
+    text-align: center;
  }
 }
 </style>
--- a/src/components/content/tunnelScene/childComp/EditDev.vue
+++ b/src/components/content/tunnelScene/childComp/EditDev.vue
@@ -7,50 +7,49 @@
          v-for="(item, key) of devicesList"
          :key="key"
          @click="checkDev(key)"
+          :class="{ 'li-active': checkIndex === key }"
        >
          <img :src="item.devImgUrl" />
-          <div>{{ item.devName }}</div>
+          <div>{{ item.devName + key }}</div>
        </li>
      </ul>
    </div>
    <div class="option-btn">
-      <button @click="removeDev">移除设备</button>
-      <button @click="addDev">添加设备</button>
+      <button @click="removeDev" :disabled="!params.hasDev">移除设备</button>
+      <button @click="addDev" :disabled="params.hasDev">添加设备</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");
-}
+import { reactive, defineEmits, onMounted, ref, defineProps } from "vue";

+const params = defineProps(["hasDev", "meshId"]);
+// 定义需要发射的事件
+const emit = defineEmits(["addDev", "removeDev"]);
+//  挂载后加所有的设备模型
 const devItem = {
  devName: "传感器",
  devImgUrl: "/images/camera.jpg",
+  devState: "未开启",
 };
 const list = [devItem, devItem, devItem, devItem];
-
 const devicesList = reactive(list);
-const checkIndex = ref(0);
+
+const checkIndex = ref(-1);
 //选择设备
 function checkDev(key) {
  checkIndex.value = key;
-  emit("checkDev", key); //携带参数发射事件
 }
 // 添加设备
 function addDev() {
-  emit("addDev");
+  if (checkIndex.value === -1) {
+    alert("请选择设备");
+    return;
+  }
+  const devInfo = list[checkIndex.value];
+  devInfo.checkIndex = checkIndex.value;
+  emit("addDev", devInfo);
 }
 //删除设备
 function removeDev() {
@@ -68,6 +67,7 @@ function removeDev() {
  display: block;
  border-radius: 10px;
  text-align: center;
+  opacity: 0;
  img {
    width: 50px;
  }
@@ -94,13 +94,11 @@ function removeDev() {
  }
  .divice-list ul li {
    border-radius: 5px;
-
    overflow: hidden;
    cursor: pointer;
  }
-
-  #li-active {
-    background: red;
-  }
+}
+.li-active {
+  background: rgb(224, 114, 114);
 }
 </style>
--- a/src/components/content/tunnelScene/sceneClass/addDev/index.js
+++ b/src/components/content/tunnelScene/sceneClass/addDev/index.js
@@ -0,0 +1,37 @@
+export default function (devInfo) {
+  const dev = this.deviceList[devInfo.checkIndex].clone(); //克隆对应的moxin
+  const p = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
+  dev.position.copy(p);
+  this.scene.add(dev);
+  this.targetPoint.hasDevice = true; //标记还存在设备
+  // 附着点记录信息
+  this.targetPoint.info = {
+    meshId: dev.id,
+    name: devInfo.devName,
+    position: transformPosition(this.targetPoint.name, this.distance),
+    state: devInfo.devState,
+  };
+  // this.targetPoint.visible = false;
+  return this.targetPoint.info;
+}
+
+function transformPosition(position, distance) {
+  return `${equal(position.charAt(position.lastIndexOf("_") + 1))}边隧道${equal(
+    position.charAt(position.lastIndexOf("_") + 2)
+  )}侧设备约${
+    (Number(
+      position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
+    ) +
+      1) *
+    distance
+  }米处`;
+}
+
+function equal(str) {
+  switch (str) {
+    case "r":
+      return "右";
+    case "l":
+      return "左";
+  }
+}
--- a/src/components/content/tunnelScene/sceneClass/addEvent/index.js
+++ b/src/components/content/tunnelScene/sceneClass/addEvent/index.js
@@ -0,0 +1,8 @@
+export default function (funName, fun) {
+  //这里给类里面添加函数,方便内部使用操作
+  if (this[funName]) {
+    console.error(`已存在${funName}函数`);
+    return;
+  }
+  this[funName] = fun;
+}
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -7,10 +7,10 @@ import {
  handleStartChange,
 } from "./handleOrbitControlsChange";
 import { saveState, resetState } from "./viewBack";
+import addFunction from "./addEvent";

-import { addDev } from "./addDevice";
-import { removeDev } from "./removeDevice";
-import { checkDevModel } from "./checkDevModel";
+import addDev from "./addDev";
+import removeDev from "./removeDev";
 export default class Demo {
  // 摄像机看向位置
  origin = null;
@@ -26,8 +26,13 @@ export default class Demo {
    this._checkAnimation = checkAnimation;
    this._saveSate = saveState;
    this._resetState = resetState;
-    this._removeDev = removeDev;

+    //  增加设备模型
+    this.addDev = addDev;
+    // 删除设备模型
+    this.removeDev = removeDev;
+    // 外部可添加函数
+    this.addFunction = addFunction;
    this.THREE = three;
    this.mountedElement = mountedElement;
    //初始化场景
@@ -61,10 +66,6 @@ export default class Demo {
    this.render();
    this.canvasResize();
    this.addXYZ();
-
-    this.HTMLTagEventListener();
-
-    this.bindRightPlaneInfo();
  }
  //渲染函数作用域(这里主要写渲染帧内操作)
  __renderScope() {
@@ -271,6 +272,7 @@ export default class Demo {
      raycaster.setFromCamera(mouse, this.camera);
      const intersects = raycaster.intersectObjects(isClickModels);
      if (intersects.length === 0) return;
+      //附着点设置方框
      this.setBoxHelper(intersects[0].object);

      // 处理点击左右键事件
@@ -300,6 +302,9 @@ export default class Demo {
    this.tag2CSS2DObj = new CSS2DObject(this.tag2Html);
    this.tag3CSS2DObj = new CSS2DObject(this.tag3Html);
    // 设置该标签初始化透明
+    this.tagCSS2DObj.element.style.opacity = "1";
+    this.tag2CSS2DObj.element.style.opacity = "1";
+    this.tag3CSS2DObj.element.style.opacity = "1";

    this.tagCSS2DObj.element.style.display = "none";
    this.tag2CSS2DObj.element.style.display = "none";
@@ -320,30 +325,7 @@ export default class Demo {
    // 删除标记动画
    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对象
@@ -366,18 +348,6 @@ export default class Demo {
    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加载过后的模型数组
   */
@@ -388,69 +358,18 @@ export default class Demo {
    });
    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 模型加载器
+   *
+   * @param {Number} distance 设置锚点之间的间隔距离
   */
-  addOBJLoader(objloader) {
-    this.OBJLoader = new objloader();
-  }
-  // 先把模型加载完成
-  loadeOBJModel() {
-    this.devMap = new Map();
-    this.OBJLoader.load(
-      "/devicesModel/Camera.obj",
-      callBack.bind(this, "dev_1")
-    );
-    this.OBJLoader.load(
-      "/devicesModel/Camera.obj",
-      callBack.bind(this, "dev_2")
-    );
-    this.OBJLoader.load(
-      "/devicesModel/Camera.obj",
-      callBack.bind(this, "dev_3")
-    );
-    this.OBJLoader.load(
-      "/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);
-    }
+  setDistance(distance = 10) {
+    this.distance = distance;
  }
 }
--- a/src/components/content/tunnelScene/sceneClass/handleDBLclick/index.js
+++ b/src/components/content/tunnelScene/sceneClass/handleDBLclick/index.js
@@ -43,39 +43,21 @@ export function handleDBLClick(e) {
  this.cameraPositionTween.onComplete(() => {
    this.orbitControls.target = modelP;
    this.camera.lookAt(modelP);
-    // 选中的物体闪梭(这里必需放在下一个函数之前，这里需要使用到下一个函数需要清空的上一个模型)
-    // handleModelFlash(e, this);
-
    // 动画完成过后自动弹出标签
    autoOutTag(e, this);
    this.listenerEventFlag = false;
+    // 返回个组件
+    this.displayDevInfo(e);
  });
 }
-//点击模型视角位移过去后模型闪烁函数
-// 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);
@@ -83,17 +65,3 @@ function autoOutTag(targetModel, context) {
    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;
-}
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js
@@ -12,28 +12,16 @@ export function handleLClick(targetPoint) {
    worldPosition.y,
    worldPosition.z
  );
-
+  // 标签定位
  this.tag2CSS2DObj.translateY(-15);
  this.tag2CSS2DObj.translateX(15);
-  displayDevInfo(this, targetPoint);
  this.scene.add(this.tag2CSS2DObj);
  intoAnimation.call(this, targetPoint);
+  //调用该函数回调作用返回给组件操作 very important-----
+  this.displayDevInfo(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;
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
@@ -14,12 +14,12 @@ export function handleRClick(targetPoint) {
    worldPosition.y,
    worldPosition.z
  );
-
  this.tag3CSS2DObj.translateY(-15);
  this.tag3CSS2DObj.translateX(15);
  this.scene.add(this.tag3CSS2DObj);
-
  intoAnimation.call(this);
+  // 返回给组件的回调函数
+  this.displayDevInfo(targetPoint);
 }

 function intoAnimation() {
--- a/src/components/content/tunnelScene/sceneClass/removeDev/index.js
+++ b/src/components/content/tunnelScene/sceneClass/removeDev/index.js
@@ -0,0 +1,10 @@
+export default function (meshId) {
+  return new Promise((resolve, reject) => {
+    if (!meshId) {
+      reject("null");
+    }
+    const mesh = this.scene.getObjectById(meshId);
+    this.scene.remove(mesh);
+    resolve("ok");
+  });
+}