Merge pull request 'ResetPosition' (#1) from ResetPosition into main

Reviewed-on: denismhz/solar-system-react-fiber#1

package-lock.json

@@ -11,6 +11,7 @@
         "@react-three/drei": "^9.66.1",
         "@react-three/fiber": "^8.13.0",
         "@react-three/postprocessing": "^2.10.0",
+        "@tweenjs/tween.js": "^18.6.4",
         "axios": "^1.4.0",
         "babel-plugin": "^1.0.7",
         "glsl": "^0.0.1",
@@ -1475,6 +1476,11 @@
         "react": ">= 16.3.0"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "18.6.4",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
+      "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
@@ -6444,6 +6450,11 @@
       "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz",
       "integrity": "sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA=="
     },
+    "@tweenjs/tween.js": {
+      "version": "18.6.4",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
+      "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
+    },
     "@types/estree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "@react-three/drei": "^9.66.1",
     "@react-three/fiber": "^8.13.0",
     "@react-three/postprocessing": "^2.10.0",
+    "@tweenjs/tween.js": "^18.6.4",
     "axios": "^1.4.0",
     "babel-plugin": "^1.0.7",
     "glsl": "^0.0.1",

src/Scene3.jsx

@@ -1,120 +1,34 @@
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
-import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
+import { OrbitControls } from "@react-three/drei";
-import React, {
+import React, { Suspense, useRef, createContext, memo } from "react";
-  Suspense,
+
-  useState,
+import { ScreenOverlay } from "./omnioverlay.jsx";
-  useEffect,
+import { SharedPlanetState } from "./SharedPlanetState.jsx";
-  useRef,
-  createContext,
-  useContext,
-  forwardRef,
-  memo,
-  useMemo,
-} from "react";
-import { Earth } from "./earth.jsx";
-import { Mars } from "./mars.jsx";
-import { Jupiter } from "./jupiter.jsx";
-import { Saturn } from "./saturn.jsx";
-import { Mercury } from "./mercury.jsx";
-import { Venus } from "./venus.jsx";
-import { Neptune } from "./neptune.jsx";
-import { Uranus } from "./uranus.jsx";
-import { Sun } from "./sun.jsx";
-import * as THREE from "three";
-import { PlanetInfo } from "./planetInfo.jsx";
 import { Skybox } from "./skybox.jsx";
-import {
-  Selection,
-  Select,
-  EffectComposer,
-  Outline,
-} from "@react-three/postprocessing";
 
 export const MyContext = createContext();
