Finsh Control Bar.

src/components/SmorreryScence.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, computed, reactive} from "vue";
 import { SpaceScene } from "@/utils/SpaceScene/SpaceScene.js";
-import { fa } from "vuetify/locale";
 
 let space_scene;
 const target = ref();
@@ -16,6 +15,11 @@ const forward_st = ref(true);
 // 軌跡
 const isTrace = ref(false);
 
+// Speed
+const timeSpeed = ref(1.0);
+
+//currentDate
+const currentDate = ref(946728000000)
 
 
 
@@ -46,21 +50,55 @@ const forwardControlChange = () => {
   } else {
     space_scene.loop.timeDirect = 0;
   }
-  space_scene.clearTrace()
+  space_scene.clearTrace();
 };
 
 const changeIsTraceStatus = () => {
-  isTrace.value = !isTrace.value
-  space_scene.OrbitingRecordTrace = isTrace.value
-  console.log(space_scene.orbitingObjects)
+  isTrace.value = !isTrace.value;
+  space_scene.OrbitingRecordTrace = isTrace.value;
+  console.log(space_scene.orbitingObjects);
+};
+
+const dateShift = (val) => {
+  space_scene.loop.shiftDate = val
+  isTrace.value = false
+  space_scene.OrbitingRecordTrace = isTrace.value;
+  space_scene.clearTrace();
+  
 }
 
+watch(timeSpeed, (val) => {
+  console.log(val);
+  space_scene.loop.timeScaleRate = val;
+});
+
+
+// 顯示小數點
+const showFixedSpeedVal = (val) => {
+  const val_int = parseFloat(val);
+  return val_int;
+};
 
+// 計算日期字串
+const showDateString = (val) => {
+  const d = new Date(val)
+  return d.getFullYear() + 
+          "-" + ("0"+(d.getMonth()+1)).slice(-2) + 
+          "-" + ("0" + d.getDate()).slice(-2)
+}
 
+const showJDText = (val) => {
+  return ((val / 86400000) + 2440587.5).toFixed(2);
+}
 
 onMounted(() => {
   const target_s = document.querySelector("#target");
   space_scene = new SpaceScene(target_s);
+
+  watch(space_scene.loop.currentDate_ref, (val) => {
+    currentDate.value = val
+  });
+
 });
 </script>
 
@@ -71,31 +109,67 @@ onMounted(() => {
     </div>
     <div id="timeControl">
       <v-btn
-        class="video-btn"
+        class="video-btn text-none"
         @click="controlStatusScene"
         :text="scene_st === true ? `Stop` : `Run`"
+        size="small"
       />
       <v-btn
         class="video-btn"
         :disabled="!scene_st"
         :icon="control_st === true ? `mdi-pause` : `mdi-play`"
         @click="palyingStatuChange"
+        size="small"
       />
       <v-btn
         class="video-btn"
         :disabled="!scene_st"
         :icon="forward_st === true ? `mdi-skip-backward` : `mdi-skip-forward`"
         @click="forwardControlChange"
+        size="small"
       />
 
       <v-btn
-        class="video-btn"
+        class="video-btn text-none"
         :disabled="!scene_st || !control_st"
+        :prepend-icon="isTrace === true ? `mdi-stop-circle` : `mdi-record`"
         @click="changeIsTraceStatus"
-        :text="isTrace === true ? ` Clear Trace` : `Record Trace`"
+        text="Trace"
+        size="small"
+      />
+
+      <v-btn
+        class="video-btn text-none"
+        :disabled="!scene_st"
+        text="J2000"
+        size="small"
+        @click="dateShift(946728000000)"
+      />
+
+      <v-btn
+        class="video-btn text-none"
+        :disabled="!scene_st"
+        text="Today"
+        size="small"
+        @click = "dateShift(new Date().getTime())"
       />
-
 
+      <div class="speedControl">
+        <label for="speedSlider">Speed:</label>
+        <input
+          v-model="timeSpeed"
+          type="range"
+          id="speedSlider"
+          min="0.1"
+          max="10"
+          step="0.01"
+          :disabled="!scene_st"
+        />
+        <span id="speedValue">{{ showFixedSpeedVal(timeSpeed) }}x</span>
+      </div>
+
+      <span class="info-text">{{ showDateString(currentDate) }}</span>
+      <span class="info-text"> JD {{ showJDText(currentDate) }}</span>
     </div>
   </div>
 </template>
@@ -114,21 +188,38 @@ onMounted(() => {
   }
   #timeControl {
     position: absolute;
+    bottom: 5%;
     left: 50%;
-    bottom: 13%;
     transform: translateX(-50%);
-    background: rgba(205, 140, 140, 0.7);
+    background: rgba(0, 0, 0, 0.7);
     padding: 10px;
     border-radius: 5px;
     display: flex;
     align-items: center;
     color: white;
-    font-family: monospace;
-    z-index: 1;
+    font-family: Arial, sans-serif;
+    z-index: 1000;
 
     .video-btn {
       margin-left: 10px;
     }
+
+    .speedControl {
+      display: flex;
+      align-items: center;
+      label {
+        padding-left: 10px;
+      }
+
+      input {
+        width: 100px;
+      }
+    }
+
+    .info-text {
+      min-width: 150px;
+      text-align: center;
+    }
   }
 }
 </style>

src/layouts/default.vue

@@ -9,7 +9,7 @@
       <router-view />
     </v-main>
 
-    <AppFooter />
+    <!-- <AppFooter /> -->
   </v-app>
 </template>
 

src/utils/SpaceScene/SpaceScene.js

@@ -48,7 +48,6 @@ class SpaceScene extends EmptyScene {
   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 = []

src/utils/SpaceScene/core/loop.js

@@ -1,4 +1,5 @@
 import { Clock } from "three";
+import { ref } from 'vue';
 import { RENDER_TIMES } from "@/utils/SpaceScene/utils/smorrery_const.js";
 import { calculateJulianDateSinceJ2000} from "@/utils/SpaceScene/utils/calculator.js";
 // const clock = new Clock();
@@ -18,6 +19,10 @@ class Loop {
     this.currentDate = currentDate;
     this.timeDirection = timeDirection;
     this.isPlayed = isPlayed
+
+    // Reactivity API for watch from Outer
+    this.currentDate_ref = ref('')
+    this.currentDate_ref.value = currentDate.getTime();
   }
 
   start() {
@@ -37,6 +42,18 @@ class Loop {
     });
   }
 
+  // 改變日期
+  set shiftDate(val) {
+    this.currentDate = new Date(val)
+    this.currentDate_ref.value = this.currentDate.getTime();
+    const delta = calculateJulianDateSinceJ2000(this.currentDate)
+    for (const object of this.updatables) {
+      object.tick(delta, this.scene);
+      object.trace = []
+    }
+
+  }
+
 
   set played(display_st) {
     if(display_st === 1) {
@@ -54,6 +71,10 @@ class Loop {
     }
   }
 
+  set timeScaleRate(rate) {
+    this.timeScale = rate
+  }
+
   stop() {
     fps_timer = 0
     this.renderer.setAnimationLoop(null);
@@ -73,9 +94,11 @@ class Loop {
       } else if (this.currentDate > MAX_DATE) {
         this.currentDate = MAX_DATE;
       }  
-      console.log(this.timeDirection)
       const delta = calculateJulianDateSinceJ2000(this.currentDate)
 
+      // Reactivity API for watch from Outer
+      this.currentDate_ref.value = this.currentDate.getTime()
+
       for (const object of this.updatables) {
         object.tick(delta, this.scene);
       }