From 72b73918154f9fe31593c39705358040dd2cc5c9 Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Thu, 11 May 2023 18:38:22 +0200 Subject: [PATCH] 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