diff --git a/package-lock.json b/package-lock.json
index debcf94..f925ef6 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 5389340..2fcbad7 100644
--- a/package.json
+++ b/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",
diff --git a/src/SharedPlanetState.jsx b/src/SharedPlanetState.jsx
index b810afa..ebd86d0 100644
--- a/src/SharedPlanetState.jsx
+++ b/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
diff --git a/src/earth.jsx b/src/earth.jsx
index e613beb..58939c6 100644
--- a/src/earth.jsx
+++ b/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 (
<>
+
diff --git a/src/jupiter.jsx b/src/jupiter.jsx
index 7cb9038..2f44e25 100644
--- a/src/jupiter.jsx
+++ b/src/jupiter.jsx
@@ -92,12 +92,6 @@ export const Jupiter = ({ positions }) => {
customData.current["changeJupiterSpeed"] = changeSpeed;
return (
<>
-
diff --git a/src/mars.jsx b/src/mars.jsx
index b5bcc5e..83bcbf9 100644
--- a/src/mars.jsx
+++ b/src/mars.jsx
@@ -89,12 +89,6 @@ export const Mars = ({ positions }) => {
customData.current["changeMarsSpeed"] = changeSpeed;
return (
<>
-
diff --git a/src/mercury.jsx b/src/mercury.jsx
index 8af33c7..676559d 100644
--- a/src/mercury.jsx
+++ b/src/mercury.jsx
@@ -114,12 +114,6 @@ export const Mercury = ({ positions }) => {
const bump = useLoader(TextureLoader, "../img/mercury/mercurybump.jpg");
return (
<>
-
diff --git a/src/neptune.jsx b/src/neptune.jsx
index 60583b3..73da056 100644
--- a/src/neptune.jsx
+++ b/src/neptune.jsx
@@ -113,12 +113,6 @@ export const Neptune = ({ positions }) => {
const col = useLoader(TextureLoader, "../img/neptune/neptunemap.jpg");
return (
<>
-
diff --git a/src/path.jsx b/src/path.jsx
index 142a000..b07cc9d 100644
--- a/src/path.jsx
+++ b/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(() => {
- if (linePos) {
- for (var i = linePos.length - 1; i >= 0; i--) {
- otherPoints.current[i] = new THREE.Vector3(
- linePos[i].position.x / distanceScaleFactor,
- linePos[i].position.y / distanceScaleFactor,
- linePos[i].position.z / distanceScaleFactor
- );
+ useLayoutEffect(() => {});
+
+ useEffect(() => {});
+
+ /* const cutPath = (path, maxLength) => {
+ if (getLength(path) > maxLength) {
+ 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);
- /* 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);
-
- //console.log(otherPoints);
- }*/
- //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.setFromPoints(linePos);
lineref.current.geometry.setDrawRange(0, Infinity);
- counter.current++;
- //console.log(counter.current);
+ cutPath(linePos, lineLength);
+ console.log(getLength(linePos));
});
return (
<>
-
-
+
diff --git a/src/saturn.jsx b/src/saturn.jsx
index c359ce9..7f2e184 100644
--- a/src/saturn.jsx
+++ b/src/saturn.jsx
@@ -140,12 +140,6 @@ export const Saturn = ({ positions }) => {
customData.current["changeSaturnSpeed"] = changeSpeed;
return (
<>
-
diff --git a/src/uranus.jsx b/src/uranus.jsx
index a39ea36..60b22dd 100644
--- a/src/uranus.jsx
+++ b/src/uranus.jsx
@@ -114,12 +114,6 @@ export const Uranus = ({ positions }) => {
const col = useLoader(TextureLoader, "../img/uranus/uranusmap.jpg");
return (
<>
-
diff --git a/src/venus.jsx b/src/venus.jsx
index 395e871..7d9c4ed 100644
--- a/src/venus.jsx
+++ b/src/venus.jsx
@@ -112,12 +112,6 @@ export const Venus = ({ positions }) => {
const bump = useLoader(TextureLoader, "../img/venus/venusbump.jpg");
return (
<>
-