-export const OtherContext = createContext();
-
-import { SharedPlanetState } from "./SharedPlanetState.jsx";
 
 const SolarSystemScene = () => {
-  const [data, setData] = useState(null);
-  const [vis, setVis] = useState("hidden");
   const controls = useRef();
-  const planetinfo = useRef();
   let customData = useRef({});
 
-  useEffect(() => {
-    const fetchData = async () => {
-      let res = await fetch(
-        "http://127.0.0.1:8000/duration?date=2023-08-06T21:53" //example and simple data
-      );
-      let response = await res.json();
-      setData(response); // parse json
-      //console.log(response);
-    };
-    fetchData();
-  }, []);
-
-  function toggleVisibility() {
-    console.log(vis);
-    if (vis === "hidden") {
-      setVis("visible");
-      console.log("what");
-    } else if (vis === "visible") {
-      setVis("hidden");
-      console.log("asdasd");
-    }
-  }
-
-  function handleChange(event) {
-    console.log(event.target.value);
-    customData.current.changeEarthSpeed(event.target.value);
-    customData.current.changeMarsSpeed(event.target.value);
-    customData.current.changeVenusSpeed(event.target.value);
-    customData.current.changeSaturnSpeed(event.target.value);
-    customData.current.changeUranusSpeed(event.target.value);
-    customData.current.changeJupiterSpeed(event.target.value);
-    customData.current.changeMercurySpeed(event.target.value);
-    customData.current.changeNeptuneSpeed(event.target.value);
-  }
-
-  if (data)
   return (
     <>
-        <div className="slidecontainer">
+      <MyContext.Provider value={{ controls, customData }}>
-          <input
+        <ScreenOverlay />
-            type="range"
-            min="10"
-            max="360"
-            className="slider"
-            onChange={handleChange}
-            id="myRange"
-          />
-        </div>
-        <MyContext.Provider value={{ controls, toggleVisibility, customData }}>
-          <PlanetInfo ref={planetinfo} visi={vis} />
         <Suspense fallback={null}>
           <Canvas
             camera={{
               fov: 75,
               near: 0.1,
-                far: 10000000,
+              far: 1000000,
               position: [0, 100, 200],
             }}
           >
             <Skybox />
             <ambientLight intensity={0.5} />
-
+            <SharedPlanetState />
-              <Earth positions={data["399"]} onClick={(e) => console.log(e)} />
+            <OrbitControls ref={controls} />
-              <Mars positions={data["499"]} />
-              <Jupiter positions={data["599"]} />
-              <Saturn positions={data["699"]} />
-              <Mercury positions={data["199"]} />
-              <Venus positions={data["299"]} />
-              <Neptune positions={data["899"]} />
-              <Uranus positions={data["799"]} />
-              <Sun />
-
-              <OrbitControls ref={controls} maxZoom={10} />
           </Canvas>
         </Suspense>
       </MyContext.Provider>

src/SharedPlanetState.jsx

@@ -23,74 +23,109 @@ import { Sun } from "./sun.jsx";
 import * as THREE from "three";
 import { PlanetInfo } from "./planetInfo.jsx";
 import { Skybox } from "./skybox.jsx";
-import {
+import { ReactPropTypes } from "react";
-  Selection,
+import { MyContext } from "./Scene3.jsx";
-  Select,
+
-  EffectComposer,
+export const PlanetOverlayContext = createContext();
-  Outline,
-} from "@react-three/postprocessing";
 
 export const SharedPlanetState = () => {
-  const [data, setData] = useState(null);
+  const { customData } = useContext(MyContext);
-  const [vis, setVis] = useState("hidden");
+  let fetchnum = useRef(0);
-  const controls = useRef();
-  const planetinfo = useRef();
-  let customData = useRef({});
 
-  function toggleVisibility() {
+  let [nameVis, setNameVis] = useState("visible");
-    console.log(vis);
+  let [iconVis, setIconVis] = useState("visible");
-    if (vis === "hidden") {
+
-      setVis("visible");
+  const handleVisibility = () => {
-      console.log("what");
+    if (nameVis == "visible" && iconVis == "visible") {
-    } else if (vis === "visible") {
+      setNameVis("hidden");
-      setVis("hidden");
+      console.log(nameVis);
-      console.log("asdasd");
+      console.log("hiding names");
+    } else if (nameVis == "hidden" && iconVis == "visible") {
+      setIconVis("hidden");
+      console.log(nameVis);
+      console.log("hiding icons");
+    } else if (nameVis == "hidden" && iconVis == "hidden") {
+      setIconVis("visible");
+      setNameVis("visible");
+      console.log(nameVis);
+      console.log("showing everything");
     }
+  };
+  customData.current["handleVisibility"] = handleVisibility;
+
+  const handleReset = () => {
+    setSpeed(0);
+  };
+  customData.current["handleReset"] = handleReset;
+
+  //set speed (timeinterval between positions 60000ms*speed)
+  const [speed, setSpeed] = useState(1);
+  const updateSpeed = (newSpeed) => {
+    setSpeed(newSpeed);
+    setSpeedChanged(true);
+  };
+  customData.current["updateSpeed"] = updateSpeed;
+
+  //get position data and reset if necessary
+  const dateTime = useRef(new Date(Date.now()));
+  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) {
+      //console.log(oldState.length);
+      //console.log(posCounter);
+      setPosState(oldState.slice(0, 500));
+
+      //console.log("here" + speedChanged);
     }
 
-  function handleChange(event) {
+    if (oldState.length - posCounter < 1000 || speedChanged) {
-    console.log(event.target.value);
+      //console.log("there" + speedChanged);
-    customData.current.changeEarthSpeed(event.target.value);
+      setSpeedChanged(false);
-    customData.current.changeMarsSpeed(event.target.value);
+      if (oldState.length > 0 && speed > 0) {
-    customData.current.changeVenusSpeed(event.target.value);
+        dateTime.current = new Date(
-    customData.current.changeSaturnSpeed(event.target.value);
+          oldState[oldState.length - 1].date
-    customData.current.changeUranusSpeed(event.target.value);
+        ).toUTCString();
-    customData.current.changeJupiterSpeed(event.target.value);
-    customData.current.changeMercurySpeed(event.target.value);
-    customData.current.changeNeptuneSpeed(event.target.value);
       }
 
-  const [speed, setSpeed] = useState();
+      const fetchData = async () => {
+        let res = await fetch(
+          `http://127.0.0.1:8000/duration/${planet}` +
+            `?date=${dateTime.current}&speed=${speed}`
+        );
+        let response = await res.json();
+        setPosState(oldState.concat(response));
+      };
+
+      fetchData();
+    }
+    //console.log(oldState.length);
+  };
 
-  const updateSpeed = (newSpeed) => setSpeed(newSpeed);
   return (
     <>
-      <PlanetInfo ref={planetinfo} visi={vis} />
+      <PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
-      <Suspense fallback={null}>
+        <Earth
-        <Canvas
+          speed={speed}
-          camera={{
+          getPosition={getPositions}
-            fov: 75,
+          speedChanged={speedChanged}
-            near: 0.1,
+        />
-            far: 10000000,
+        <Mars
-            position: [0, 100, 200],
+          speed={speed}
-          }}
+          getPosition={getPositions}
-        >
+          speedChanged={speedChanged}
-          <Skybox />
+        />
-          <ambientLight intensity={0.5} />
+        <Jupiter speed={speed} getPosition={getPositions} />
-
+        <Saturn speed={speed} getPosition={getPositions} />
-          <Earth positions={data["399"]} onClick={(e) => console.log(e)} />
+        <Mercury speed={speed} getPosition={getPositions} />
-          <Mars positions={data["499"]} />
+        <Venus speed={speed} getPosition={getPositions} />
-          <Jupiter positions={data["599"]} />
+        <Neptune speed={speed} getPosition={getPositions} />
-          <Saturn positions={data["699"]} />
+        <Uranus speed={speed} getPosition={getPositions} />
-          <Mercury positions={data["199"]} />
-          <Venus positions={data["299"]} />
-          <Neptune positions={data["899"]} />
-          <Uranus positions={data["799"]} />
         <Sun />
-
+      </PlanetOverlayContext.Provider>
-          <OrbitControls ref={controls} maxZoom={10} />
-        </Canvas>
-      </Suspense>
     </>
   );
 };

src/earth.jsx

@@ -36,90 +36,74 @@ import { PlanetOverlay } from "./planetOverlay";
 import { PlanetInfo } from "./planetInfo";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
+import { PlanetOverlayContext } from "./SharedPlanetState";
 
-export const Earth = ({ positions }) => {
+export const Earth = ({ speed, getPosition, speedChanged }) => {
   let distanceScaleFactor = 1000000;
-  const [poss, setPos] = useState([]);
+  const [posArr, setPosArr] = useState([]);
-  const [lineposs, setLinePos] = useState([]);
+  const lineArr = useRef([]);
-  const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
   const line = useRef();
   const clouds = useRef("clouds");
   const earth = useRef();
   const group = useRef();
-  const firstRef = useRef(true);
+  const first = useRef(true);
-  let linePoss = [];
+  const lastPositionUpdate = useRef(0);
-  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";
-  }, []);
+  });
 
-  function datas() {
+  useFrame(({ clock }) => {
-    return group;
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-  }
+    if (timeSinceLastUpdate >= 2 || speedChanged) {
-
+      //console.log("gethis");
-  let currLinePoss = [];
+      getPosition("earth", setPosArr, posArr, planetPositionIndex.current);
-
+      lastPositionUpdate.current = clock.elapsedTime;
-  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/earth?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();
     }
+    //console.log("arrlength" + posArr.length);
     clouds.current.rotation.y += 0.00025;
     earth.current.rotation.y += 0.00015;
-    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["changeEarthSpeed"] = changeSpeed;
-
   const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
   const bump = useLoader(TextureLoader, "../img/earth/earth_bump_1k.jpg");
   const spec = useLoader(
@@ -138,12 +122,9 @@ export const Earth = ({ positions }) => {
   return (
     <>
       <PlanetPath
-        positions={poss.slice(0, 1000)}
+        linePos={lineArr.current}
-        linePos={poss}
         planet={group}
-        lineAt={group.current ? group.current.userData.counter : 0}
         color={"lightgreen"}
-        datas={datas}
         lineLength={20}
       />
       <group ref={group}>

src/jupiter.jsx

@@ -15,85 +15,64 @@ 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={poss}
+        linePos={lineArr.current}
         planet={group}
         color={"yellow"}
         lineLength={20}

src/mars.jsx

@@ -14,86 +14,75 @@ 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
-        positions={positions}
+        linePos={lineArr.current}
+        planet={group}
         color={"orange"}
-        linePos={poss}
+        lineLength={20}
-        lineLength={50}
       />
       <group ref={group}>
         <PlanetOverlay planet={group} />

src/mercury.jsx

@@ -5,117 +5,74 @@ 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={poss}
+        linePos={lineArr.current}
         planet={group}
         color={"#a34f5f"}
         lineLength={20}

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
@@ -113,12 +86,6 @@ export const Neptune = ({ positions }) => {
   const col = useLoader(TextureLoader, "../img/neptune/neptunemap.jpg");
   return (
     <>
-      <PlanetPath
-        linePos={poss}
-        planet={group}
-        color={"darkblue"}
-        lineLength={20}
-      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={neptune}>

src/omnioverlay.jsx

@@ -0,0 +1,49 @@
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import React, {
+  Suspense,
+  useRef,
+  createContext,
+  memo,
+  useContext,
+} from "react";
+
+import { PlanetInfo } from "./planetInfo.jsx";
+import { MyContext } from "./Scene3.jsx";
+
+export const ScreenOverlay = () => {
+  const { customData } = useContext(MyContext);
+
+  const handleChange = (event) => {
+    customData.current.updateSpeed(event.target.value);
+  };
+
+  const handleReset = () => {
+    customData.current.handleReset();
+    console.log("reset");
+  };
+
+  const handlePlanetOverlayVisibility = () => {
+    customData.current.handleVisibility();
+    console.log("asd");
+  };
+
+  return (
+    <>
+      <div className="slidecontainer">
+        <input
+          type="range"
+          min="30"
+          max="120"
+          step="30"
+          className="slider"
+          id="myRange"
+          onChange={handleChange}
+        />
+        <button onClick={handleReset}>Reset</button>
+        <button onClick={handlePlanetOverlayVisibility}>Hide things</button>
+      </div>
+      <PlanetInfo />
+    </>
+  );
+};

src/overlay.jsx

@@ -1 +0,0 @@
-

src/path.jsx

@@ -6,12 +6,14 @@ import React, {
   useLayoutEffect,
   useEffect,
   useState,
+  useContext,
 } from "react";
 import { useControls } from "leva";
 import * as THREE from "three";
 import glsl from "glslify";
 import { TextureLoader } from "three/src/loaders/TextureLoader";
 import { PlanetOverlay } from "./planetOverlay";
+import { PlanetOverlayContext } from "./SharedPlanetState";
 
 export const PlanetPath = ({
   positions,
@@ -22,37 +24,51 @@ export const PlanetPath = ({
   lineAt,
   planet,
 }) => {
-  let distanceScaleFactor = 1000000;
-  const otherPoints = useRef([]);
-  const counter = useRef(0);
-  const shiftCounter = useRef(0);
-  const [points, setPoints] = useState([]);
-
-  /*const points = positions.map(
-    (pos) =>
-      new THREE.Vector3(
-        pos.x / distanceScaleFactor,
-        pos.y / distanceScaleFactor,
-        pos.z / distanceScaleFactor
-      )
-  );*/
   const lineref = useRef();
-  //if (lineref) lineref.current.userData.counter = 0;
+  const { speed } = useContext(PlanetOverlayContext);
 
-  useLayoutEffect(() => {
+  useLayoutEffect(() => {});
-    if (linePos) {
+
-      for (var i = linePos.length - 1; i >= 0; i--) {
+  useEffect(() => {});
-        otherPoints.current[i] = new THREE.Vector3(
+
-          linePos[i].position.x / distanceScaleFactor,
+  /* const cutPath = (path, maxLength) => {
-          linePos[i].position.y / distanceScaleFactor,
+    if (getLength(path) > maxLength) {
-          linePos[i].position.z / distanceScaleFactor
+      path.shift();
-        );
+    }
+  };*/
+
+  //from chatgpt very nice :D
+  const cutPath = (path, maxLength) => {
+    let length = getLength(path);
+    while (length > maxLength && path.length >= 2) {
+      const firstPoint = path[0];
+      const secondPoint = path[1];
+      const segmentLength = firstPoint.distanceTo(secondPoint);
+      if (segmentLength > maxLength) {
+        // If the first segment is longer than the maximum length,
+        // split it into multiple segments of the maximum length.
+        const numSegments = Math.ceil(segmentLength / maxLength);
+        const segmentDirection = secondPoint
+          .clone()
+          .sub(firstPoint)
+          .normalize();
+        const segmentLength = segmentLength / numSegments;
+        const newPoints = [firstPoint];
+        for (let i = 1; i < numSegments; i++) {
+          const newPoint = firstPoint
+            .clone()
+            .add(segmentDirection.clone().multiplyScalar(segmentLength * i));
+          newPoints.push(newPoint);
+        }
+        newPoints.push(secondPoint);
+        path.splice(0, 2, ...newPoints);
+        length = getLength(path);
+      } else {
+        path.shift();
+        length -= segmentLength;
       }
     }
-    //console.log(otherPoints);
+  };
-  });
-
-  useEffect(() => {}, []);
 
   function getLength(arrV3) {
     let sum = 0;
@@ -61,45 +77,21 @@ export const PlanetPath = ({
     }
     return sum;
   }
+
+  const lineGeometry = new THREE.BufferGeometry();
   useFrame(() => {
-    //console.log(planet);
+    if (speed === 0) {
-    /*    if (planet) {
+      linePos.length = 0;
-      otherPoints.current.push(planet.current.position);
+      return;
-      //console.log(planet.current.position);
     }
-    if (otherPoints.current.length > 0) {
+    lineref.current.geometry.setFromPoints(linePos);
-      //console.log(otherPoints.current);
-      //console.log(asd);
-      lineref.current.geometry.setFromPoints(asd);
     lineref.current.geometry.setDrawRange(0, Infinity);
-
+    cutPath(linePos, lineLength);
-      //console.log(otherPoints);
+    //console.log(getLength(linePos));
-    }*/
-    //console.log(otherPoints);
-    //var start = 0;
-    //if (counter.current > lineLength) start = counter.current - lineLength;
-    var realpoints = otherPoints.current.slice(
-      shiftCounter.current,
-      counter.current
-    );
-    //console.log(getLength(realpoints));
-    if (realpoints.length > 0) {
-      lineref.current.geometry.setFromPoints(realpoints);
-      if (getLength(realpoints) > lineLength) {
-        //console.log("cut");
-        shiftCounter.current++;
-        //realpoints.shift();
-      }
-    }
-
-    lineref.current.geometry.setDrawRange(0, Infinity);
-    counter.current++;
-    //console.log(counter.current);
   });
   return (
     <>
-      <line ref={lineref} frustumCulled={false}>
+      <line ref={lineref} geometry={lineGeometry} frustumCulled={false}>
-        <bufferGeometry />
         <lineBasicMaterial color={color} />
       </line>
     </>

src/planetOverlay.jsx

@@ -26,11 +26,14 @@ import { MyContext } from "./Scene3";
 import "./styles.css";
 
 import PropTypes from "prop-types";
+import { PlanetOverlayContext } from "./SharedPlanetState";
 
 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);
   const { camera } = useThree();
@@ -74,7 +77,7 @@ export const PlanetOverlay = ({ planet }) => {
     setName(planet.current.userData.name);
     setMinDistance(planet.current.userData.nearOvOp);
     setSColor(planet.current.userData.scolor);
-  }, [planet, name, minDistance, customData]);
+  }, [planet, name, minDistance, customData, iconVis, nameVis]);
 
   useFrame(() => {
     var distance = camera.position.distanceTo(planet.current.position);
@@ -87,6 +90,7 @@ export const PlanetOverlay = ({ planet }) => {
       controls.current.target.copy(planet.current.position.clone());
       controls.current.maxDistance = 20;
     }
+    //console.log(iconVis);
   }, []);
 
   function startFollow() {
@@ -112,6 +116,7 @@ export const PlanetOverlay = ({ planet }) => {
             className="icon"
             onClick={handleClick}
             onContextMenu={handleClick}
+            style={{ visibility: iconVis }}
           >
             <svg
               onMouseEnter={() => setSColor("blue")}
@@ -121,7 +126,9 @@ export const PlanetOverlay = ({ planet }) => {
               <circle cx="10" cy="10" r="9" strokeWidth="1" fill="none" />
             </svg>
           </span>
-          <span className="content">{name}</span>
+          <span className="content" style={{ visibility: nameVis }}>
+            {name}
+          </span>
         </div>
       </Html>
     </>

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(
@@ -140,12 +113,6 @@ export const Saturn = ({ positions }) => {
   customData.current["changeSaturnSpeed"] = changeSpeed;
   return (
     <>
-      <PlanetPath
-        linePos={poss}
-        planet={group}
-        color={"red"}
-        lineLength={100}
-      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={saturn}>

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 () => {
@@ -114,12 +114,6 @@ export const Uranus = ({ positions }) => {
   const col = useLoader(TextureLoader, "../img/uranus/uranusmap.jpg");
   return (
     <>
-      <PlanetPath
-        linePos={poss}
-        planet={group}
-        color={"lightblue"}
-        lineLength={20}
-      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={uranus}>

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
@@ -112,12 +96,6 @@ export const Venus = ({ positions }) => {
   const bump = useLoader(TextureLoader, "../img/venus/venusbump.jpg");
   return (
     <>
-      <PlanetPath
-        positions={positions}
-        color={"brown"}
-        linePos={poss}
-        lineLength={30}
-      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={venus}>