Fix NavBar and Add Record Trace

src/components/AppHeader.vue

@@ -1,24 +1,19 @@
 <script setup>
-// export default {
-//   data: () => ({
-//     user: {
-//       initials: "JD",
-//       fullName: "John Doe",
-//       email: "[email protected]",
-//     },
-//   }),
-// };
 import { reactive } from "vue";
 const user = reactive({
     initials: "JD",
     fullName: "John Doe",
     email: "[email protected]",
 })
+
+import {useAppStore} from '@/stores/app.js'
+const appStore = useAppStore()
+
 </script>
 
 <template>
   <v-app-bar class="px-1">
-      <v-app-bar-nav-icon icon="mdi-menu"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon icon="mdi-menu" @click="appStore.changeOpenNav()"></v-app-bar-nav-icon>
       <v-app-bar-title>Smorrery WebApp</v-app-bar-title>
     <!-- <v-text-field prepend-icon="mdi-magnify" single-line></v-text-field> -->
 

src/components/AppNavigation.vue

@@ -1,11 +1,17 @@
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import {useAppStore} from '@/stores/app.js'
+const appStore = useAppStore()
+const rail = ref(false);
+
+</script>
+
 <template>
   <v-navigation-drawer
-    v-model="drawer"
-    :rail="rail"
+    :rail="appStore.isOpenNav"
     permanent
     @click="rail = false"
   >
-
     <v-list density="compact" nav>
       <v-list-item
         prepend-icon="mdi-home-city"
@@ -25,9 +31,3 @@
     </v-list>
   </v-navigation-drawer>
 </template>
-
-<script setup>
-import { ref } from "vue";
-const drawer = ref(false);
-const rail = ref(false);
-</script>

src/components/SmorreryScence.vue

@@ -1,49 +1,66 @@
 <script setup>
 import { ref, onMounted, watch } from "vue";
 import { SpaceScene } from "@/utils/SpaceScene/SpaceScene.js";
+import { fa } from "vuetify/locale";
+
+let space_scene;
 const target = ref();
 
-const control_btn_icon = ref('mdi-pause')
-const control_st = ref(true)
+// 畫布啟動
+const scene_st = ref(false);
+// 播放
+const control_st = ref(false);
+// 前進與倒退
+const forward_st = ref(true);
+
+// 軌跡
+const isTrace = ref(false);
 
-const forward_btn_icon = ref('mdi-skip-backward') //mdi mdi-fast-backward
-const forward_st = ref(true)
 
 
-let space_scene
 
