diff --git a/src/CameraControls.jsx b/src/CameraControls.jsx new file mode 100644 index 0000000..952207d --- /dev/null +++ b/src/CameraControls.jsx @@ -0,0 +1,56 @@ +import { Canvas, useFrame, useThree } from "@react-three/fiber"; +import { OrbitControls, PositionPoint } from "@react-three/drei"; +import React, { + Suspense, + useRef, + createContext, + memo, + useState, + useContext, +} from "react"; +import * as THREE from "three"; + +import { ScreenOverlay } from "./omnioverlay.jsx"; +import { SharedPlanetState } from "./SharedPlanetState.jsx"; +import { Skybox } from "./skybox.jsx"; +import { MyContext } from "./Scene3.jsx"; + +export const CameraController = () => { + const { customData } = useContext(MyContext); + const [distance, setDistance] = useState(5); + const [lookAt, setLookAt] = useState(new THREE.Vector3(0, 0, 0)); + const [position, setPosition] = useState(new THREE.Vector3(0, 0, 200)); + const [animate, setAnimate] = useState(true); + const { camera } = useThree(); + const state = useThree(); + + const relativePosition = new THREE.Vector3(0, 0, distance); + + const handleLookAt = (pos) => { + setLookAt(pos); + }; + customData.current["handleLookAt"] = handleLookAt; + + const handlePosition = (pos) => { + const newPosition = pos.clone().add(relativePosition); + setPosition(newPosition); + setAnimate(true); + //console.log(newPosition); + }; + customData.current["handlePosition"] = handlePosition; + + useFrame(() => { + //console.log(state); + if (animate) { + camera.position.lerp(position, 0.1); + camera.lookAt(lookAt); + if (camera.position.distanceTo(position) < 0.1) { + setAnimate(false); + } + } + //cameraRef.current.position.addScalar(2); + //camera.position.addScalar(1); + //console.log(camera); + }); + return <>; +}; diff --git a/src/Scene3.jsx b/src/Scene3.jsx index c8ad928..a555e74 100644 --- a/src/Scene3.jsx +++ b/src/Scene3.jsx @@ -5,6 +5,7 @@ import React, { Suspense, useRef, createContext, memo } from "react"; import { ScreenOverlay } from "./omnioverlay.jsx"; import { SharedPlanetState } from "./SharedPlanetState.jsx"; import { Skybox } from "./skybox.jsx"; +import { CameraController } from "./CameraControls.jsx"; export const MyContext = createContext(); @@ -25,6 +26,7 @@ const SolarSystemScene = () => { position: [0, 100, 200], }} > + diff --git a/src/SharedPlanetState.jsx b/src/SharedPlanetState.jsx index 68dba9d..14ab554 100644 --- a/src/SharedPlanetState.jsx +++ b/src/SharedPlanetState.jsx @@ -30,7 +30,6 @@ 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"); @@ -59,7 +58,7 @@ export const SharedPlanetState = () => { customData.current["handleReset"] = handleReset; //set speed (timeinterval between positions 60000ms*speed) - const [speed, setSpeed] = useState(1); + const [speed, setSpeed] = useState(100); const updateSpeed = (newSpeed) => { setSpeed(newSpeed); setSpeedChanged(true); diff --git a/src/earth.jsx b/src/earth.jsx index 421f448..007e3bf 100644 --- a/src/earth.jsx +++ b/src/earth.jsx @@ -125,7 +125,7 @@ export const Earth = ({ speed, getPosition, speedChanged }) => { linePos={lineArr.current} planet={group} color={"lightgreen"} - lineLength={20} + lineLength={100} /> diff --git a/src/jupiter.jsx b/src/jupiter.jsx index 7cf2063..087d8c4 100644 --- a/src/jupiter.jsx +++ b/src/jupiter.jsx @@ -15,7 +15,7 @@ import { PlanetOverlay } from "./planetOverlay"; import { PlanetPath } from "./path"; import { MyContext } from "./Scene3"; -export const Jupiter = ({ getPosition, speed }) => { +export const Jupiter = ({ getPosition, speed, speedChanged }) => { const group = useRef(); const col = useLoader(TextureLoader, "../img/jupiter/jupiter2_4k.jpg"); @@ -23,6 +23,7 @@ export const Jupiter = ({ getPosition, speed }) => { const lineArr = useRef([]); let planetPositionIndex = useRef(0); + const lastPositionUpdate = useRef(0); let distanceScaleFactor = 1000000; @@ -32,13 +33,19 @@ export const Jupiter = ({ getPosition, speed }) => { group.current.userData.scolor = "yellow"; }); - useFrame(() => { + useFrame(({ clock }) => { //getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current); + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 2 || speedChanged) { + //console.log("gethis"); + getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current); + lastPositionUpdate.current = clock.elapsedTime; + } //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) { + if (true && planetPositionIndex.current < posArr.length) { group.current.position.set( Number( posArr[planetPositionIndex.current].position.x / distanceScaleFactor @@ -75,7 +82,7 @@ export const Jupiter = ({ getPosition, speed }) => { linePos={lineArr.current} planet={group} color={"yellow"} - lineLength={20} + lineLength={400} /> diff --git a/src/mars.jsx b/src/mars.jsx index 1841a62..cc22738 100644 --- a/src/mars.jsx +++ b/src/mars.jsx @@ -82,7 +82,7 @@ export const Mars = ({ speed, getPosition, speedChanged }) => { linePos={lineArr.current} planet={group} color={"orange"} - lineLength={20} + lineLength={150} /> diff --git a/src/mercury.jsx b/src/mercury.jsx index 94c8a2b..c0e8bb9 100644 --- a/src/mercury.jsx +++ b/src/mercury.jsx @@ -19,12 +19,13 @@ import "./styles.css"; import { PlanetOverlay } from "./planetOverlay"; import { PlanetPath } from "./path"; -export const Mercury = ({ speed, getPosition }) => { +export const Mercury = ({ speed, getPosition, speedChanged }) => { const [posArr, setPosArr] = useState([]); const lineArr = useRef([]); let planetPositionIndex = useRef(0); let distanceScaleFactor = 1000000; const mercury = useRef(); + const lastPositionUpdate = useRef(0); const group = useRef(); useLayoutEffect(() => { @@ -33,13 +34,19 @@ export const Mercury = ({ speed, getPosition }) => { group.current.userData.scolor = "#a34f5f"; }, []); - useFrame(() => { + useFrame(({ clock }) => { //getPosition("mercury", setPosArr, posArr, planetPositionIndex.current); + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 2 || speedChanged) { + //console.log("gethis"); + getPosition("mercury", setPosArr, posArr, planetPositionIndex.current); + lastPositionUpdate.current = clock.elapsedTime; + } //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) { + if (true && planetPositionIndex.current < posArr.length) { group.current.position.set( Number( posArr[planetPositionIndex.current].position.x / distanceScaleFactor @@ -51,7 +58,7 @@ export const Mercury = ({ speed, getPosition }) => { posArr[planetPositionIndex.current].position.z / distanceScaleFactor ) ); - planetPositionIndex.current += Number(speed); + planetPositionIndex.current += Number(1); lineArr.current.push( new THREE.Vector3( Number( @@ -75,7 +82,7 @@ export const Mercury = ({ speed, getPosition }) => { linePos={lineArr.current} planet={group} color={"#a34f5f"} - lineLength={20} + lineLength={100} /> diff --git a/src/neptune.jsx b/src/neptune.jsx index 968aebb..6400f74 100644 --- a/src/neptune.jsx +++ b/src/neptune.jsx @@ -37,18 +37,19 @@ import { PlanetOverlay } from "./planetOverlay"; import { PlanetPath } from "./path"; import { MyContext } from "./Scene3"; -export const Neptune = ({ positions }) => { +export const Neptune = ({ speedChanged, getPosition, speed }) => { const [poss, setPos] = useState([]); - const [lineposs, setLinePos] = useState([]); - const [getAgain, setGetAgain] = useState(false); - const [speed, setSpeed] = useState(60); let distanceScaleFactor = 1000000; const neptune = useRef(); const group = useRef(); + const lineArr = useRef([]); + + const [posArr, setPosArr] = useState([]); + + let planetPositionIndex = useRef(0); - const firstRef = useRef(true); - let linePoss = []; const { customData } = useContext(MyContext); + const lastPositionUpdate = useRef(0); useLayoutEffect(() => { group.current.userData.counter = 0; @@ -57,21 +58,44 @@ export const Neptune = ({ positions }) => { group.current.userData.scolor = "darkblue"; }, []); - useFrame(() => { - if (false && group.current.userData.counter < poss.length) { + useFrame(({ clock }) => { + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 2 || speedChanged) { + //console.log("gethis"); + getPosition("neptune", setPosArr, posArr, planetPositionIndex.current); + lastPositionUpdate.current = clock.elapsedTime; + } + if (speed == 0) planetPositionIndex.current = 0; + if ( + true && + planetPositionIndex.current < posArr.length && + posArr.length > 0 + ) { 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++; } }, []); @@ -86,6 +110,12 @@ export const Neptune = ({ positions }) => { const col = useLoader(TextureLoader, "../img/neptune/neptunemap.jpg"); return ( <> + diff --git a/src/planetOverlay.jsx b/src/planetOverlay.jsx index 95d94fc..8090e68 100644 --- a/src/planetOverlay.jsx +++ b/src/planetOverlay.jsx @@ -62,6 +62,8 @@ export const PlanetOverlay = ({ planet }) => { case 0: controls.current.target.copy(planet.current.position.clone()); customData.current.showInfo(planet.current.userData); + customData.current.handlePosition(planet.current.position); + customData.current.handleLookAt(planet.current.position); console.log(customData); //startFollow(); break; diff --git a/src/saturn.jsx b/src/saturn.jsx index ee542b0..14a7a24 100644 --- a/src/saturn.jsx +++ b/src/saturn.jsx @@ -59,11 +59,12 @@ void main() { extend({ SaturnRingMaterial }); -export const Saturn = ({ positions }) => { - const [poss, setPos] = useState([]); - const [lineposs, setLinePos] = useState([]); - const [getAgain, setGetAgain] = useState(false); - const [speed, setSpeed] = useState(60); +export const Saturn = ({ speed, speedChanged, getPosition }) => { + const [posArr, setPosArr] = useState([]); + const lineArr = useRef([]); + const lastPositionUpdate = useRef(0); + + let planetPositionIndex = useRef(0); const saturn = useRef("saturn"); const group = useRef("group"); const col = useLoader(TextureLoader, "../img/saturn/saturnmap.jpg"); @@ -74,10 +75,6 @@ export const Saturn = ({ positions }) => { ); let distanceScaleFactor = 1000000; - const firstRef = useRef(true); - let linePoss = []; - const { customData } = useContext(MyContext); - useLayoutEffect(() => { group.current.userData.counter = 0; group.current.userData.name = "Saturn"; @@ -85,34 +82,59 @@ export const Saturn = ({ positions }) => { group.current.userData.scolor = "red"; }, []); - useFrame(() => { - if (true && group.current.userData.counter < poss.length) { + useFrame(({ clock }) => { + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 2 || speedChanged) { + //console.log("gethis"); + getPosition("saturn", setPosArr, posArr, planetPositionIndex.current); + lastPositionUpdate.current = clock.elapsedTime; + } + //console.log("arrlength" + posArr.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 && + posArr.length > 0 + ) { 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["changeSaturnSpeed"] = changeSpeed; return ( <> + diff --git a/src/uranus.jsx b/src/uranus.jsx index 14b7efd..06f0c36 100644 --- a/src/uranus.jsx +++ b/src/uranus.jsx @@ -36,20 +36,17 @@ import { PlanetOverlay } from "./planetOverlay"; import { PlanetPath } from "./path"; import { MyContext } from "./Scene3"; -export const Uranus = ({ positions }) => { +export const Uranus = ({ speed, speedChanged, getPosition }) => { let distanceScaleFactor = 1000000; + const [posArr, setPosArr] = useState([]); + const lineArr = useRef([]); + const lastPositionUpdate = useRef(0); + + let planetPositionIndex = useRef(0); - const [poss, setPos] = useState([]); - const [lineposs, setLinePos] = useState([]); - const [getAgain, setGetAgain] = useState(false); - const [speed, setSpeed] = useState(60); const uranus = useRef(); const group = useRef(); - const firstRef = useRef(true); - let linePoss = []; - const { customData } = useContext(MyContext); - useLayoutEffect(() => { group.current.userData.counter = 0; group.current.userData.name = "Uranus"; @@ -57,63 +54,60 @@ export const Uranus = ({ positions }) => { group.current.userData.scolor = "lightblue"; }, []); - useFrame(() => { - if (poss.length % 1000 == 0) { - setPos(poss.slice(0, 500)); + useFrame(({ clock }) => { + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 2 || speedChanged) { + //console.log("gethis"); + getPosition("uranus", setPosArr, posArr, planetPositionIndex.current); + 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 (false && 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/uranus?date=${date}&speed=${speed}` //example and simple data - ); - let response = await res.json(); + //console.log("arrlength" + posArr.length); - 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 && + posArr.length > 0 + ) { 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["changeUranusSpeed"] = changeSpeed; - const col = useLoader(TextureLoader, "../img/uranus/uranusmap.jpg"); return ( <> + diff --git a/src/venus.jsx b/src/venus.jsx index ff9d76a..19f8719 100644 --- a/src/venus.jsx +++ b/src/venus.jsx @@ -36,15 +36,15 @@ import { PlanetOverlay } from "./planetOverlay"; import { PlanetPath } from "./path"; import { MyContext } from "./Scene3"; -export const Venus = ({ positions }) => { +export const Venus = ({ speed, speedChanged, getPosition }) => { let distanceScaleFactor = 1000000; + const [posArr, setPosArr] = useState([]); + const lineArr = useRef([]); + const lastPositionUpdate = useRef(0); + + let planetPositionIndex = useRef(0); const venus = useRef(); const group = useRef(); - const firstRef = useRef(true); - const [poss, setPos] = useState([]); - const [lineposs, setLinePos] = useState([]); - const [getAgain, setGetAgain] = useState(false); - const [speed, setSpeed] = useState(60); const { customData } = useContext(MyContext); useLayoutEffect(() => { @@ -54,48 +54,61 @@ export const Venus = ({ positions }) => { group.current.userData.scolor = "brown"; }, []); - useFrame(() => { - if (poss.length % 1000 == 0) { - setPos(poss.slice(0, 500)); + useFrame(({ clock }) => { + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 2 || speedChanged) { + //console.log("gethis"); + getPosition("venus", setPosArr, posArr, planetPositionIndex.current); + 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 (false && group.current.userData.counter < poss.length) { + //console.log("arrlength" + posArr.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 && + posArr.length > 0 + ) { 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["changeVenusSpeed"] = changeSpeed; - const col = useLoader(TextureLoader, "../img/venus/venusmap.jpg"); const bump = useLoader(TextureLoader, "../img/venus/venusbump.jpg"); return ( <> +