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 (
<>
+