模型添加更新了

src/components/content/tunnelScene/TunnelScene.vue

@@ -20,7 +20,6 @@ import {
   CSS3DSprite,
 } from "three/addons/renderers/CSS3DRenderer.js";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"
 import DevInfo from "./childComp/DevInfo.vue";
 import EditDev from "./childComp/EditDev.vue";
 import { onMounted, reactive, ref } from "vue";
@@ -33,7 +32,6 @@ const edit = ref(null);
 const num = 10000;
 let demo; //定义demo全局变量
 const loader = new OBJLoader();
-let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 // 模版挂载后
 onMounted(handleMounted);
@@ -49,18 +47,25 @@ async function handleMounted() {
   lClickCallback(demo); //左键回调
   rClickCallback(demo); //右键回调
   //加载HDR背景图片
-  demo.loadBackground(hdrLoader, backColorSet)
+  demo.loadBackground(backColorSet)
   // 初始化设备模型
   try {
     const deviceList = [];
-    let result = await loadModel("/devicesModel/Camera.obj");
+    let result = await loadModel("/devicesModel/camera.obj");
     deviceList.push(result);
-    result = await loadModel("/devicesModel/box_device.obj");
+    modelEffectProcess(result);
+    result = await loadModel("/devicesModel/fan.obj");
     deviceList.push(result);
-    result = await loadModel("/devicesModel/dev2.obj");
+    modelEffectProcess(result);
+    result = await loadModel("/devicesModel/sensors.obj");
     deviceList.push(result);
-    result = await loadModel("/devicesModel/dev3.obj");
+    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("设备模型加载完毕");
@@ -86,6 +91,15 @@ 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,

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

@@ -3,12 +3,8 @@
     <div class="title">编辑设备</div>
     <div class="divice-list">
       <ul>
-        <li
-          v-for="(item, key) of devicesList"
-          :key="key"
-          @click="checkDev(key)"
-          :class="{ 'li-active': checkIndex === key }"
-        >
+        <li v-for="(item, key) of devicesList" :key="key" @click="checkDev(key)"
+          :class="{ 'li-active': checkIndex === key }">
           <img :src="item.devImgUrl" />
           <div>{{ item.devName + key }}</div>
         </li>
@@ -28,12 +24,32 @@ const params = defineProps(["hasDev", "meshId"]);
 // 定义需要发射的事件
 const emit = defineEmits(["addDev", "removeDev"]);
 //  挂载后加所有的设备模型
-const devItem = {
-  devName: "传感器",
+const cameradevItem = {
+  devName: "摄像头",
   devImgUrl: "/images/camera.jpg",
   devState: "未开启",
 };
-const list = [devItem, devItem, devItem, devItem];
+const fandevItem = {
+  devName: "风机",
+  devImgUrl: "/images/camera.jpg",
+  devState: "未开启",
+};
+const WindsensorsdevItem = {
+  devName: "风压传感器",
+  devImgUrl: "/images/camera.jpg",
+  devState: "未开启",
+};
+const GassensorsdevItem = {
+  devName: "气体传感器",
+  devImgUrl: "/images/camera.jpg",
+  devState: "未开启",
+};
+const TemsensorsdevItem = {
+  devName: "温度传感器",
+  devImgUrl: "/images/camera.jpg",
+  devState: "未开启",
+};
+const list = [cameradevItem, fandevItem, WindsensorsdevItem, GassensorsdevItem, TemsensorsdevItem];
 const devicesList = reactive(list);
 
 const checkIndex = ref(-1);
@@ -68,12 +84,15 @@ function removeDev() {
   border-radius: 10px;
   text-align: center;
   opacity: 0;
+
   img {
     width: 50px;
   }
+
   .title {
     height: 20px;
   }
+
   .option-btn {
     height: 40px;
     display: flex;
@@ -81,9 +100,11 @@ function removeDev() {
     align-items: center;
     margin-right: 10px;
   }
+
   .divice-list {
     height: 240px;
   }
+
   .divice-list ul {
     height: 100%;
     padding: 7px;
@@ -92,12 +113,14 @@ function removeDev() {
     gap: 7px;
     align-content: first baseline;
   }
+
   .divice-list ul li {
     border-radius: 5px;
     overflow: hidden;
     cursor: pointer;
   }
 }
+
 .li-active {
   background: rgb(224, 114, 114);
 }

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

@@ -2,6 +2,8 @@ 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);
+  // console.log(this.targetPoint);
+  modelEffectProcess(dev, this.targetPoint)
   this.scene.add(dev);
   this.targetPoint.hasDevice = true; //标记还存在设备
   // 附着点记录信息
@@ -15,16 +17,35 @@ export default function (devInfo) {
   return this.targetPoint.info;
 }
 
+function modelEffectProcess(model, point) {
+  if (model.children[0].name == "camera") {
+    console.log(model);
+    console.log(point);
+    model.scale.set(0.1, 0.1, 0.1)
+
+  }
+  if (model.children[0].name == "fan") {
+    console.log(model);
+    console.log(point);
+
+  }
+  if (model.children[0].name == "sensors") {
+    console.log(model);
+    console.log(point);
+
+    model.scale.set(0.2, 0.2, 0.2)
+  }
+}
+
 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
-  }米处`;
+  )}侧设备约${(Number(
+    position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
+  ) +
+    1) *
+  distance
+    }米处`;
 }
 
 function equal(str) {

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

@@ -13,6 +13,7 @@ function handleLoadedDevice(model) {
   const wp = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
   model.position.copy(wp);
   this.targetPoint.visible = false;
+  model.scale = 0.1
 
   this.scene.add(model);
   if (model.name === "camera") {
@@ -20,6 +21,7 @@ function handleLoadedDevice(model) {
     model.translateZ(4);
     model.translateY(-0.5);
   }
+
   // 添加的信息请求或初始化的信息
   this.targetPoint.info = {
     name: "摄像头",

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

@@ -372,12 +372,7 @@ export default class Demo {
   setDistance(distance = 10) {
     this.distance = distance;
   }
-  loadBackground(hdrLoader, backColorSet) {
-    // hdrLoader.load("/images/background/background.hdr", (texture) => {
-    //   texture.mapping = this.THREE.EquirectangularReflectionMapping;
-    //   this.scene.background = texture;
-    //   this.scene.environment = texture;
-    // })
+  loadBackground(backColorSet) {
     this.scene.background = new this.THREE.TextureLoader().load("/images/background/background.png", function (texture) {
       texture.encoding = backColorSet;
     });

src/components/manageLength/index.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="tunnel-length">
+        <!-- 加上点击事件 -->
+        <div class="tunnel-length-container">
+            <!-- 显示长度 -->
+            <div class="tunnel-length-font">当前长度：</div>
+            <!-- 包到下面的盒子 -->
+            <div>
+                <!-- 插入图片 -->
+                <div>
+                    <img src="../../assets/images/tunnel/tunnel-length-icon.png" alt="">
+                    <!-- 正方形覆盖 -->
+                    <div></div>
+                    <!-- 长方形覆盖 -->
+                    <div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+
+<script>
+export default {
+
+}
+</script>
+
+
+
+
+<style scoped>
+.tunnel-length-container {
+    position: relative;
+}
+
+.tunnel-length-font {
+    position: absolute;
+    left: 40%;
+    top: -33%;
+    color: #0BE9FA;
+    font-size: 30px;
+}
+</style>