From e1856aaafccbedf75625beee799be46aefdb9002 Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Tue, 9 May 2023 22:53:58 +0200 Subject: [PATCH 1/6] Elevate Shared Planet States, Refactors --- src/Scene3.jsx | 142 +++++++----------------------------- src/SharedPlanetState.jsx | 149 +++++++++++++++++++++++--------------- src/earth.jsx | 58 +++------------ src/omnioverlay.jsx | 48 ++++++++++++ src/overlay.jsx | 1 - src/planetOverlay.jsx | 11 ++- 6 files changed, 184 insertions(+), 225 deletions(-) create mode 100644 src/omnioverlay.jsx delete mode 100644 src/overlay.jsx diff --git a/src/Scene3.jsx b/src/Scene3.jsx index 730c0b6..c8ad928 100644 --- a/src/Scene3.jsx +++ b/src/Scene3.jsx @@ -1,125 +1,39 @@ -import { Canvas, useFrame, useThree } from "@react-three/fiber"; -import { OrbitControls, PerspectiveCamera } from "@react-three/drei"; -import React, { - Suspense, - useState, - useEffect, - 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 { Canvas } from "@react-three/fiber"; +import { OrbitControls } from "@react-three/drei"; +import React, { Suspense, useRef, createContext, memo } from "react"; + +import { ScreenOverlay } from "./omnioverlay.jsx"; +import { SharedPlanetState } from "./SharedPlanetState.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 ( - <> -
- -
- - - - - - - - console.log(e)} /> - - - - - - - - - - - - - - - ); + return ( + <> + + + + + + + + + + + + + ); }; const Smemo = memo(SolarSystemScene, true); diff --git a/src/SharedPlanetState.jsx b/src/SharedPlanetState.jsx index e6dcd14..26da2bc 100644 --- a/src/SharedPlanetState.jsx +++ b/src/SharedPlanetState.jsx @@ -23,74 +23,105 @@ 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"; +import { ReactPropTypes } from "react"; +import { MyContext } from "./Scene3.jsx"; export const SharedPlanetState = () => { - const [data, setData] = useState(null); - const [vis, setVis] = useState("hidden"); - const controls = useRef(); - const planetinfo = useRef(); - let customData = useRef({}); + const { customData } = useContext(MyContext); - function toggleVisibility() { - console.log(vis); - if (vis === "hidden") { - setVis("visible"); - console.log("what"); - } else if (vis === "visible") { - setVis("hidden"); - console.log("asdasd"); + let [nameVis, setNameVis] = useState("visible"); + let [iconVis, setIconVis] = useState("visible"); + + const handleVisibility = () => { + if (nameVis == "visible" && iconVis == "visible") { + setNameVis("hidden"); + console.log(nameVis); + 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; - 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); - } + //set speed (timeinterval between positions 60000ms*speed) + const [speed, setSpeed] = useState(0); + const updateSpeed = (newSpeed) => { + setSpeed(newSpeed); + speedChanged.current = true; + }; + customData.current["updateSpeed"] = updateSpeed; - const [speed, setSpeed] = useState(); + //get position data and reset if necessary + const dateTime = useRef(new Date(Date.now())); + const speedChanged = useRef(false); + + 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) { + console.log(oldState.length); + setPosState(oldState.slice(0, posCounter)); + speedChanged.current = true; + console.log(oldState.length); + console.log("SPEEDUPDOWNLEFTRIGHT!"); + } + + if (posCounter % 250 == 0 || speedChanged.current) { + if (oldState.length > 0 && speed > 0) { + dateTime.current = new Date( + oldState[oldState.length - 1].date + ).toUTCString(); + } + + 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(); + //console.log(response); + if (speed > 0) { + setPosState(oldState.concat(response)); + + //console.log(dateTime.current); + } else if (speed == 0) { + //this requests every frame do a function + //that requests every minute and clear intervall + //when apead is changed to above 0 + setPosState([response]); + posCounter = 0; + } + speedChanged.current = false; + }; + fetchData(); + //console.log(speed); + } + }; - const updateSpeed = (newSpeed) => setSpeed(newSpeed); return ( <> - - - - - - - console.log(e)} /> - - - - - - - - - - - - + + + + + + + + + ); }; diff --git a/src/earth.jsx b/src/earth.jsx index 7f4e122..4b0b63c 100644 --- a/src/earth.jsx +++ b/src/earth.jsx @@ -37,12 +37,12 @@ import { PlanetInfo } from "./planetInfo"; import { PlanetPath } from "./path"; import { MyContext } from "./Scene3"; -export const Earth = ({ positions }) => { +export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => { let distanceScaleFactor = 1000000; const [poss, setPos] = useState([]); const [lineposs, setLinePos] = useState([]); const [getAgain, setGetAgain] = useState(false); - const [speed, setSpeed] = useState(60); + //const [speed, setSpeed] = useState(60); const line = useRef(); const clouds = useRef("clouds"); const earth = useRef(); @@ -62,38 +62,18 @@ export const Earth = ({ positions }) => { return group; } + useEffect(() => { + console.log(speed); + }, [speed]); + let currLinePoss = []; 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(nameVis); clouds.current.rotation.y += 0.00025; earth.current.rotation.y += 0.00015; + getPosition("earth", setPos, poss, group.current.userData.counter); + console.log(poss); if (true && group.current.userData.counter < poss.length) { group.current.position.set( Number( @@ -111,15 +91,6 @@ export const Earth = ({ positions }) => { } }, []); - 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( @@ -137,17 +108,8 @@ export const Earth = ({ positions }) => { }); return ( <> - - + { + const { customData } = useContext(MyContext); + + const handleChange = (event) => { + customData.current.updateSpeed(event.target.value); + }; + + const handleReset = () => { + console.log("reset"); + }; + + const handlePlanetOverlayVisibility = () => { + customData.current.handleVisibility(); + console.log("asd"); + }; + + return ( + <> +
+ + + +
+ + + ); +}; diff --git a/src/overlay.jsx b/src/overlay.jsx deleted file mode 100644 index 8b13789..0000000 --- a/src/overlay.jsx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/planetOverlay.jsx b/src/planetOverlay.jsx index 96b48a8..dce5040 100644 --- a/src/planetOverlay.jsx +++ b/src/planetOverlay.jsx @@ -27,10 +27,11 @@ import "./styles.css"; import PropTypes from "prop-types"; -export const PlanetOverlay = ({ planet }) => { +export const PlanetOverlay = ({ planet, nameVis, iconVis }) => { const ref = useRef(); let [opacity, setOpacity] = useState(0); let [minDistance, setMinDistance] = useState(0); + let [scolor, setSColor] = useState("white"); let [follow, setFollow] = useState(false); const { camera } = useThree(); @@ -74,7 +75,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 +88,7 @@ export const PlanetOverlay = ({ planet }) => { controls.current.target.copy(planet.current.position.clone()); controls.current.maxDistance = 20; } + //console.log(iconVis); }, []); function startFollow() { @@ -112,6 +114,7 @@ export const PlanetOverlay = ({ planet }) => { className="icon" onClick={handleClick} onContextMenu={handleClick} + style={{ visibility: iconVis }} > setSColor("blue")} @@ -121,7 +124,9 @@ export const PlanetOverlay = ({ planet }) => { - {name} + + {name} + From 48da123b72dbb1293bf8ad379fee31c2dff5e2e3 Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Wed, 10 May 2023 16:06:53 +0200 Subject: [PATCH 2/6] reset --- src/SharedPlanetState.jsx | 20 +++++++++----------- src/earth.jsx | 25 +++++++++++++++++-------- src/omnioverlay.jsx | 1 + 3 files changed, 27 insertions(+), 19 deletions(-) diff --git a/src/SharedPlanetState.jsx b/src/SharedPlanetState.jsx index 26da2bc..aeaad31 100644 --- a/src/SharedPlanetState.jsx +++ b/src/SharedPlanetState.jsx @@ -50,6 +50,14 @@ export const SharedPlanetState = () => { }; customData.current["handleVisibility"] = handleVisibility; + let [resetB, setResetB] = useState(false); + + const handleReset = () => { + setSpeed(0); + dateTime.current = new Date(Date.now()); + }; + customData.current["handleReset"] = handleReset; + //set speed (timeinterval between positions 60000ms*speed) const [speed, setSpeed] = useState(0); const updateSpeed = (newSpeed) => { @@ -67,11 +75,8 @@ export const SharedPlanetState = () => { //???????Why when i set the speed to 0 it doesnt immidiatly stop? good enough for know if (speedChanged.current) { - console.log(oldState.length); setPosState(oldState.slice(0, posCounter)); speedChanged.current = true; - console.log(oldState.length); - console.log("SPEEDUPDOWNLEFTRIGHT!"); } if (posCounter % 250 == 0 || speedChanged.current) { @@ -88,21 +93,14 @@ export const SharedPlanetState = () => { ); let response = await res.json(); //console.log(response); - if (speed > 0) { + if (true) { setPosState(oldState.concat(response)); //console.log(dateTime.current); - } else if (speed == 0) { - //this requests every frame do a function - //that requests every minute and clear intervall - //when apead is changed to above 0 - setPosState([response]); - posCounter = 0; } speedChanged.current = false; }; fetchData(); - //console.log(speed); } }; diff --git a/src/earth.jsx b/src/earth.jsx index 4b0b63c..2a118f6 100644 --- a/src/earth.jsx +++ b/src/earth.jsx @@ -56,11 +56,20 @@ export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => { group.current.userData.name = "Earth"; group.current.userData.nearOvOp = 60; group.current.userData.scolor = "lightgreen"; - }, []); - - function datas() { - return group; - } + const fetchData = async () => { + let res = await fetch( + `http://127.0.0.1:8000/duration/earth` + + `?date=${new Date(Date.now())}&speed=0` + ); + let response = await res.json(); + if (speed == 0) setPos([response]); + }; + fetchData(); + const interval = setInterval(() => { + fetchData(); + }, 6000); + return () => clearInterval(interval); + }, [speed]); useEffect(() => { console.log(speed); @@ -69,11 +78,11 @@ export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => { let currLinePoss = []; useFrame(() => { - //console.log(nameVis); clouds.current.rotation.y += 0.00025; earth.current.rotation.y += 0.00015; - getPosition("earth", setPos, poss, group.current.userData.counter); - console.log(poss); + if (speed > 0) + getPosition("earth", setPos, poss, group.current.userData.counter); + //console.log(poss); if (true && group.current.userData.counter < poss.length) { group.current.position.set( Number( diff --git a/src/omnioverlay.jsx b/src/omnioverlay.jsx index 87c76fe..55f40a2 100644 --- a/src/omnioverlay.jsx +++ b/src/omnioverlay.jsx @@ -19,6 +19,7 @@ export const ScreenOverlay = () => { }; const handleReset = () => { + customData.current.handleReset(); console.log("reset"); }; From 08179b1627ceb995b3459811918b43bc708eef29 Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Wed, 10 May 2023 16:59:06 +0200 Subject: [PATCH 3/6] speed, positions, reset --- src/SharedPlanetState.jsx | 44 ++++++++++++----------------- src/earth.jsx | 59 ++++++++++++++------------------------- src/omnioverlay.jsx | 6 ++-- src/planetOverlay.jsx | 4 ++- 4 files changed, 45 insertions(+), 68 deletions(-) diff --git a/src/SharedPlanetState.jsx b/src/SharedPlanetState.jsx index aeaad31..b810afa 100644 --- a/src/SharedPlanetState.jsx +++ b/src/SharedPlanetState.jsx @@ -26,6 +26,8 @@ import { Skybox } from "./skybox.jsx"; import { ReactPropTypes } from "react"; import { MyContext } from "./Scene3.jsx"; +export const PlanetOverlayContext = createContext(); + export const SharedPlanetState = () => { const { customData } = useContext(MyContext); @@ -50,16 +52,13 @@ export const SharedPlanetState = () => { }; customData.current["handleVisibility"] = handleVisibility; - let [resetB, setResetB] = useState(false); - const handleReset = () => { setSpeed(0); - dateTime.current = new Date(Date.now()); }; customData.current["handleReset"] = handleReset; //set speed (timeinterval between positions 60000ms*speed) - const [speed, setSpeed] = useState(0); + const [speed, setSpeed] = useState(1); const updateSpeed = (newSpeed) => { setSpeed(newSpeed); speedChanged.current = true; @@ -75,11 +74,12 @@ export const SharedPlanetState = () => { //???????Why when i set the speed to 0 it doesnt immidiatly stop? good enough for know if (speedChanged.current) { - setPosState(oldState.slice(0, posCounter)); + setPosState(oldState.slice(0, posCounter + 10)); speedChanged.current = true; } - if (posCounter % 250 == 0 || speedChanged.current) { + if (oldState.length - posCounter < 1500 || speedChanged.current) { + console.log("fetch"); if (oldState.length > 0 && speed > 0) { dateTime.current = new Date( oldState[oldState.length - 1].date @@ -92,12 +92,7 @@ export const SharedPlanetState = () => { `?date=${dateTime.current}&speed=${speed}` ); let response = await res.json(); - //console.log(response); - if (true) { - setPosState(oldState.concat(response)); - - //console.log(dateTime.current); - } + setPosState(oldState.concat(response)); speedChanged.current = false; }; fetchData(); @@ -106,20 +101,17 @@ export const SharedPlanetState = () => { return ( <> - - - - - - - - - + + + + + + + + + + + ); }; diff --git a/src/earth.jsx b/src/earth.jsx index 2a118f6..e613beb 100644 --- a/src/earth.jsx +++ b/src/earth.jsx @@ -36,68 +36,51 @@ import { PlanetOverlay } from "./planetOverlay"; import { PlanetInfo } from "./planetInfo"; import { PlanetPath } from "./path"; import { MyContext } from "./Scene3"; +import { PlanetOverlayContext } from "./SharedPlanetState"; -export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => { +export const Earth = ({ positions, speed, getPosition }) => { let distanceScaleFactor = 1000000; - const [poss, setPos] = useState([]); - const [lineposs, setLinePos] = useState([]); - const [getAgain, setGetAgain] = useState(false); - //const [speed, setSpeed] = useState(60); + const [posArr, setPosArr] = useState([]); + const [lineArr, setLineArr] = useState([]); const line = useRef(); const clouds = useRef("clouds"); const earth = useRef(); const group = useRef(); - const firstRef = useRef(true); - let linePoss = []; 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"; - const fetchData = async () => { - let res = await fetch( - `http://127.0.0.1:8000/duration/earth` + - `?date=${new Date(Date.now())}&speed=0` - ); - let response = await res.json(); - if (speed == 0) setPos([response]); - }; - fetchData(); - const interval = setInterval(() => { - fetchData(); - }, 6000); - return () => clearInterval(interval); - }, [speed]); - - useEffect(() => { - console.log(speed); - }, [speed]); - - let currLinePoss = []; + }); useFrame(() => { clouds.current.rotation.y += 0.00025; earth.current.rotation.y += 0.00015; - if (speed > 0) - getPosition("earth", setPos, poss, group.current.userData.counter); - //console.log(poss); - if (true && group.current.userData.counter < poss.length) { + 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) { 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); - group.current.userData.counter++; + planetPositionIndex.current += Number(speed); + if (speed > 0) setLineArr(lineArr.concat(group.current.position)); } + console.log(lineArr.length); + console.log(posArr.length); }, []); const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg"); @@ -118,7 +101,7 @@ export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => { return ( <> - + {
{ +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); From fa614c8ddb5cf294d4145207ffb0a8bf8b12eced Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Wed, 10 May 2023 18:23:01 +0200 Subject: [PATCH 4/6] 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 ( <> - From 598991bcab813bcada11a3b04d368800aed3c66c Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Wed, 10 May 2023 18:39:16 +0200 Subject: [PATCH 5/6] path done for now --- src/path.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/path.jsx b/src/path.jsx index b07cc9d..7b42450 100644 --- a/src/path.jsx +++ b/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, @@ -23,6 +25,7 @@ export const PlanetPath = ({ planet, }) => { const lineref = useRef(); + const { speed } = useContext(PlanetOverlayContext); useLayoutEffect(() => {}); @@ -77,10 +80,14 @@ export const PlanetPath = ({ const lineGeometry = new THREE.BufferGeometry(); useFrame(() => { + if (speed === 0) { + linePos.length = 0; + return; + } lineref.current.geometry.setFromPoints(linePos); lineref.current.geometry.setDrawRange(0, Infinity); cutPath(linePos, lineLength); - console.log(getLength(linePos)); + //console.log(getLength(linePos)); }); return ( <> From 72b73918154f9fe31593c39705358040dd2cc5c9 Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Thu, 11 May 2023 18:38:22 +0200 Subject: [PATCH 6/6] posArr not sliced for some reason --- src/SharedPlanetState.jsx | 46 +++++++++++------ src/earth.jsx | 25 +++++++--- src/jupiter.jsx | 87 ++++++++++++++------------------ src/mars.jsx | 89 ++++++++++++++++----------------- src/mercury.jsx | 101 ++++++++++++-------------------------- src/neptune.jsx | 29 +---------- src/omnioverlay.jsx | 6 +-- src/path.jsx | 2 +- src/saturn.jsx | 27 ---------- src/uranus.jsx | 2 +- src/venus.jsx | 18 +------ 11 files changed, 165 insertions(+), 267 deletions(-) diff --git a/src/SharedPlanetState.jsx b/src/SharedPlanetState.jsx index ebd86d0..68dba9d 100644 --- a/src/SharedPlanetState.jsx +++ b/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) { - setPosState(oldState.slice(0, posCounter + 10)); - speedChanged.current = true; + if (speedChanged) { + //console.log(oldState.length); + //console.log(posCounter); + setPosState(oldState.slice(0, 500)); + + //console.log("here" + speedChanged); } - if (oldState.length - posCounter < 1500 || speedChanged.current) { - //console.log("fetch"); + if (oldState.length - posCounter < 1000 || speedChanged) { + //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 ( <> - - - - - - - - + + + + + + + + diff --git a/src/earth.jsx b/src/earth.jsx index 58939c6..421f448 100644 --- a/src/earth.jsx +++ b/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 }) => { diff --git a/src/jupiter.jsx b/src/jupiter.jsx index 2f44e25..7cf2063 100644 --- a/src/jupiter.jsx +++ b/src/jupiter.jsx @@ -15,83 +15,68 @@ import { PlanetOverlay } from "./planetOverlay"; import { PlanetPath } from "./path"; import { MyContext } from "./Scene3"; -export const Jupiter = ({ positions }) => { - const [poss, setPos] = useState([]); - const [lineposs, setLinePos] = useState([]); - const [getAgain, setGetAgain] = useState(false); - const [speed, setSpeed] = useState(60); - const jupiter = useRef("jupiter"); +export const Jupiter = ({ getPosition, speed }) => { 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) { - 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(); + //getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current); - 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) { + //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 (false && planetPositionIndex.current < posArr.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); - group.current.userData.counter++; + 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(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 ( <> + diff --git a/src/mars.jsx b/src/mars.jsx index 83bcbf9..1841a62 100644 --- a/src/mars.jsx +++ b/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(() => { - if (poss.length % 1000 == 0) { - setPos(poss.slice(0, 500)); + useFrame(({ clock }) => { + //getPosition("mars", setPosArr, posArr, planetPositionIndex.current); + 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 - firstRef.current = false; - setGetAgain(false); - //console.log(`psss : ${poss.length}`); - }; - fetchData(); - } - 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) { 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 ( <> + diff --git a/src/mercury.jsx b/src/mercury.jsx index 676559d..94c8a2b 100644 --- a/src/mercury.jsx +++ b/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 }) => { - const [poss, setPos] = useState([]); - const [lineposs, setLinePos] = useState([]); - const [getAgain, setGetAgain] = useState(false); - const [speed, setSpeed] = useState(60); +export const Mercury = ({ speed, getPosition }) => { + const [posArr, setPosArr] = useState([]); + const lineArr = useRef([]); + let planetPositionIndex = useRef(0); 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) { - 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(); + //getPosition("mercury", setPosArr, posArr, planetPositionIndex.current); - 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) { + //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 (false && planetPositionIndex.current < posArr.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 ( <> + diff --git a/src/neptune.jsx b/src/neptune.jsx index 73da056..968aebb 100644 --- a/src/neptune.jsx +++ b/src/neptune.jsx @@ -58,34 +58,7 @@ export const Neptune = ({ 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/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) { + if (false && group.current.userData.counter < poss.length) { group.current.position.set( Number( poss[group.current.userData.counter].position.x / distanceScaleFactor diff --git a/src/omnioverlay.jsx b/src/omnioverlay.jsx index 77bff3f..75b5bad 100644 --- a/src/omnioverlay.jsx +++ b/src/omnioverlay.jsx @@ -33,9 +33,9 @@ export const ScreenOverlay = () => {
- + diff --git a/src/saturn.jsx b/src/saturn.jsx index 7f2e184..ee542b0 100644 --- a/src/saturn.jsx +++ b/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( diff --git a/src/uranus.jsx b/src/uranus.jsx index 60b22dd..14b7efd 100644 --- a/src/uranus.jsx +++ b/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 () => { diff --git a/src/venus.jsx b/src/venus.jsx index 7d9c4ed..ff9d76a 100644 --- a/src/venus.jsx +++ b/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 (!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) { + if (false && group.current.userData.counter < poss.length) { group.current.position.set( Number( poss[group.current.userData.counter].position.x / distanceScaleFactor