Add FPS Control and Scene CrtlBar.

src/components/SmorreryScence.vue

@@ -1,16 +1,96 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { SpaceScene } from "@/utils/SpaceScene/SpaceScene.js";
-const target = ref()
+const target = ref();
 
-onMounted(()=>{
-    const target_s = document.querySelector('#target')
-    const space_scene = new SpaceScene(target_s)
+const control_btn_icon = ref('mdi-pause')
+const control_st = ref(false)
+
+const forward_btn_icon = ref('mdi-skip-backward') //mdi mdi-fast-backward
+const forward_st = ref(true)
+
+
+let space_scene
+
+
+// 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()
+  }
+}
+
+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)
+  }
+  space_scene.stop()
+  space_scene.start()
+}
+
+onMounted(() => {
+  const target_s = document.querySelector("#target");
+  space_scene = new SpaceScene(target_s);
+  if(control_st.value) {
+    space_scene.start();
+  }
+});
 </script>
 
 <template>
   <div id="target" ref="target">
+    <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>
   </div>
+
 </template>
+
+<style lang="scss">
+#target {
+  #info {
+    position: absolute;
+    top: 5%;
+    width: 100%;
+    text-align: center;
+    color: white;
+    background-color: transparent;
+    z-index: 1;
+    font-family: monospace;
+  }
+  #timeControl {
+    position: absolute;
+    left: 50%;
+    bottom: 10%;
+    transform: translateX(-50%);
+    background: rgba(205, 140, 140, 0.7);
+    padding: 10px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    color: white;
+    font-family: monospace;
+    z-index: 1;
+
+    .video-btn {
+      margin-left: 10px;
+    }
+  }
+}
+
+
+</style>

src/utils/SpaceScene/SpaceScene.js

@@ -76,6 +76,22 @@ class SpaceScene {
     const resizer = new Resizer(container, camera, renderer);
   }
 
+  setTimeDirect(direct = 1) {
+    loop.setTimeDirect(direct)
+
+    // 清空路徑
+    orbitingObjects.forEach((obj) => {
+      obj.trace = []
+    })
+
+  }
+
+  clearOrbitingTrace() {
+    orbitingObjects.forEach((obj) => {
+      obj.trace = []
+    })
+  }
+
   render() {
     // draw a single frame
     renderer.render(scene, camera);

src/utils/SpaceScene/core/loop.js

@@ -1,10 +1,12 @@
-// import { Clock } from "three";
-// import { MAX_DATE, MAX_DATE } from "@/utils/SpaceScene/utils/smorrery_const.js";
-import { calculateJulianDateSinceJ2000 } from "@/utils/SpaceScene/utils/calculator.js";
+import { Clock } from "three";
+import { RENDER_TIMES } from "@/utils/SpaceScene/utils/smorrery_const.js";
+import { calculateJulianDateSinceJ2000} from "@/utils/SpaceScene/utils/calculator.js";
 // const clock = new Clock();
 const MIN_DATE = new Date(1900, 0, 1);
 const MAX_DATE = new Date(2100, 11, 31);
 
+let fps_timer = 0
+const clock = new Clock();
 
 class Loop {
   constructor(camera, scene, renderer, timeScale, currentDate, timeDirection) {
@@ -22,25 +24,34 @@ class Loop {
       // tell every animated object to tick forward one frame
       this.tick();
 
+      // Frames 控制
+      let delta_times = clock.getDelta();
+      fps_timer = fps_timer + delta_times
+
       // render a frame
-      this.renderer.render(this.scene, this.camera);
+      if(fps_timer > RENDER_TIMES) {
+        this.renderer.render(this.scene, this.camera);
+        fps_timer = 0
+      }
     });
   }
 
+  setTimeDirect(direct){
+    if(direct === 1) {
+      this.timeDirection = 1
+    }else{
+      this.timeDirection = 0
+    }
+  }
+
   stop() {
+    fps_timer = 0
     this.renderer.setAnimationLoop(null);
   }
 
   tick() {
-    // only call the getDelta function once per frame!
-    // const delta = clock.getDelta();
-
-    // console.log(
-    //   `The last frame rendered in ${delta * 1000} milliseconds`,
-    // );
-
     const oneFrameInMilliseconds = this.timeScale * 24 * 60 * 60 * 1000;
-    if (this.timeDirection > 0) {
+    if (this.timeDirection >= 1) {
       this.currentDate.setTime(this.currentDate.getTime() + oneFrameInMilliseconds);
     } else {
       this.currentDate.setTime(this.currentDate.getTime() - oneFrameInMilliseconds);

src/utils/SpaceScene/utils/smorrery_const.js

@@ -34,6 +34,9 @@ export const MAX_TRACE_STEPS = 1000
 export const radiusScale = 0.5;
 export const spaceScale = 20;
 
+export const MAX_FPS = 45
+export const RENDER_TIMES = 1/ MAX_FPS
+
 export const SUN_INFO = {
   name: "Sun",
   radius: 9,