Home Explore Help
Register Sign In
luogang
/
airport_threemap
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

模型导航代码提交

luogang 4 months ago
parent
55454f2a3e
commit
687b0041db
19 changed files with 226 additions and 41 deletions
Split View Show Diff Stats
  1. 1 0
      components.d.ts
  2. 1 1
      index.html
  3. 3 3
      package.json
  4. BIN
      public/models/floor3.glb
  5. BIN
      public/models/floor4.glb
  6. BIN
      public/models/scene.glb
  7. 8 0
      src/assets/images/short1.svg
  8. 10 0
      src/assets/images/short2.svg
  9. 11 0
      src/assets/images/short3.svg
  10. 12 0
      src/assets/images/short4.svg
  11. 8 0
      src/assets/images/short5.svg
  12. 0 1
      src/assets/vue.svg
  13. 3 4
      src/hooks/useMesh.ts
  14. 3 1
      src/views/threeMap/components/Character/Character.ts
  15. 2 2
      src/views/threeMap/components/ThreeMap/Constants.ts
  16. 28 19
      src/views/threeMap/components/ThreeMap/ThreeMap.vue
  17. 2 4
      src/views/threeMap/components/ThreeMap/useInitThree.ts
  18. 131 3
      src/views/threeMap/index.vue
  19. 3 3
      vite.config.ts

+ 1 - 0
components.d.ts
View File 

@@ -19,6 +19,7 @@ declare module '@vue/runtime-core' {
 
     VanEmpty: typeof import('vant/es')['Empty']
 
     VanList: typeof import('vant/es')['List']
 
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
 
+    VanSearch: typeof import('vant/es')['Search']
 
     VanTabbar: typeof import('vant/es')['Tabbar']
 
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
 
   }

+ 1 - 1
index.html
View File 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>map</title>
 
+    <title></title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 3 - 3
package.json
View File 

@@ -16,10 +16,10 @@
 
     "pathfinding": "^0.4.18",
 
     "three": "^0.174.0",
 
     "three-pathfinding": "^1.3.0",
 
-    "vant": "^4.1.2",
 
+    "three.path": "^1.0.1",
 
+    "vant": "^4.9.17",
 
     "vue": "^3.2.47",
 
-    "vue-router": "^4.1.6",
 
-    "three.path": "^1.0.1"
 
