omg all planets moving

src/CameraControls.jsx

@@ -0,0 +1,56 @@
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { OrbitControls, PositionPoint } from "@react-three/drei";
+import React, {
+  Suspense,
+  useRef,
+  createContext,
+  memo,
+  useState,
+  useContext,
+} from "react";
+import * as THREE from "three";
+
+import { ScreenOverlay } from "./omnioverlay.jsx";
+import { SharedPlanetState } from "./SharedPlanetState.jsx";
+import { Skybox } from "./skybox.jsx";
+import { MyContext } from "./Scene3.jsx";
+
+export const CameraController = () => {
+  const { customData } = useContext(MyContext);
+  const [distance, setDistance] = useState(5);
+  const [lookAt, setLookAt] = useState(new THREE.Vector3(0, 0, 0));
+  const [position, setPosition] = useState(new THREE.Vector3(0, 0, 200));
+  const [animate, setAnimate] = useState(true);
+  const { camera } = useThree();
+  const state = useThree();
+
+  const relativePosition = new THREE.Vector3(0, 0, distance);
+
+  const handleLookAt = (pos) => {
+    setLookAt(pos);
+  };
+  customData.current["handleLookAt"] = handleLookAt;
+
+  const handlePosition = (pos) => {
+    const newPosition = pos.clone().add(relativePosition);
+    setPosition(newPosition);
+    setAnimate(true);
+    //console.log(newPosition);
+  };
+  customData.current["handlePosition"] = handlePosition;
+
+  useFrame(() => {
+    //console.log(state);
+    if (animate) {
+      camera.position.lerp(position, 0.1);
+      camera.lookAt(lookAt);
+      if (camera.position.distanceTo(position) < 0.1) {
+        setAnimate(false);
+      }
+    }
+    //cameraRef.current.position.addScalar(2);
+    //camera.position.addScalar(1);
+    //console.log(camera);
+  });
+  return <></>;
+};

src/Scene3.jsx

@@ -5,6 +5,7 @@ import React, { Suspense, useRef, createContext, memo } from "react";
 import { ScreenOverlay } from "./omnioverlay.jsx";
 import { SharedPlanetState } from "./SharedPlanetState.jsx";
 import { Skybox } from "./skybox.jsx";
+import { CameraController } from "./CameraControls.jsx";
 
 export const MyContext = createContext();
 
@@ -25,6 +26,7 @@ const SolarSystemScene = () => {
               position: [0, 100, 200],
             }}
           >
+            <CameraController />
             <Skybox />
             <ambientLight intensity={0.5} />
             <SharedPlanetState />

src/SharedPlanetState.jsx

