planet path almost done

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/SharedPlanetState.jsx

@@ -79,7 +79,7 @@ export const SharedPlanetState = () => {
     }
 
     if (oldState.length - posCounter < 1500 || speedChanged.current) {
-      console.log("fetch");
+      //console.log("fetch");
       if (oldState.length > 0 && speed > 0) {
         dateTime.current = new Date(
           oldState[oldState.length - 1].date

src/earth.jsx

@@ -41,7 +41,7 @@ import { PlanetOverlayContext } from "./SharedPlanetState";
 export const Earth = ({ positions, speed, getPosition }) => {
   let distanceScaleFactor = 1000000;
   const [posArr, setPosArr] = useState([]);
-  const [lineArr, setLineArr] = useState([]);
+  const lineArr = useRef([]);
   const line = useRef();
   const clouds = useRef("clouds");
   const earth = useRef();
@@ -77,10 +77,20 @@ export const Earth = ({ positions, speed, getPosition }) => {
         )
       );
       planetPositionIndex.current += Number(speed);
-      if (speed > 0) setLineArr(lineArr.concat(group.current.position));
+      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(lineArr.length);
-    console.log(posArr.length);
   }, []);
 
   const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
@@ -100,6 +110,12 @@ export const Earth = ({ positions, speed, getPosition }) => {
   });
   return (
     <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"yellow"}
+        lineLength={20}
+      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={earth}>

src/jupiter.jsx

@@ -92,12 +92,6 @@ export const Jupiter = ({ positions }) => {
   customData.current["changeJupiterSpeed"] = changeSpeed;
   return (
     <>
-      <PlanetPath
-        linePos={poss}
-        planet={group}
-        color={"yellow"}
-        lineLength={20}
-      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh>

src/mars.jsx

@@ -89,12 +89,6 @@ export const Mars = ({ positions }) => {
   customData.current["changeMarsSpeed"] = changeSpeed;
   return (
     <>
-      <PlanetPath
-        positions={positions}
-        color={"orange"}
-        linePos={poss}
-        lineLength={50}
-      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={mars}>

src/mercury.jsx

@@ -114,12 +114,6 @@ export const Mercury = ({ positions }) => {
   const bump = useLoader(TextureLoader, "../img/mercury/mercurybump.jpg");
   return (
     <>
-      <PlanetPath
-        linePos={poss}
-        planet={group}
-        color={"#a34f5f"}
-        lineLength={20}
-      />
       <group ref={group}>
         <PlanetOverlay planet={group} />
         <mesh ref={mercury}>

src/neptune.jsx

@@ -113,12 +113,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/path.jsx

@@ -22,37 +22,50 @@ 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;
 
-  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 +74,17 @@ export const PlanetPath = ({
     }
     return sum;
   }
+
+  const lineGeometry = new THREE.BufferGeometry();
   useFrame(() => {
-    //console.log(planet);
+    lineref.current.geometry.setFromPoints(linePos);
-    /*    if (planet) {
-      otherPoints.current.push(planet.current.position);
-      //console.log(planet.current.position);
-    }
-    if (otherPoints.current.length > 0) {
-      //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}>
-        <bufferGeometry />
         <lineBasicMaterial color={color} />
       </line>
     </>

src/saturn.jsx

@@ -140,12 +140,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

@@ -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

@@ -112,12 +112,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}>