+    "vue-router": "^4.1.6"
 
   },
 
   "devDependencies": {
 
     "@typescript-eslint/eslint-plugin": "^5.57.1",

BIN
public/models/floor3.glb
View File


BIN
public/models/floor4.glb
View File


BIN
public/models/scene.glb
View File


File diff suppressed because it is too large
+ 8 - 0
src/assets/images/short1.svg


+ 10 - 0
src/assets/images/short2.svg
View File 

@@ -0,0 +1,10 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 80" class="design-iconfont">
 
+  <defs>
 
+    <linearGradient x1=".5" y1="0" x2=".5" y2="1" id="82umzacli__vzqskhkcra">
 
+      <stop offset="0%" stop-color="#71EB87"/>
 
+      <stop offset="100%" stop-color="#29BEBA"/>
 
+    </linearGradient>
 
+  </defs>
 
+  <path d="M0 40C3.924219170633544e-15 17.90861000676826 17.908610006768267 0 40 0L40 0C62.09138999323173 0 80 17.908610006768267 80 40L80 40C80 62.09138999323173 62.09138999323173 80 40 80L40 80C17.908610006768267 80 3.924219170633544e-15 62.09138999323174 0 40.00000000000001Z" fill="url(#82umzacli__vzqskhkcra)"/>
 
+  <path d="M23,25.74999L23,53.25C23,55.3212,24.67871,57,26.74999,57L54.25,57C56.3212,57,58,55.3212,58,53.25L58,25.74999C58,23.67871,56.3212,22,54.25,22L26.74999,22C24.67871,22,23,23.67871,23,25.74999ZM54.25,24.5L26.75,24.5C26.05957,24.5,25.5,25.05957,25.5,25.75L25.5,53.25C25.5,53.9405,26.05957,54.5001,26.75,54.5001L54.25,54.5001C54.9404,54.5001,55.5,53.9405,55.5,53.25L55.5,25.75005C55.5,25.05962,54.9404,24.5,54.25,24.5ZM48.5693,32.4531C49.3955,32.1113,50.051100000000005,32.0034,50.8476,32C52.066900000000004,32.0186,53.0122,32.5205,53.435,33.0122C53.811,33.4341,53.6479,34.0938,52.7759,34.568799999999996C52.7759,34.568799999999996,41.4829,40.0606,35.4458,42.8428C35.0107,43.0386,34.5454,43.143,34.1328,43.1679C33.3398,43.2119,32.84868,43.228,32.03613,43.2461C32.01901,43.2465,32.00165,43.2469,31.98408,43.247299999999996C31.61934,43.2556,31.162860000000002,43.2661,30.81348,42.9615L27.62256,40.143100000000004C27.43946,39.9833,27.34966,39.7016,27.3814,39.498000000000005C27.42139,39.251400000000004,27.53663,39.0351,27.70997,38.863299999999995C28.05274,38.5278,28.63824,38.375,29.19678,38.5708C33.1479,39.956,33.135400000000004,39.927,33.1079,39.8631C33.1029,39.8517,33.0976,39.839200000000005,33.1142,39.8334L36.0043,38.6382C36.1484,38.5464,36.3754,38.2626,36.015100000000004,38.0561L30.68989,34.7783C30.39107,34.6601,30.09419,34.2324,30.61128,33.9072C30.94038,33.6835,31.26563,33.4458,31.60249,33.2299C31.62055,33.2174,31.63906,33.204499999999996,31.65804,33.1912C31.95107,32.9865,32.35273,32.7059,32.83838,32.7871C36.2129,33.2241,39.5737,34.3691,42.9483,34.8168C43.0034,34.821799999999996,43.0591,34.812,43.107,34.791C43.2626,34.731899999999996,45.7686,33.7515,48.5693,32.4531ZM29.25,49.5C28.55957,49.5,28,48.9404,28,48.2499C28,47.5595,28.55957,46.9999,29.25,46.9999L45.5,46.9999C46.1904,46.9999,46.75,47.5595,46.75,48.2499C46.75,48.9404,46.1904,49.5,45.5,49.5L29.25,49.5Z" fill-rule="evenodd" fill="#FFF"/>
 
+</svg>

+ 11 - 0
src/assets/images/short3.svg
View File 

@@ -0,0 +1,11 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 80" class="design-iconfont">
 
+  <defs>
 
+    <linearGradient x1=".5" y1="0" x2=".5" y2="1" id="ev8r4a8ic__u7quwba8ha">
 
+      <stop offset="0%" stop-color="#FD9F7B"/>
 
+      <stop offset="100%" stop-color="#F1447E"/>
 
+    </linearGradient>
 
+  </defs>
 
+  <path d="M0 40C3.924219170633544e-15 17.90861000676826 17.908610006768267 0 40 0L40 0C62.09138999323173 0 80 17.908610006768267 80 40L80 40C80 62.09138999323173 62.09138999323173 80 40 80L40 80C17.908610006768267 80 3.924219170633544e-15 62.09138999323174 0 40.00000000000001Z" fill="url(#ev8r4a8ic__u7quwba8ha)"/>
 
+  <path d="M53.4913,23.664557C53.2261,23.265823,52.8279,23,52.2976,23L25.77388,23C25.24355,23,24.71321,23.398734,24.58107,23.93038L21.132143,32.56962C21.0132143,32.844300000000004,21.00176192,33.3786,21,33.5797L21,36.9557C21,40.2785,23.78381,43.0696,27.10148,43.0696L28.82374,43.0696C30.81381,43.0696,32.4048,42.405100000000004,33.4664,41.2089C34.527,42.405100000000004,36.3832,43.0696,38.638400000000004,43.0696L40.3625,43.0696C42.6168,43.0696,44.473,42.405100000000004,45.5336,41.2089C46.5952,42.2722,48.1862,42.9367,50.175399999999996,42.9367L51.8994,42.9367C55.2153,42.9367,58,40.1456,58,36.8228L57.9991,33.2359C57.9956,32.96215,57.9762,32.387969999999996,57.867,32.17089L53.4913,23.664557ZM51.5409,25.6582L26.73764,25.6582L23.6499,33.3936L23.6455,33.4645L23.64285,33.5797L23.64285,36.9557C23.64285,38.8076,25.24266,40.4114,27.10059,40.4114L28.82461,40.4114C30.0694,40.4114,30.94771,40.0561,31.4939,39.4393L33.4664,37.2153L35.4379,39.4393C35.9383,40.0038,37.073899999999995,40.4114,38.638400000000004,40.4114L40.3624,40.4114C41.926100000000005,40.4114,43.0617,40.0038,43.5621,39.4393L45.4209,37.3429L47.3995,39.325900000000004C47.9897,39.9169,48.9324,40.2785,50.175399999999996,40.2785L51.8994,40.2785C53.7582,40.2785,55.3571,38.6747,55.3571,36.8228L55.3571,33.3671L55.3563,33.2226L55.3492,33.0605L51.5409,25.6582ZM54.1934,44.4032C54.9232,44.4032,55.5148,44.9983,55.5148,45.732299999999995L55.5148,54.012699999999995C55.5148,56.2148,53.74,58,51.5505,58L27.4891,58C25.299680000000002,58,23.52481,56.2148,23.52481,54.012699999999995L23.52481,45.732299999999995C23.52481,44.9983,24.11643,44.4032,24.84624,44.4032C25.57604,44.4032,26.16767,44.9983,26.16767,45.732299999999995L26.16767,54.012699999999995C26.16767,54.746700000000004,26.75929,55.3418,27.4891,55.3418L51.5505,55.3418C52.2804,55.3418,52.872,54.746700000000004,52.872,54.012699999999995L52.872,45.732299999999995C52.872,44.9983,53.4636,44.4032,54.1934,44.4032Z" fill-rule="evenodd" fill="#FFF"/>
 
+  <path d="M55.9561714006424,31.41772174835205L55.9561714006424,34.075951748352054L21.806071400642395,34.075951748352054L21.806071400642395,31.41772174835205L55.9561714006424,31.41772174835205Z" fill="#FFF"/>
 
+</svg>

+ 12 - 0
src/assets/images/short4.svg
View File 

@@ -0,0 +1,12 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 80" class="design-iconfont">
 
+  <defs>
 
+    <linearGradient x1=".5" y1="0" x2=".5" y2="1" id="9kkb2fjrb__kt7h288cra">
 
+      <stop offset="0%" stop-color="#61E6E6"/>
 
+      <stop offset="100%" stop-color="#1DC4C4"/>
 
+    </linearGradient>
 
+  </defs>
 
+  <path d="M0 40C3.924219170633544e-15 17.90861000676826 17.908610006768267 0 40 0L40 0C62.09138999323173 0 80 17.908610006768267 80 40L80 40C80 62.09138999323173 62.09138999323173 80 40 80L40 80C17.908610006768267 80 3.924219170633544e-15 62.09138999323174 0 40.00000000000001Z" fill="url(#9kkb2fjrb__kt7h288cra)"/>
 
+  <path d="M27.69328,29.194417691116332C26.15093,29.19460769111633,24.76034,28.272997691116334,24.16997,26.859347691116334C23.5796,25.445707691116333,23.90573,23.818437691116333,24.99627,22.73636769111633C26.08681,21.654302891116334,27.72699,21.330547691116333,29.151960000000003,21.916076691116334C30.57693,22.501606691116333,31.506,23.881107691116334,31.506,25.411277691116332C31.503700000000002,27.499497691116332,29.79811,29.191817691116334,27.69328,29.194417691116332ZM27.69325,23.986437691116333C27.11232,23.986247691116333,26.58848,24.333277691116333,26.366030000000002,24.86569769111633C26.14359,25.398127691116333,26.26635,26.011057691116335,26.67706,26.418667691116333C27.08777,26.82627769111633,27.70555,26.94826769111633,28.24228,26.727747691116335C28.77901,26.507237691116334,29.12898,25.987647691116333,29.12898,25.41129769111633C29.127670000000002,24.62516769111633,28.48564,23.988207691116333,27.69325,23.986907691116333L27.69325,23.986437691116333ZM30.85994,44.17973769111633L24.07683,44.17973769111633C23.15888,44.178637691116336,22.40154,43.46653769111633,22.35111,42.557237691116335L21,31.654037691116333L21,31.580467691116333C21.00183342,30.634577691116334,21.774689,29.868457691116333,22.7281,29.867417691116334L32.6579,29.867417691116334C33.6113,29.868457691116333,34.3842,30.634577691116334,34.385999999999996,31.580467691116333L34.385999999999996,31.67483769111633L32.5833,42.587437691116335C32.5178,43.484037691116335,31.7661,44.178637691116336,30.85994,44.17973769111633ZM24.65493,41.82143769111633L30.30134,41.82143769111633L31.8868,32.225737691116336L23.46594,32.225737691116336L24.65493,41.82143769111633Z" fill-rule="evenodd" fill="#FFF"/>
 
+  <path d="M40.1070265033722,60C39.45062650337219,60,38.91852650337219,59.4721,38.91852650337219,58.8209L38.91852650337219,21.17913C38.91852650337219,20.527916,39.45062650337219,20,40.1070265033722,20C40.76342650337219,20,41.29562650337219,20.527916,41.29562650337219,21.17913L41.29562650337219,58.8209C41.29562650337219,59.4721,40.76342650337219,60,40.1070265033722,60ZM49.07082650337219,25.41131C49.07082650337219,27.50067,50.77812650337219,29.19444,52.884126503372194,29.19444C54.98912650337219,29.1921,56.69502650337219,27.4997,56.697326503372196,25.41131C56.697326503372196,23.32194,54.990126503372196,21.62817,52.884126503372194,21.62817C50.77812650337219,21.62817,49.07082650337219,23.32194,49.07082650337219,25.41131ZM52.884126503372194,23.98645C52.09092650337219,23.98645,51.44792650337219,24.624380000000002,51.44792650337219,25.41132C51.44792650337219,26.19825,52.09092650337219,26.83618,52.884126503372194,26.83618C53.67732650337219,26.83618,54.32032650337219,26.19825,54.32032650337219,25.41132C54.31902650337219,24.625,53.676726503372194,23.98796,52.884126503372194,23.98692L52.884126503372194,23.98645ZM26.362116503372192,54.7576L29.02439650337219,54.7576C29.98140650337219,54.7565,30.76247650337219,53.9975,30.78339650337219,53.0483L31.31680650337219,41.9286L24.069226503372192,41.9286L24.60310850337219,53.0483C24.624030503372193,53.9975,25.405096503372192,54.7565,26.362116503372192,54.7576ZM26.951616503372193,52.3993L28.432976503372192,52.3993L28.822336503372192,44.2869L26.562256503372193,44.2869L26.951616503372193,52.3993ZM51.69322650337219,54.4661L54.07502650337219,54.4661C55.01292650337219,54.4661,55.72802650337219,53.8821,55.77122650337219,53.0959L56.31082650337219,47.17L49.457326503372194,47.17L49.99642650337219,53.0959C50.040226503372196,53.8821,50.7547265033722,54.4661,51.69322650337219,54.4661ZM52.29312650337219,52.1078L53.47452650337219,52.1078L53.70942650337219,49.5283L52.060726503372194,49.5283L52.29312650337219,52.1078Z" fill-rule="evenodd" fill="#FFF"/>
 
+  <path d="M47.52723090148926,49.236342436218266L58.24102090148926,49.236342436218266C59.210320901489254,49.236342436218266,60.00002090148926,48.47754243621826,60.00002090148926,47.544142436218266L60.00002090148926,47.442242436218265L57.142320901489256,31.170172436218262C57.07192090148926,30.298556436218263,56.312220901489255,29.60994243621826,55.38855090148925,29.60994243621826L50.379670901489256,29.60994243621826C49.45595090148926,29.60994243621826,48.69625090148926,30.298556436218263,48.62589090148926,31.170172436218262L45.76822090148926,47.442242436218265L45.76822090148926,47.544142436218266C45.76822090148926,48.47754243621826,46.55739590148926,49.236342436218266,47.52723090148926,49.236342436218266ZM57.48792090148926,46.87814243621826L48.28073090148926,46.87814243621826L50.89880090148926,31.968222436218262L54.86940090148926,31.968222436218262L57.48792090148926,46.87814243621826Z" fill-rule="evenodd" fill="#FFF"/>
 
+</svg>

File diff suppressed because it is too large
+ 8 - 0
src/assets/images/short5.svg


+ 0 - 1
src/assets/vue.svg
View File 

@@ -1 +0,0 @@
 
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

+ 3 - 4
src/hooks/useMesh.ts
View File 

@@ -142,13 +142,13 @@ export const createLine = (line_arr: Vector3[], track_width: number, track_color
 
 

 	texture.wrapS = texture.wrapT = RepeatWrapping;

 	const list = new PathPointList();

-	list.set(line_arr, 0.5, 10, undefined, false);

+	list.set(line_arr, 0.5, 2, undefined, false);

 

 	// Init by data

 	const geometry = new PathGeometry({

 		pathPointList: list,

 		options: {

-			width: 0.25, // default is 0.1

+			width: 0.1, // default is 0.1

 			arrow: false, // default is true

 			progress: 1, // default is 1

 			side: "both" // "left"/"right"/"both", default is "both"

@@ -161,11 +161,10 @@ export const createLine = (line_arr: Vector3[], track_width: number, track_color
 
 		new MeshBasicMaterial({

 			map: texture,

 			// color: 0xff9900,

-			depthTest: true,

+			depthTest: false,

 			depthWrite: false

 		})

 	);

-	line_mesh.position.y += 0.05;

 

 	return line_mesh;

 };

+ 3 - 1
src/views/threeMap/components/Character/Character.ts
View File 

@@ -132,7 +132,9 @@ export class Character extends EventEmitter {
 
 		// 	line_arr.push(path.x, path.y, path.z);

 		// });

 

-		const line = createLine(paths, 0.1, 0xff9900, 2, track_line_texture);

+        const line = createLine(paths, 0.1, 0xff9900, 1.2, track_line_texture);

+        console.log(paths);

+        

 		line.name = "line";

 		this.line = line;

 		this.scene.add(line);

+ 2 - 2
src/views/threeMap/components/ThreeMap/Constants.ts
View File 

@@ -1,6 +1,6 @@
 
 export const Floor: Record<string, string> = {

-	"floor_9": new URL("/path/floor_9_nav.glb", import.meta.url).href,

-	"floor_10": new URL("/path/floor_10_nav.glb", import.meta.url).href,

+	"floor3": new URL("/models/floor3.glb", import.meta.url).href,

+	"floor4": new URL("/models/floor4.glb", import.meta.url).href,

 	"out": new URL("/path/out_nav.glb", import.meta.url).href,

 	"air": new URL("/path/air.glb", import.meta.url).href,

 };

+ 28 - 19
src/views/threeMap/components/ThreeMap/ThreeMap.vue
View File 

@@ -2,12 +2,12 @@
 
     <div ref="map_container_ref" :class="['three-map', props.className]" :style="{

         width: props.width,

         height: props.height

-    }" />

+    }"></div>

 </template>

 

 <script setup lang="ts">

 import { useInitThree } from "./useInitThree";

-import { ref, watch, onMounted, shallowRef, inject } from "vue";

+import { ref, watch, onMounted, shallowRef, inject,toRaw } from "vue";

 import { useGLTFLoader } from "@/hooks/useGLTFLoader";

 import {

     Group,

@@ -106,11 +106,11 @@ const setfloorId = async (scene_url: string) => {
 
 

     map.traverse(item => {

         console.log(item);

-        

+

         if (isMesh(item) && item.name.includes("NavMesh")) {

-            // item.material.visible = false;

+            item.material.visible = false;

             path_finder.setZoneData(props.floorId, item);

-        } 

+        }

     });

 

     cur_map.value = map;

@@ -118,15 +118,10 @@ const setfloorId = async (scene_url: string) => {
 
     const bbox = new Box3().setFromObject(map);

     const center = new Vector3();

     bbox.getCenter(center);

-    console.log(center);

-    // 将模型的位置设置为原点

-

     // 设置控制器目标点为模型中心

     controls.target.copy(center);

-    camera.position.copy(center).add(new Vector3(0, 40, 50)); //3d视角

-    // camera.position.copy(center).add(new Vector3(0, 70, 0)); //2d视角

+    camera.position.copy(center).add(new Vector3(0, 60, 50)); //3d视角

     controls.update();

-

     // renderConnectPoint(map_conn_points.get(scene_url)!, graph.getAdjList(), cycle_light_texture as Texture);

 

     if (ray_cast) {

@@ -137,7 +132,19 @@ const setfloorId = async (scene_url: string) => {
 
         }

     }

 };

-

+const switch3D = (is3D) => {

+    const bbox = new Box3().setFromObject(cur_map.value);

+    const center = new Vector3();

+    bbox.getCenter(center);

+    controls.target.copy(center);

+    if (is3D) {

+        camera.position.copy(center).add(new Vector3(0, 60, 50)); //3d视角

+        controls.update();

+    } else {

+        camera.position.copy(center).add(new Vector3(0, 75, 0)); //2d视角

+        controls.update();

+    }

+}

 onMounted(() => {

     ray_cast = useRayCast(map_container_ref.value as HTMLElement, camera);

 

@@ -175,8 +182,8 @@ const renderPointHelper = (point: Vector3) => {
 
     const sprite = createImgSprite(

         coordinate_texture as Texture,

         point,

-        0,

-        0.03

+        0.15,

+        0.02

     );

     // group.add(sphere);

     group.add(sprite);

@@ -184,8 +191,9 @@ const renderPointHelper = (point: Vector3) => {
 
     if (startPoint.value) {

         endPoint.value = group;

         insideNavigation(props.floorId, startPoint.value.userData.position, endPoint.value.userData.position);

-        console.log(startPoint.value.userData.position);

-        console.log(endPoint.value.userData.position);

+        console.log( startPoint.value.userData.position);

+        console.log( endPoint.value.userData.position);

+        

     } else {

         startPoint.value = group;

     }

@@ -193,7 +201,7 @@ const renderPointHelper = (point: Vector3) => {
 
 };

 

 // 室内导航方案（会初始化地图）

-const insideNavigation = (zone :string, start_pos: Vector3, end_pos: Vector3) => {

+const insideNavigation = (zone: string, start_pos: Vector3, end_pos: Vector3) => {

     // controls.enabled = false;

 

     // character.setPathLineColor(`rgb(${getRandomIntInclusive(0, 255)}, ${getRandomIntInclusive(0, 255)}, ${getRandomIntInclusive(0, 255)})`);

@@ -222,13 +230,14 @@ renderer.setAnimationLoop(() => {
 
 

 defineExpose({

     startPoint,

-    clearPointHelper

+    clearPointHelper,

+    switch3D

 });

 </script>

 

 <style scoped lang="scss">

 .three-map {

-    border: 1px solid #ccc;

+    // border: 1px solid #ccc;

     overflow: hidden;

 }

 </style>

+ 2 - 4
src/views/threeMap/components/ThreeMap/useInitThree.ts
View File 

@@ -20,7 +20,7 @@ export const useInitThree = (container: Ref) => {
 
 

 	scene.add(new AmbientLight(0xffffff));

 

-	scene.add(new AxesHelper(10));

+	// scene.add(new AxesHelper(10));

 

 	const camera = new PerspectiveCamera(

 		30,

@@ -28,8 +28,6 @@ export const useInitThree = (container: Ref) => {
 
 		0.1,

 		1000

 	);

-    // 设置相机位置

-    camera.position.set(0, 50,0); // 向后移动相机

     camera.lookAt(scene.position); // 确保相机看向场景中心

 

 	const renderer = new WebGLRenderer({antialias: true});

@@ -38,7 +36,7 @@ export const useInitThree = (container: Ref) => {
 
 	const controls = new OrbitControls(camera, renderer.domElement);

 	controls.minDistance = 5;

     controls.maxPolarAngle = Math.PI / 2.1;

-    // controls.enableRotate = false

+    controls.enableRotate = false

     controls.target.set(0, 0, 0); // 明确设置目标点为原点

     controls.update(); // 立即应用控制参数

 	/* controls.mouseButtons = {

+ 131 - 3
src/views/threeMap/index.vue
View File 

@@ -1,6 +1,21 @@
 
 <template>
 
     <div class="container">
 
-        <three-map ref="start_map_ref" class-name="start-map" width="100%" height="100%" floor-id="floor_9" />
 
+        <div class="switch-map">
 
+            <span @click="switch3D">{{ is3D ? '2D' : '3D' }}</span>
 
+        </div>
 
+        <three-map ref="map_ref" class-name="start-map" width="100%" height="100%" floor-id="floor3" />
 
+        <!-- <div class="search-box">
 
+            <form action="/">
 
+                <van-search  v-model="searchValue" placeholder="请输入登机口、商铺名称">
 
+                </van-search>
 
+            </form>
 
+            <div class="shortcut-list">
 
+                <div v-for="item in shortcutList" :key="item.value" class="shortcut-item">
 
+                    <img :src="item.img" alt="" />
 
+                    <span>{{ item.name }}</span>
 
+                </div>
 
+            </div>
 
+        </div> -->
 
     </div>
 
 </template>
 
 <script setup lang="ts">
 
@@ -13,12 +28,125 @@ provide(connect_point_inject_key, {
 
     map_conn_points,
 
     graph
 
 });
 
-
 
+const map_ref = ref(null)
 
+const is3D = ref(true);
 
+const searchValue = ref('');
 
+const shortcutList = ref([
 
+    {
 
+        name: '出入口',
 
+        img: new URL("@/assets/images/short1.svg", import.meta.url).href,
 
+        value: '1'
 
+    },
 
+    {
 
+        name: '登机口',
 
+        img: new URL("@/assets/images/short2.svg", import.meta.url).href,
 
+        value: '2'
 
+    },
 
+    {
 
+        name: '店铺',
 
+        img: new URL("@/assets/images/short3.svg", import.meta.url).href,
 
+        value: '3'
 
+    },
 
+    {
 
+        name: '卫生间',
 
+        img: new URL("@/assets/images/short4.svg", import.meta.url).href,
 
+        value: '4'
 
+    },
 
+    {
 
+        name: '电梯',
 
+        img: new URL("@/assets/images/short5.svg", import.meta.url).href,
 
+        value: '5'
 
+    },
 
+]);
 
+const switch3D = () => {
 
+    is3D.value = !is3D.value;
 
+    map_ref.value.switch3D(is3D.value)
 
+}
 
 
 </script>
 
 <style lang="scss" scoped>
 
-.container{
 
+.container {
 
+    position: relative;
 
     width: 100%;
 
     height: 100vh;
 
 }
 
+
 
+.switch-map {
 
+    position: absolute;
 
+    top: 24px;
 
+    right: 20px;
 
+    width: 35px;
 
+    height: 35px;
 
+    line-height: 35px;
 
+    border-radius: 5px;
 
+    opacity: 1;
 
+    border: 0.5px solid #e3e2e2;
 
+    background: #ffffff;
 
+    box-shadow: 2.5px 0 15px -0.5px #b6b6b629;
 
+    color: #000000;
 
+    font-size: 12px;
 
+    font-weight: 400;
 
+    text-align: center;
 
+}
 
+
 
+.search-box {
 
+    position: absolute;
 
+    bottom: 0;
 
+    left: 0;
 
+    right: 0;
 
+    height: 150px;
 
+    padding-top: 10px;
 
+    border-radius: 8px 8px 0 0;
 
+    opacity: 1;
 
+    background: linear-gradient(180deg, #edf3ff 0%, #ffffff 100%);
 
+    box-shadow: 0 0 10px 5px #b6b6b642, inset 0 1px 0 0 #ffffff;
 
+
 
+    :deep() {
 
+        .van-search {
 
+            background: transparent;
 
+        }
 
+
 
+        .van-search__content {
 
+            background: #ffffff;
 
+            border-radius: 7px;
 
+            border: 1px solid #449bfc;
 
+            color: #A3ABB2;
 
+
 
+        }
 
+
 
+        .van-search__field {
 
+            height: 40px;
 
+        }
 
+
 
+        .van-field__control::-webkit-input-placeholder {
 
+            color: #A3ABB2;
 
+        }
 
+
 
+    }
 
+
 
+}
 
+
 
+.shortcut-list {
 
+    display: flex;
 
+    justify-content: space-around;
 
+    padding: 10px 0;
 
+    margin-top: 8px;
 
+
 
+    >div {
 
+        display: flex;
 
+        flex-direction: column;
 
+        align-items: center;
 
+
 
+        img {
 
+            width: 40px;
 
+            height: 40px;
 
+        }
 
+
 
+        span {
 
+            margin-top: 5px;
 
+            font-size: 12px;
 
+            color: #555555;
 
+        }
 
+    }
 
+}
 
 </style>

+ 3 - 3
vite.config.ts
View File 

@@ -9,9 +9,9 @@ export default ({ command }) => defineConfig({
 
     css: {
 
         preprocessorOptions: {
 
             scss: {
 
-                api: 'modern-compiler'
 
-            }
 
-        }
 
+                silenceDeprecations: ['legacy-js-api']
 
+            },
 
+        },
 
     },
 
     plugins: [
 
         vue(),

Some files were not shown because too many files changed in this diff