posArr not sliced for some reason

src/SharedPlanetState.jsx

@@ -30,6 +30,7 @@ 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");
@@ -61,25 +62,29 @@ export const SharedPlanetState = () => {
   const [speed, setSpeed] = useState(1);
   const updateSpeed = (newSpeed) => {
     setSpeed(newSpeed);
-    speedChanged.current = true;
+    setSpeedChanged(true);
   };
   customData.current["updateSpeed"] = updateSpeed;
 
   //get position data and reset if necessary
   const dateTime = useRef(new Date(Date.now()));
-  const speedChanged = useRef(false);
+  const [speedChanged, setSpeedChanged] = useState();
 
   const getPositions = (planet, setPosState, oldState, posCounter) => {
     //if speed was changed delete old data an get new data
 
     //???????Why when i set the speed to 0 it doesnt immidiatly stop? good enough for know
-    if (speedChanged.current) {
+    if (speedChanged) {
-      setPosState(oldState.slice(0, posCounter + 10));
+      //console.log(oldState.length);
-      speedChanged.current = true;
+      //console.log(posCounter);
+      setPosState(oldState.slice(0, 500));
+
+      //console.log("here" + speedChanged);
     }
 
-    if (oldState.length - posCounter < 1500 || speedChanged.current) {
+    if (oldState.length - posCounter < 1000 || speedChanged) {
-      //console.log("fetch");
+      //console.log("there" + speedChanged);
+      setSpeedChanged(false);
       if (oldState.length > 0 && speed > 0) {
         dateTime.current = new Date(
           oldState[oldState.length - 1].date
@@ -93,23 +98,32 @@ export const SharedPlanetState = () => {
         );
         let response = await res.json();
         setPosState(oldState.concat(response));
-        speedChanged.current = false;
       };
+
       fetchData();
     }
+    //console.log(oldState.length);
   };
 
   return (
     <>
       <PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
-        <Earth speed={speed} getPosition={getPositions} />
+        <Earth
-        <Mars speed={speed} />
+          speed={speed}
-        <Jupiter speed={speed} />
+          getPosition={getPositions}
-        <Saturn speed={speed} />
+          speedChanged={speedChanged}
-        <Mercury speed={speed} />
+        />
-        <Venus speed={speed} />
+        <Mars
-        <Neptune speed={speed} />
+          speed={speed}
-        <Uranus speed={speed} />
+          getPosition={getPositions}
+          speedChanged={speedChanged}
+        />
+        <Jupiter speed={speed} getPosition={getPositions} />
+        <Saturn speed={speed} getPosition={getPositions} />
+        <Mercury speed={speed} getPosition={getPositions} />
+        <Venus speed={speed} getPosition={getPositions} />
+        <Neptune speed={speed} getPosition={getPositions} />
+        <Uranus speed={speed} getPosition={getPositions} />
         <Sun />
       </PlanetOverlayContext.Provider>
     </>

src/earth.jsx

@@ -38,7 +38,7 @@ import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 import { PlanetOverlayContext } from "./SharedPlanetState";
 
-export const Earth = ({ positions, speed, getPosition }) => {
+export const Earth = ({ speed, getPosition, speedChanged }) => {
   let distanceScaleFactor = 1000000;
   const [posArr, setPosArr] = useState([]);
   const lineArr = useRef([]);
@@ -46,7 +46,8 @@ export const Earth = ({ positions, speed, getPosition }) => {
   const clouds = useRef("clouds");
   const earth = useRef();
   const group = useRef();
-  const { customData } = useContext(MyContext);
+  const first = useRef(true);
+  const lastPositionUpdate = useRef(0);
 
   let planetPositionIndex = useRef(0);
 
@@ -56,15 +57,25 @@ export const Earth = ({ positions, speed, getPosition }) => {
     group.current.userData.scolor = "lightgreen";
   });
 
-  useFrame(() => {
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      //console.log("gethis");
+      getPosition("earth", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
+    }
+    //console.log("arrlength" + posArr.length);
     clouds.current.rotation.y += 0.00025;
     earth.current.rotation.y += 0.00015;
-    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) {
+    if (
+      true &&
+      planetPositionIndex.current < posArr.length &&
+      posArr.length > 0
+    ) {
       group.current.position.set(
         Number(
           posArr[planetPositionIndex.current].position.x / distanceScaleFactor
@@ -76,7 +87,7 @@ export const Earth = ({ positions, speed, getPosition }) => {
           posArr[planetPositionIndex.current].position.z / distanceScaleFactor
         )
       );
-      planetPositionIndex.current += Number(speed);
+      planetPositionIndex.current += Number(1);
       lineArr.current.push(
         new THREE.Vector3(
           Number(
@@ -113,7 +124,7 @@ export const Earth = ({ positions, speed, getPosition }) => {
       <PlanetPath
         linePos={lineArr.current}
         planet={group}
-        color={"yellow"}
+        color={"lightgreen"}
         lineLength={20}
       />
       <group ref={group}>

src/jupiter.jsx

@@ -15,83 +15,68 @@ import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 
-export const Jupiter = ({ positions }) => {
+export const Jupiter = ({ getPosition, speed }) => {
-  const [poss, setPos] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
-  const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
-  const jupiter = useRef("jupiter");
   const group = useRef();
   const col = useLoader(TextureLoader, "../img/jupiter/jupiter2_4k.jpg");
 
+  const [posArr, setPosArr] = useState([]);
+  const lineArr = useRef([]);
+
+  let planetPositionIndex = useRef(0);
+
   let distanceScaleFactor = 1000000;
 
-  const firstRef = useRef(true);
-  let linePoss = [];
-  const { customData } = useContext(MyContext);
-
   useEffect(() => {
-    group.current.userData.counter = 0;
     group.current.userData.name = "Jupiter";
     group.current.userData.nearOvOp = 800;
     group.current.userData.scolor = "yellow";
   });
 
   useFrame(() => {
-    if (poss.length % 1000 == 0) {
+    //getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current);
-      setPos(poss.slice(0, 500));
-    }
-    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 (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/jupiter?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
 
-        setPos(poss.concat(response)); // parse json
+    //if speed is 0 set the date to current date get from posArr
-        firstRef.current = false;
+    //search for current date in posArr an set planetPositionIndex
-        setGetAgain(false);
+    if (speed == 0) planetPositionIndex.current = 0;
-        //console.log(`psss : ${poss.length}`);
+    if (false && planetPositionIndex.current < posArr.length) {
-      };
-      fetchData();
-    }
-    if (true && group.current.userData.counter < poss.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);
+      planetPositionIndex.current += Number(1);
-      group.current.userData.counter++;
+      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(posArr.length);
+      //console.log(planetPositionIndex.current);
     }
   }, []);
 
-  const changeSpeed = (newSpeed) => {
-    setPos(poss.slice(0, group.current.userData.counter + 10));
-    setGetAgain(true);
-    console.log(poss);
-    setSpeed(newSpeed);
-  };
-
-  customData.current["changeJupiterSpeed"] = changeSpeed;
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"yellow"}
+        lineLength={20}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh>

src/mars.jsx

@@ -14,81 +14,76 @@ import { TextureLoader } from "three/src/loaders/TextureLoader";
 import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
 
-export const Mars = ({ positions }) => {
+export const Mars = ({ speed, getPosition, speedChanged }) => {
+  const [posArr, setPosArr] = useState([]);
+  const lineArr = useRef([]);
+  const lastPositionUpdate = useRef(0);
+
+  let planetPositionIndex = useRef(0);
   const mars = useRef("mars");
   const group = useRef("group");
-  const [poss, setPos] = useState([]);
-  const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
-  const firstRef = useRef(true);
   const col = useLoader(TextureLoader, "../img/mars/mars_1k_color.jpg");
   const bump = useLoader(TextureLoader, "../img/mars/mars_1k_topo.jpg");
   const norm = useLoader(TextureLoader, "../img/mars/mars_1k_normal.jpg");
   let distanceScaleFactor = 1000000;
-  const { customData } = useContext(MyContext);
 
   useLayoutEffect(() => {
-    group.current.userData.counter = 0;
     group.current.userData.name = "Mars";
     group.current.userData.nearOvOp = 40;
     group.current.userData.scolor = "orange";
   }, []);
 
-  useFrame(() => {
+  useFrame(({ clock }) => {
-    if (poss.length % 1000 == 0) {
+    //getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
-      setPos(poss.slice(0, 500));
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    //console.log(speedChanged);
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
+      getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
+      //console.log(planetPositionIndex);
+      //console.log("getpos");
+      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 (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/mars?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
 
-        setPos(poss.concat(response)); // parse json
+    //if speed is 0 set the date to current date get from posArr
-        firstRef.current = false;
+    //search for current date in posArr an set planetPositionIndex
-        setGetAgain(false);
+    if (speed == 0) planetPositionIndex.current = 0;
-        //console.log(`psss : ${poss.length}`);
+    if (true && planetPositionIndex.current < posArr.length) {
-      };
-      fetchData();
-    }
-    if (true && group.current.userData.counter < poss.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
+        )
+      );
+      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["changeMarsSpeed"] = changeSpeed;
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"orange"}
+        lineLength={20}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={mars}>

src/mercury.jsx

@@ -5,115 +5,78 @@ import {
   useLoader,
   useThree,
 } from "@react-three/fiber";
-import {
-  shaderMaterial,
-  OrbitControls,
-  Line,
-  Html,
-  Text,
-} from "@react-three/drei";
 import React, {
   useRef,
   Suspense,
   useLayoutEffect,
   useState,
   useEffect,
-  useContext,
 } from "react";
 import * as THREE from "three";
-import glsl from "glslify";
 import { TextureLoader } from "three/src/loaders/TextureLoader";
-import {
-  Selection,
-  Select,
-  EffectComposer,
-  Outline,
-  Scanline,
-} from "@react-three/postprocessing";
 import "./styles.css";
 
 import { PlanetOverlay } from "./planetOverlay";
 import { PlanetPath } from "./path";
-import { MyContext } from "./Scene3";
 
-export const Mercury = ({ positions }) => {
+export const Mercury = ({ speed, getPosition }) => {
-  const [poss, setPos] = useState([]);
+  const [posArr, setPosArr] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
+  const lineArr = useRef([]);
-  const [getAgain, setGetAgain] = useState(false);
+  let planetPositionIndex = useRef(0);
-  const [speed, setSpeed] = useState(60);
   let distanceScaleFactor = 1000000;
   const mercury = useRef();
   const group = useRef();
 
-  const firstRef = useRef(true);
-  let linePoss = [];
-  const { customData } = useContext(MyContext);
-
   useLayoutEffect(() => {
-    group.current.userData.counter = 0;
     group.current.userData.name = "Mercury";
     group.current.userData.nearOvOp = 20;
     group.current.userData.scolor = "#a34f5f";
   }, []);
 
   useFrame(() => {
-    if (poss.length % 1000 == 0) {
+    //getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
-      setPos(poss.slice(0, 500));
-    }
-    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 (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/mercury?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
 
-        setPos(poss.concat(response)); // parse json
+    //if speed is 0 set the date to current date get from posArr
-        firstRef.current = false;
+    //search for current date in posArr an set planetPositionIndex
-        setGetAgain(false);
+    if (speed == 0) planetPositionIndex.current = 0;
-        //console.log(`psss : ${poss.length}`);
+    if (false && planetPositionIndex.current < posArr.length) {
-      };
-      fetchData();
-    }
-    if (true && group.current.userData.counter < poss.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
+        )
+      );
+      planetPositionIndex.current += Number(speed);
+      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["changeMercurySpeed"] = changeSpeed;
-
   const col = useLoader(TextureLoader, "../img/mercury/mercurymap.jpg");
   const bump = useLoader(TextureLoader, "../img/mercury/mercurybump.jpg");
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"#a34f5f"}
+        lineLength={20}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={mercury}>

src/neptune.jsx

@@ -58,34 +58,7 @@ export const Neptune = ({ positions }) => {
   }, []);
 
   useFrame(() => {
-    if (poss.length % 1000 == 0) {
+    if (false && group.current.userData.counter < poss.length) {
-      setPos(poss.slice(0, 500));
-    }
-    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 (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/neptune?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
-
-        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) {
       group.current.position.set(
         Number(
           poss[group.current.userData.counter].position.x / distanceScaleFactor

src/omnioverlay.jsx

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

src/path.jsx

@@ -91,7 +91,7 @@ export const PlanetPath = ({
   });
   return (
     <>
-      <line ref={lineref} geometry={lineGeometry}>
+      <line ref={lineref} geometry={lineGeometry} frustumCulled={false}>
         <lineBasicMaterial color={color} />
       </line>
     </>

src/saturn.jsx

@@ -86,33 +86,6 @@ export const Saturn = ({ positions }) => {
   }, []);
 
   useFrame(() => {
-    if (poss.length % 1000 == 0) {
-      setPos(poss.slice(0, 500));
-    }
-    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 (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/saturn?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
-
-        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) {
       group.current.position.set(
         Number(

src/uranus.jsx

@@ -69,7 +69,7 @@ export const Uranus = ({ positions }) => {
     }
     //console.log(poss.length);
     //console.log(group.current.userData.counter);
-    if (group.current.userData.counter % 250 == 0 || getAgain) {
+    if (false && group.current.userData.counter % 250 == 0 && getAgain) {
       if (!firstRef.current)
         date = new Date(poss[poss.length - 1].date).toUTCString();
       const fetchData = async () => {

src/venus.jsx

@@ -66,23 +66,7 @@ export const Venus = ({ positions }) => {
     }
     //console.log(poss.length);
     //console.log(group.current.userData.counter);
-    if (group.current.userData.counter % 250 == 0 || getAgain) {
+    if (false && group.current.userData.counter < poss.length) {
-      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/venus?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
-
-        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) {
       group.current.position.set(
         Number(
           poss[group.current.userData.counter].position.x / distanceScaleFactor