@@ -30,7 +30,6 @@ export const PlanetOverlayContext = createContext();
 
 export const SharedPlanetState = () => {
   const { customData } = useContext(MyContext);
-  let fetchnum = useRef(0);
 
   let [nameVis, setNameVis] = useState("visible");
   let [iconVis, setIconVis] = useState("visible");
@@ -59,7 +58,7 @@ export const SharedPlanetState = () => {
   customData.current["handleReset"] = handleReset;
 
   //set speed (timeinterval between positions 60000ms*speed)
-  const [speed, setSpeed] = useState(1);
+  const [speed, setSpeed] = useState(100);
   const updateSpeed = (newSpeed) => {
     setSpeed(newSpeed);
     setSpeedChanged(true);

src/earth.jsx

@@ -125,7 +125,7 @@ export const Earth = ({ speed, getPosition, speedChanged }) => {
         linePos={lineArr.current}
         planet={group}
         color={"lightgreen"}
-        lineLength={20}
+        lineLength={100}
       />
       <group ref={group}>
         <PlanetOverlay planet={group} />

src/jupiter.jsx

@@ -15,7 +15,7 @@ import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 
-export const Jupiter = ({ getPosition, speed }) => {
+export const Jupiter = ({ getPosition, speed, speedChanged }) => {
   const group = useRef();
   const col = useLoader(TextureLoader, "../img/jupiter/jupiter2_4k.jpg");
 
@@ -23,6 +23,7 @@ export const Jupiter = ({ getPosition, speed }) => {
   const lineArr = useRef([]);
 
   let planetPositionIndex = useRef(0);
+  const lastPositionUpdate = useRef(0);
 
   let distanceScaleFactor = 1000000;
 
@@ -32,13 +33,19 @@ export const Jupiter = ({ getPosition, speed }) => {
     group.current.userData.scolor = "yellow";
   });
 
-  useFrame(() => {
+  useFrame(({ clock }) => {
     //getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current);
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      //console.log("gethis");
+      getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
+    }
 
     //if speed is 0 set the date to current date get from posArr
     //search for current date in posArr an set planetPositionIndex
     if (speed == 0) planetPositionIndex.current = 0;
-    if (false && planetPositionIndex.current < posArr.length) {
+    if (true && planetPositionIndex.current < posArr.length) {
       group.current.position.set(
         Number(
           posArr[planetPositionIndex.current].position.x / distanceScaleFactor
@@ -75,7 +82,7 @@ export const Jupiter = ({ getPosition, speed }) => {
         linePos={lineArr.current}
         planet={group}
         color={"yellow"}
-        lineLength={20}
+        lineLength={400}
       />
       <group ref={group}>
         <PlanetOverlay planet={group} />

src/mars.jsx

@@ -82,7 +82,7 @@ export const Mars = ({ speed, getPosition, speedChanged }) => {
         linePos={lineArr.current}
         planet={group}
         color={"orange"}
-        lineLength={20}
+        lineLength={150}
       />
       <group ref={group}>
         <PlanetOverlay planet={group} />

src/mercury.jsx

@@ -19,12 +19,13 @@ import "./styles.css";
 import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
 
-export const Mercury = ({ speed, getPosition }) => {
+export const Mercury = ({ speed, getPosition, speedChanged }) => {
   const [posArr, setPosArr] = useState([]);
   const lineArr = useRef([]);
   let planetPositionIndex = useRef(0);
   let distanceScaleFactor = 1000000;
   const mercury = useRef();
+  const lastPositionUpdate = useRef(0);
   const group = useRef();
 
   useLayoutEffect(() => {
@@ -33,13 +34,19 @@ export const Mercury = ({ speed, getPosition }) => {
     group.current.userData.scolor = "#a34f5f";
   }, []);
 
-  useFrame(() => {
+  useFrame(({ clock }) => {
     //getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      //console.log("gethis");
+      getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
+    }
 
     //if speed is 0 set the date to current date get from posArr
     //search for current date in posArr an set planetPositionIndex
     if (speed == 0) planetPositionIndex.current = 0;
-    if (false && planetPositionIndex.current < posArr.length) {
+    if (true && planetPositionIndex.current < posArr.length) {
       group.current.position.set(
         Number(
           posArr[planetPositionIndex.current].position.x / distanceScaleFactor
@@ -51,7 +58,7 @@ export const Mercury = ({ speed, getPosition }) => {
           posArr[planetPositionIndex.current].position.z / distanceScaleFactor
         )
       );
-      planetPositionIndex.current += Number(speed);
+      planetPositionIndex.current += Number(1);
       lineArr.current.push(
         new THREE.Vector3(
           Number(
@@ -75,7 +82,7 @@ export const Mercury = ({ speed, getPosition }) => {
         linePos={lineArr.current}
         planet={group}
         color={"#a34f5f"}
-        lineLength={20}
+        lineLength={100}
       />
       <group ref={group}>
         <PlanetOverlay planet={group} />

src/neptune.jsx

@@ -37,18 +37,19 @@ import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 
-export const Neptune = ({ positions }) => {
+export const Neptune = ({ speedChanged, getPosition, speed }) => {
   const [poss, setPos] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
-  const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
   let distanceScaleFactor = 1000000;
   const neptune = useRef();
   const group = useRef();
+  const lineArr = useRef([]);
+
+  const [posArr, setPosArr] = useState([]);
+
+  let planetPositionIndex = useRef(0);
 
-  const firstRef = useRef(true);
-  let linePoss = [];
   const { customData } = useContext(MyContext);
+  const lastPositionUpdate = useRef(0);
 
   useLayoutEffect(() => {
     group.current.userData.counter = 0;
@@ -57,21 +58,44 @@ export const Neptune = ({ positions }) => {
     group.current.userData.scolor = "darkblue";
   }, []);
 
-  useFrame(() => {
-    if (false && group.current.userData.counter < poss.length) {
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      //console.log("gethis");
+      getPosition("neptune", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
+    }
+    if (speed == 0) planetPositionIndex.current = 0;
+    if (
+      true &&
+      planetPositionIndex.current < posArr.length &&
+      posArr.length > 0
+    ) {
       group.current.position.set(
         Number(
-          poss[group.current.userData.counter].position.x / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.y / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.z / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+        )
+      );
+      planetPositionIndex.current += Number(1);
+      lineArr.current.push(
+        new THREE.Vector3(
+          Number(
+            posArr[planetPositionIndex.current].position.x / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.y / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+          )
         )
       );
-      //console.log(group.current.userData.counter);
-      group.current.userData.counter++;
     }
   }, []);
 
@@ -86,6 +110,12 @@ export const Neptune = ({ positions }) => {
   const col = useLoader(TextureLoader, "../img/neptune/neptunemap.jpg");
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"darkblue"}
+        lineLength={20}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={neptune}>

src/planetOverlay.jsx

@@ -62,6 +62,8 @@ export const PlanetOverlay = ({ planet }) => {
         case 0:
           controls.current.target.copy(planet.current.position.clone());
           customData.current.showInfo(planet.current.userData);
+          customData.current.handlePosition(planet.current.position);
+          customData.current.handleLookAt(planet.current.position);
           console.log(customData);
           //startFollow();
           break;

src/saturn.jsx

@@ -59,11 +59,12 @@ void main() {
 
 extend({ SaturnRingMaterial });
 
-export const Saturn = ({ positions }) => {
-  const [poss, setPos] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
-  const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
+export const Saturn = ({ speed, speedChanged, getPosition }) => {
+  const [posArr, setPosArr] = useState([]);
+  const lineArr = useRef([]);
+  const lastPositionUpdate = useRef(0);
+
+  let planetPositionIndex = useRef(0);
   const saturn = useRef("saturn");
   const group = useRef("group");
   const col = useLoader(TextureLoader, "../img/saturn/saturnmap.jpg");
@@ -74,10 +75,6 @@ export const Saturn = ({ positions }) => {
   );
   let distanceScaleFactor = 1000000;
 
-  const firstRef = useRef(true);
-  let linePoss = [];
-  const { customData } = useContext(MyContext);
-
   useLayoutEffect(() => {
     group.current.userData.counter = 0;
     group.current.userData.name = "Saturn";
@@ -85,34 +82,59 @@ export const Saturn = ({ positions }) => {
     group.current.userData.scolor = "red";
   }, []);
 
-  useFrame(() => {
-    if (true && group.current.userData.counter < poss.length) {
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      //console.log("gethis");
+      getPosition("saturn", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
+    }
+    //console.log("arrlength" + posArr.length);
+
+    //if speed is 0 set the date to current date get from posArr
+    //search for current date in posArr an set planetPositionIndex
+    if (speed == 0) planetPositionIndex.current = 0;
+    if (
+      true &&
+      planetPositionIndex.current < posArr.length &&
+      posArr.length > 0
+    ) {
       group.current.position.set(
         Number(
-          poss[group.current.userData.counter].position.x / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.y / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.z / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+        )
+      );
+      planetPositionIndex.current += Number(1);
+      lineArr.current.push(
+        new THREE.Vector3(
+          Number(
+            posArr[planetPositionIndex.current].position.x / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.y / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+          )
         )
       );
-      //console.log(group.current.userData.counter);
-      group.current.userData.counter++;
     }
   }, []);
 
-  const changeSpeed = (newSpeed) => {
-    setPos(poss.slice(0, group.current.userData.counter + 10));
-    setGetAgain(true);
-    console.log(poss);
-    setSpeed(newSpeed);
-  };
-
-  customData.current["changeSaturnSpeed"] = changeSpeed;
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"red"}
+        lineLength={300}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={saturn}>

src/uranus.jsx

@@ -36,20 +36,17 @@ import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 
-export const Uranus = ({ positions }) => {
+export const Uranus = ({ speed, speedChanged, getPosition }) => {
   let distanceScaleFactor = 1000000;
+  const [posArr, setPosArr] = useState([]);
+  const lineArr = useRef([]);
+  const lastPositionUpdate = useRef(0);
+
+  let planetPositionIndex = useRef(0);
 
-  const [poss, setPos] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
-  const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
   const uranus = useRef();
   const group = useRef();
 
-  const firstRef = useRef(true);
-  let linePoss = [];
-  const { customData } = useContext(MyContext);
-
   useLayoutEffect(() => {
     group.current.userData.counter = 0;
     group.current.userData.name = "Uranus";
@@ -57,63 +54,60 @@ export const Uranus = ({ positions }) => {
     group.current.userData.scolor = "lightblue";
   }, []);
 
-  useFrame(() => {
-    if (poss.length % 1000 == 0) {
-      setPos(poss.slice(0, 500));
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      //console.log("gethis");
+      getPosition("uranus", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
     }
-    let date;
-    if (firstRef.current) {
-      date = new Date(Date.now());
-      date.setMilliseconds(0);
-      date.setSeconds(0);
-    }
-    //console.log(poss.length);
-    //console.log(group.current.userData.counter);
-    if (false && group.current.userData.counter % 250 == 0 && getAgain) {
-      if (!firstRef.current)
-        date = new Date(poss[poss.length - 1].date).toUTCString();
-      const fetchData = async () => {
-        let res = await fetch(
-          `http://127.0.0.1:8000/duration/uranus?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
+    //console.log("arrlength" + posArr.length);
 
-        setPos(poss.concat(response)); // parse json
-        firstRef.current = false;
-        setGetAgain(false);
-        //console.log(`psss : ${poss.length}`);
-      };
-      fetchData();
-    }
-    if (true && group.current.userData.counter < poss.length) {
+    //if speed is 0 set the date to current date get from posArr
+    //search for current date in posArr an set planetPositionIndex
+    if (speed == 0) planetPositionIndex.current = 0;
+    if (
+      true &&
+      planetPositionIndex.current < posArr.length &&
+      posArr.length > 0
+    ) {
       group.current.position.set(
         Number(
-          poss[group.current.userData.counter].position.x / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.y / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.z / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+        )
+      );
+      planetPositionIndex.current += Number(1);
+      lineArr.current.push(
+        new THREE.Vector3(
+          Number(
+            posArr[planetPositionIndex.current].position.x / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.y / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+          )
         )
       );
-      //console.log(group.current.userData.counter);
-      group.current.userData.counter++;
     }
   }, []);
 
-  const changeSpeed = (newSpeed) => {
-    setPos(poss.slice(0, group.current.userData.counter + 10));
-    setGetAgain(true);
-    console.log(poss);
-    setSpeed(newSpeed);
-  };
-
-  customData.current["changeUranusSpeed"] = changeSpeed;
-
   const col = useLoader(TextureLoader, "../img/uranus/uranusmap.jpg");
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"lightblue"}
+        lineLength={200}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={uranus}>

src/venus.jsx

@@ -36,15 +36,15 @@ import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 
-export const Venus = ({ positions }) => {
+export const Venus = ({ speed, speedChanged, getPosition }) => {
   let distanceScaleFactor = 1000000;
+  const [posArr, setPosArr] = useState([]);
+  const lineArr = useRef([]);
+  const lastPositionUpdate = useRef(0);
+
+  let planetPositionIndex = useRef(0);
   const venus = useRef();
   const group = useRef();
-  const firstRef = useRef(true);
-  const [poss, setPos] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
-  const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
   const { customData } = useContext(MyContext);
 
   useLayoutEffect(() => {
@@ -54,48 +54,61 @@ export const Venus = ({ positions }) => {
     group.current.userData.scolor = "brown";
   }, []);
 
-  useFrame(() => {
-    if (poss.length % 1000 == 0) {
-      setPos(poss.slice(0, 500));
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      //console.log("gethis");
+      getPosition("venus", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
     }
-    let date;
-    if (firstRef.current) {
-      date = new Date(Date.now());
-      date.setMilliseconds(0);
-      date.setSeconds(0);
-    }
-    //console.log(poss.length);
-    //console.log(group.current.userData.counter);
-    if (false && group.current.userData.counter < poss.length) {
+    //console.log("arrlength" + posArr.length);
+
+    //if speed is 0 set the date to current date get from posArr
+    //search for current date in posArr an set planetPositionIndex
+    if (speed == 0) planetPositionIndex.current = 0;
+    if (
+      true &&
+      planetPositionIndex.current < posArr.length &&
+      posArr.length > 0
+    ) {
       group.current.position.set(
         Number(
-          poss[group.current.userData.counter].position.x / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.y / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
         ),
         Number(
-          poss[group.current.userData.counter].position.z / distanceScaleFactor
+          posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+        )
+      );
+      planetPositionIndex.current += Number(1);
+      lineArr.current.push(
+        new THREE.Vector3(
+          Number(
+            posArr[planetPositionIndex.current].position.x / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.y / distanceScaleFactor
+          ),
+          Number(
+            posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+          )
         )
       );
-      //console.log(group.current.userData.counter);
-      group.current.userData.counter++;
     }
   }, []);
 
-  const changeSpeed = (newSpeed) => {
-    setPos(poss.slice(0, group.current.userData.counter + 10));
-    setGetAgain(true);
-    console.log(poss);
-    setSpeed(newSpeed);
-  };
-
-  customData.current["changeVenusSpeed"] = changeSpeed;
-
   const col = useLoader(TextureLoader, "../img/venus/venusmap.jpg");
   const bump = useLoader(TextureLoader, "../img/venus/venusbump.jpg");
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"brown"}
+        lineLength={100}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={venus}>