From fa614c8ddb5cf294d4145207ffb0a8bf8b12eced Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Wed, 10 May 2023 18:23:01 +0200 Subject: [PATCH] planet path almost done --- package-lock.json | 11 ++++ package.json | 1 + src/SharedPlanetState.jsx | 2 +- src/earth.jsx | 24 +++++++-- src/jupiter.jsx | 6 --- src/mars.jsx | 6 --- src/mercury.jsx | 6 --- src/neptune.jsx | 6 --- src/path.jsx | 107 ++++++++++++++++---------------------- src/saturn.jsx | 6 --- src/uranus.jsx | 6 --- src/venus.jsx | 6 --- 12 files changed, 79 insertions(+), 108 deletions(-) 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 ( <> -