隧道的间隔点动态绑定了

src/components/content/tunnelScene/TunnelScene.vue

@@ -5,7 +5,7 @@
     <!-- 这里的预览模式需要做成不能修改的模式 -->
     <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
       :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
-      pointGap="500" />
+      :pointGap="pointGap" />
     <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
         margin: 20% auto;
         width: 569px;
@@ -47,7 +47,7 @@ import {
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 import { useModelSceneStore } from "@/store/modelSceneStore";
 
@@ -62,13 +62,32 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 
-const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLength"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+
 
 let isedit = ref(params.isedit);
 
+let tunnelId = reactive(params.tunnelId);
+console.log(tunnelId);
+console.log(params.tunnelLength);
+
+watch(
+  () => params.tunnelLength,
+  (now) => {
+    params.tunnelLength = now
+    console.log(params.tunnelLength);
+    pointGap = now / 20
+  },
+  { deep: true }
+)
+
+let pointGap = reactive(params.tunnelLength);
+
+
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
+
   const doms = [info.value.$el, edit.value.$el];
   demo = new ThreeDScene(three, content.value);
   //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
@@ -108,6 +127,8 @@ async function handleMounted() {
       type: "warning",
     });
   }
+
+
 }
 
 // 每个模型加载回调