speed, positions, reset

src/SharedPlanetState.jsx

@@ -26,6 +26,8 @@ import { Skybox } from "./skybox.jsx";
 import { ReactPropTypes } from "react";
 import { MyContext } from "./Scene3.jsx";
 
+export const PlanetOverlayContext = createContext();
+
 export const SharedPlanetState = () => {
   const { customData } = useContext(MyContext);
 
@@ -50,16 +52,13 @@ export const SharedPlanetState = () => {
   };
   customData.current["handleVisibility"] = handleVisibility;
 
-  let [resetB, setResetB] = useState(false);
-
   const handleReset = () => {
     setSpeed(0);
-    dateTime.current = new Date(Date.now());
   };
   customData.current["handleReset"] = handleReset;
 
   //set speed (timeinterval between positions 60000ms*speed)
-  const [speed, setSpeed] = useState(0);
+  const [speed, setSpeed] = useState(1);
   const updateSpeed = (newSpeed) => {
     setSpeed(newSpeed);
     speedChanged.current = true;
@@ -75,11 +74,12 @@ export const SharedPlanetState = () => {
 
     //???????Why when i set the speed to 0 it doesnt immidiatly stop? good enough for know
     if (speedChanged.current) {
-      setPosState(oldState.slice(0, posCounter));
+      setPosState(oldState.slice(0, posCounter + 10));
       speedChanged.current = true;
     }
 
-    if (posCounter % 250 == 0 || speedChanged.current) {
+    if (oldState.length - posCounter < 1500 || speedChanged.current) {
+      console.log("fetch");
       if (oldState.length > 0 && speed > 0) {
         dateTime.current = new Date(
           oldState[oldState.length - 1].date
@@ -92,12 +92,7 @@ export const SharedPlanetState = () => {
             `?date=${dateTime.current}&speed=${speed}`
         );
         let response = await res.json();
-        //console.log(response);
-        if (true) {
         setPosState(oldState.concat(response));
-
-          //console.log(dateTime.current);
-        }
         speedChanged.current = false;
       };
       fetchData();
@@ -106,12 +101,8 @@ export const SharedPlanetState = () => {
 
   return (
     <>
-      <Earth
-        speed={speed}
-        getPosition={getPositions}
-        nameVis={nameVis}
-        iconVis={iconVis}
-      />
+      <PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
+        <Earth speed={speed} getPosition={getPositions} />
         <Mars speed={speed} />
         <Jupiter speed={speed} />
         <Saturn speed={speed} />
@@ -120,6 +111,7 @@ export const SharedPlanetState = () => {
         <Neptune speed={speed} />
         <Uranus speed={speed} />
         <Sun />
+      </PlanetOverlayContext.Provider>
     </>
   );
 };

src/earth.jsx

@@ -36,68 +36,51 @@ import { PlanetOverlay } from "./planetOverlay";
 import { PlanetInfo } from "./planetInfo";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
+import { PlanetOverlayContext } from "./SharedPlanetState";
 
-export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => {
+export const Earth = ({ positions, speed, getPosition }) => {
   let distanceScaleFactor = 1000000;
-  const [poss, setPos] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
-  const [getAgain, setGetAgain] = useState(false);
-  //const [speed, setSpeed] = useState(60);
+  const [posArr, setPosArr] = useState([]);
+  const [lineArr, setLineArr] = useState([]);
   const line = useRef();
   const clouds = useRef("clouds");
   const earth = useRef();
   const group = useRef();
-  const firstRef = useRef(true);
-  let linePoss = [];
   const { customData } = useContext(MyContext);
 
+  let planetPositionIndex = useRef(0);
+
   useLayoutEffect(() => {
-    group.current.userData.counter = 0;
     group.current.userData.name = "Earth";
     group.current.userData.nearOvOp = 60;
     group.current.userData.scolor = "lightgreen";
-    const fetchData = async () => {
-      let res = await fetch(
-        `http://127.0.0.1:8000/duration/earth` +
-          `?date=${new Date(Date.now())}&speed=0`
-      );
-      let response = await res.json();
-      if (speed == 0) setPos([response]);
-    };
-    fetchData();
-    const interval = setInterval(() => {
-      fetchData();
-    }, 6000);
-    return () => clearInterval(interval);
-  }, [speed]);
-
-  useEffect(() => {
-    console.log(speed);
-  }, [speed]);
-
-  let currLinePoss = [];
+  });
 
   useFrame(() => {
     clouds.current.rotation.y += 0.00025;
     earth.current.rotation.y += 0.00015;
-    if (speed > 0)
-      getPosition("earth", setPos, poss, group.current.userData.counter);
-    //console.log(poss);
-    if (true && group.current.userData.counter < poss.length) {
+    getPosition("earth", setPosArr, posArr, planetPositionIndex.current);
+
+    //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) {
       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
         )
       );
-      //console.log(group.current.userData.counter);
-      group.current.userData.counter++;
+      planetPositionIndex.current += Number(speed);
+      if (speed > 0) setLineArr(lineArr.concat(group.current.position));
     }
+    console.log(lineArr.length);
+    console.log(posArr.length);
   }, []);
 
   const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
@@ -118,7 +101,7 @@ export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => {
   return (
     <>
       <group ref={group}>
-        <PlanetOverlay planet={group} nameVis={nameVis} iconVis={iconVis} />
+        <PlanetOverlay planet={group} />
         <mesh ref={earth}>
           <sphereGeometry args={[6371.0 / 6000, 50, 50]} />
           <meshPhongMaterial

src/omnioverlay.jsx

@@ -33,9 +33,9 @@ export const ScreenOverlay = () => {
       <div className="slidecontainer">
         <input
           type="range"
-          min="10"
-          max="190"
-          step="60"
+          min="1"
+          max="10"
+          step="1"
           className="slider"
           id="myRange"
           onChange={handleChange}

src/planetOverlay.jsx

@@ -26,11 +26,13 @@ import { MyContext } from "./Scene3";
 import "./styles.css";
 
 import PropTypes from "prop-types";
+import { PlanetOverlayContext } from "./SharedPlanetState";
 
-export const PlanetOverlay = ({ planet, nameVis, iconVis }) => {
+export const PlanetOverlay = ({ planet }) => {
   const ref = useRef();
   let [opacity, setOpacity] = useState(0);
   let [minDistance, setMinDistance] = useState(0);
+  const { nameVis, iconVis } = useContext(PlanetOverlayContext);
 
   let [scolor, setSColor] = useState("white");
   let [follow, setFollow] = useState(false);