+// 畫布啟動關閉 -> 畫面渲染
+const controlStatusScene = () => {
+  scene_st.value = !scene_st.value;
+  if (scene_st.value) {
+    space_scene.start();
+  } else {
+    space_scene.stop();
+  }
+};
 
 // Control Bar Action
 const palyingStatuChange = () => {
-  control_st.value = !control_st.value
-  control_btn_icon.value = (control_st.value)? "mdi-pause": "mdi-play"
-
-  if(control_st.value){
-    space_scene.start()
-  }else{
-    space_scene.stop()
+  control_st.value = !control_st.value;
+  if (control_st.value) {
+    space_scene.loop.played = 1;
+  } else {
+    space_scene.loop.played = 0;
   }
-}
+};
 
 const forwardControlChange = () => {
-  forward_st.value =!forward_st.value
-  forward_btn_icon.value = (forward_st.value)? 'mdi-skip-backward' : 'mdi-skip-forward'
-  
-  if(forward_st.value) {
-    space_scene.setTimeDirect(1)
-  }else{
-    space_scene.setTimeDirect(0)
+  forward_st.value = !forward_st.value;
+  if (forward_st.value) {
+    space_scene.loop.timeDirect = 1;
+  } else {
+    space_scene.loop.timeDirect = 0;
   }
-  space_scene.stop()
-  space_scene.start()
+  space_scene.clearTrace()
+};
+
+const changeIsTraceStatus = () => {
+  isTrace.value = !isTrace.value
+  space_scene.OrbitingRecordTrace = isTrace.value
+  console.log(space_scene.orbitingObjects)
 }
 
+
+
+
 onMounted(() => {
   const target_s = document.querySelector("#target");
   space_scene = new SpaceScene(target_s);
-  if(control_st.value) {
-    space_scene.start();
-  }
 });
 </script>
 
@@ -52,12 +69,35 @@ onMounted(() => {
     <div id="info">
       Interactive 3D Orrery<br />Drag to rotate, scroll to zoom
     </div>
-      <div id="timeControl">
-        <v-btn class="video-btn" :icon="control_btn_icon" @click="palyingStatuChange" />
-        <v-btn class="video-btn" :icon="forward_btn_icon" @click="forwardControlChange" />
+    <div id="timeControl">
+      <v-btn
+        class="video-btn"
+        @click="controlStatusScene"
+        :text="scene_st === true ? `Stop` : `Run`"
+      />
+      <v-btn
+        class="video-btn"
+        :disabled="!scene_st"
+        :icon="control_st === true ? `mdi-pause` : `mdi-play`"
+        @click="palyingStatuChange"
+      />
+      <v-btn
+        class="video-btn"
+        :disabled="!scene_st"
+        :icon="forward_st === true ? `mdi-skip-backward` : `mdi-skip-forward`"
+        @click="forwardControlChange"
+      />
+
+      <v-btn
+        class="video-btn"
+        :disabled="!scene_st || !control_st"
+        @click="changeIsTraceStatus"
+        :text="isTrace === true ? ` Clear Trace` : `Record Trace`"
+      />
+
+
     </div>
   </div>
-
 </template>
 
 <style lang="scss">
@@ -91,6 +131,4 @@ onMounted(() => {
     }
   }
 }
-
-
 </style>

src/stores/app.js

@@ -1,8 +1,19 @@
 // Utilities
 import { defineStore } from 'pinia'
 
-export const useAppStore = defineStore('app', {
-  state: () => ({
-    //
-  }),
-})
+export const useAppStore = defineStore(
+  'app',
+  () => {
+    const isOpenNav = ref(true)
+
+    const changeOpenNav = () => {
+      isOpenNav.value = !isOpenNav.value
+      console.log("changeOpenNav", isOpenNav.value)
+    }
+
+    return {
+      isOpenNav,
+      changeOpenNav,
+    }
+  }
+)

src/utils/SpaceScene/EmptyScene.js

@@ -4,29 +4,28 @@ import { createCamera } from "./components/camera.js";
 import { Loop } from "./core/loop.js";
 import { createControls } from "./core/controls.js";
 
-let timeDirection = 1;
-let timeScale = 1;
-let container_width = window.innerWidth;
-let container_height = window.innerHeight;
-
 class EmptyScene {
   constructor(container) {
-    container_width = window.innerWidth;
-    container_height = window.innerHeight;
+    this.container_width = window.innerWidth;
+    this.container_height = window.innerHeight;
 
     // 初始建構
+    this.timeDirection = 1; // 控制計算時間差
+    this.timeScale = 1; // 控制時間差倍率
+    this.isPlayed = 1; // 是否計算下一幀差異
+
     this.scene = createScene();
-    this.renderer = createRenderer(container_width, container_height);
-    this.labelRender = createLabelRenderer(container_width, container_height);
-    this.camera = createCamera(container_width, container_height);
+    this.renderer = createRenderer(this.container_width, this.container_height);
+    this.labelRender = createLabelRenderer(this.container_width, this.container_height);
+    this.camera = createCamera(this.container_width, this.container_height);
     this.currentDate = new Date(Date.UTC(2000, 0, 1, 12, 0, 0));
     this.loop = new Loop(
       this.camera,
       this.scene,
       this.renderer,
-      timeScale,
+      this.timeScale,
       this.currentDate,
-      timeDirection
+      this.timeDirection,
     );
 
     // 添加畫布

src/utils/SpaceScene/SpaceScene.js

@@ -35,7 +35,27 @@ class SpaceScene extends EmptyScene {
     this.scene.add(sunLight);
 
     const resizer = new Resizer(container, this.camera, this.renderer);
+
+  }
+
+  clearTrace() {
+    this.orbitingObjects.forEach(obj => {
+      obj.trace = []
+    })
   }
+
+  // 天體軌跡記錄啟動
+  set OrbitingRecordTrace (flag) {
+    const st = (flag === true)? true : false;
+    this.orbitingObjects.forEach(obj => {
+      console.log(flag, st, obj.isTrace)
+      obj.isTrace = st
+      if(!st) {
+        obj.trace = []
+      }
+    })
+  }
+
 }
 
 export { SpaceScene };

src/utils/SpaceScene/components/objects.js

@@ -121,6 +121,7 @@ function createOrbitingObject(obj) {
 
   // 起始位置
   obj.T = getOrbitalPeroid(obj.a);
+  obj.isTrace = false
   obj.trace = [];
   obj.traceLine = createTraceLine(obj)
   const _M = updateMeanAnomaly(obj.T, obj.ma, 0);
@@ -150,16 +151,20 @@ function createOrbitingObject(obj) {
 
     // 軌跡
     // Add a segment to the trace
-    obj.trace.push(orbit_update_pos);
-    if(obj.trace.length >= MAX_TRACE_STEPS){
-      obj.trace.shift()
+    if(obj.isTrace) {
+      obj.trace.push(orbit_update_pos);
+      if(obj.trace.length >= MAX_TRACE_STEPS){
+        obj.trace.shift()
+      }
     }
+
 
     // 顯示
     scene.remove(obj.traceLine)
-    obj.traceLine = createTraceLine(obj)
-    scene.add(obj.traceLine)
-
+    if(obj.trace.length > 0) {
+      obj.traceLine = createTraceLine(obj)
+      scene.add(obj.traceLine)
+    }
   };
 
   return orbit_container;