首頁樣式修改

src/components/dashboard/dashboardBuild.vue

@@ -15,7 +15,7 @@ const { is3D } = inject("app_config");
       height: '100%',
     }"
   >
-    <div :class="twMerge('w-full relative', is3D ? '' : 'h-full')">
+    <div :class="twMerge('w-full relative', is3D ? 'h-full' : 'h-full')">
       <img
         alt="build"
         :src="`${FILE_BASEURL}/UI_images/build/2D/build.jpg`"
@@ -35,18 +35,10 @@ const { is3D } = inject("app_config");
           )
         "
       />
-    </div>
+      <a-radio-group v-model:value="type" class=" absolute left-1/2 translate-x-[-50%] bottom-3 z-20">
-    <div class="mt-2" v-if="is3D">
+        <a-radio-button value="2d">2D</a-radio-button>
-      <div class="flex items-center justify-between">
+        <a-radio-button value="3d">3D</a-radio-button>
-        <h5>智慧建築</h5>
+      </a-radio-group>
-        <a-radio-group v-model:value="type">
-          <a-radio-button value="2d">2D</a-radio-button>
-          <a-radio-button value="3d">3D</a-radio-button>
-        </a-radio-group>
-      </div>
-      <p class="intro text-gray-400">
-        掌握建築用電、系統健康狀態，打造智慧節能醫院
-      </p>
     </div>
   </a-card>
 </template>

src/components/forge/Forge.vue

@@ -26,6 +26,10 @@ const initViewer = (container) => {
         viewer.impl.renderer().setClearAlpha(0);
         viewer.impl.glrenderer().setClearColor(0xffffff, 0);
         viewer.impl.invalidate(true);
+        // viewer.addEventListener(
+        //   Autodesk.Viewing.CAMERA_CHANGE_EVENT,
+        //   trackCamera
+        // ); // 添加相機變化監聽器
         resolve(viewer);
       }
     );
@@ -41,6 +45,21 @@ const loadModel = (filePath) => {
       (model) => {
         viewer.impl.invalidate(true);
         viewer.fitToView();
+        // 設置攝影機位置
+        setTimeout(() => {
+          setCameraPosition(
+            {
+              x: -167.82545540638415,
+              y: 345.10870156503876,
+              z: 81.70050447380856,
+            }, // 攝影機的新位置
+            {
+              x: 21.13901422856481,
+              y: -41.714495314675034,
+              z: -29.07274095478474,
+            } // 攝影機的焦點
+          );
+        }, 500);
         resolve(model);
         console.log("模型加載完成");
       },
@@ -49,6 +68,36 @@ const loadModel = (filePath) => {
   });
 };
 
+// 追蹤攝影機位置
+const trackCamera = () => {
+  if (viewer) {
+    const nav = viewer.navigation;
+
+    const cameraPosition = nav.getPosition();
+    const cameraTarget = nav.getTarget();
+
+    console.log("當前相機位置:", cameraPosition);
+    console.log("當前相機目標:", cameraTarget);
+  }
+};
+
+// 設定攝影機位置
+const setCameraPosition = (position, target) => {
+  if (viewer) {
+    const nav = viewer.navigation;
+
+    const newPosition = new THREE.Vector3(position.x, position.y, position.z);
+    const newTarget = new THREE.Vector3(target.x, target.y, target.z);
+
+    nav.setView(newPosition, newTarget);
+    console.log("攝影機定位完成:");
+    console.log("新位置:", newPosition);
+    console.log("新目標:", newTarget);
+  } else {
+    console.warn("Forge Viewer 尚未初始化");
+  }
+};
+
 onMounted(async () => {
   console.log("Forge 加載");
   await initViewer(forgeDom.value);
@@ -59,6 +108,10 @@ onMounted(async () => {
 onUnmounted(() => {
   console.log("Forge 銷毀");
   if (viewer) {
+    // viewer.removeEventListener(
+    //   Autodesk.Viewing.CAMERA_CHANGE_EVENT,
+    //   trackCamera
+    // ); // 移除事件監聽器
     viewer.tearDown();
     viewer.finish();
     viewer = null;