planet info

src/Scene3.jsx

@@ -1,6 +1,13 @@
-import { Canvas, useThree } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
+import React, {
-import React, { Suspense, useRef, createContext, memo } from "react";
+  Suspense,
+  useRef,
+  createContext,
+  memo,
+  useLayoutEffect,
+  useState,
+  useEffect,
+} from "react";
 
 import { ScreenOverlay } from "./omnioverlay.jsx";
 import { SharedPlanetState } from "./SharedPlanetState.jsx";
@@ -12,28 +19,100 @@ export const MyContext = createContext();
 const SolarSystemScene = () => {
   const controls = useRef();
   let customData = useRef({});
+  const [initialData, setInitialData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [pinfo, setPinfo] = useState(null);
+  const [err, setErr] = useState(null);
+  //const { progress } = useProgress();
+
+  useLayoutEffect(() => {
+    const fetchPlanetInfo = async () => {
+      fetch(`http://127.0.0.1:8000/planetInfo`).then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `This is an HTTP error: The status is ${response.status}`
+          );
+        }
+        //setLoading(true);
+        response
+          .json()
+          .then((data) => {
+            setPinfo(data);
+            setErr(null);
+          })
+          .catch((err) => {
+            setPinfo(null);
+            setErr(err.message);
+          })
+          .finally(() => {
+            //setLoading(false);
+          });
+      });
+    };
+    fetchPlanetInfo();
+    const currDate = new Date(Date.now());
+    currDate.setSeconds(0);
+    currDate.setMilliseconds(0);
+    console.log("useEffect init");
+    const fetchData = async () => {
+      fetch(
+        `http://127.0.0.1:8000/duration?date=${currDate.toISOString()}`
+      ).then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `This is an HTTP error: The status is ${response.status}`
+          );
+        }
+        setLoading(true);
+        response
+          .json()
+          .then((data) => {
+            setInitialData(data);
+            setErr(null);
+          })
+          .catch((err) => {
+            setInitialData(null);
+            setErr(err.message);
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      });
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    //console.log(progress);
+  });
 
   return (
-    <>
+    <Suspense fallback={<div className="loadingScreen">Suspense</div>}>
-      <MyContext.Provider value={{ controls, customData }}>
+      {!loading && (
-        <ScreenOverlay />
+        <>
-        <Suspense fallback={null}>
+          <MyContext.Provider value={{ controls, customData }}>
-          <Canvas
+            {!loading && <ScreenOverlay planetInfo={pinfo} />}
-          /*camera={{
+
+            {loading && <div className="loadingScreen">Loading</div>}
+            {!loading && (
+              <Canvas
+              /*camera={{
               position: [0, 0, 100],
               fov: 75,
               near: 0.1,
               far: 1000,
             }}*/
-          >
+              >
-            <CustomCamera />
+                <CustomCamera />
-            <Skybox />
+                <Skybox />
-            <ambientLight intensity={0.5} />
+                <ambientLight intensity={0.5} />
-            <SharedPlanetState />
+                <SharedPlanetState initialData={initialData} />
-          </Canvas>
+              </Canvas>
-        </Suspense>
+            )}
-      </MyContext.Provider>
+          </MyContext.Provider>
-    </>
+        </>
+      )}
+    </Suspense>
   );
 };
 

src/SharedPlanetState.jsx

@@ -11,15 +11,15 @@ import React, {
   memo,
   useMemo,
 } from "react";
-import { Earth } from "./earth.jsx";
+import { Earth } from "./planets/earth.jsx";
-import { Mars } from "./mars.jsx";
+import { Mars } from "./planets/mars.jsx";
-import { Jupiter } from "./jupiter.jsx";
+import { Jupiter } from "./planets/jupiter.jsx";
-import { Saturn } from "./saturn.jsx";
+import { Saturn } from "./planets/saturn.jsx";
-import { Mercury } from "./mercury.jsx";
+import { Mercury } from "./planets/mercury.jsx";
-import { Venus } from "./venus.jsx";
+import { Venus } from "./planets/venus.jsx";
-import { Neptune } from "./neptune.jsx";
+import { Neptune } from "./planets/neptune.jsx";
-import { Uranus } from "./uranus.jsx";
+import { Uranus } from "./planets/uranus.jsx";
-import { Sun } from "./sun.jsx";
+import { Sun } from "./planets/sun.jsx";
 import * as THREE from "three";
 import { PlanetInfo } from "./planetInfo.jsx";
 import { Skybox } from "./skybox.jsx";
@@ -30,14 +30,19 @@ export const PlanetOverlayContext = createContext();
 
 import { Planet } from "./planet.jsx";
 
-export const SharedPlanetState = () => {
+export const SharedPlanetState = ({ initialData }) => {
+  const distanceScaleFactor = 1000000;
   const { customData } = useContext(MyContext);
 
+  const lastGetRequestRef = useRef(0);
+  const currentPosIndexRef = useRef(0);
+  const getNewDataThresholdRef = 5000;
+  const currentSpeedRef = useRef(0);
+  const planetPositionIndex = useRef(0);
+
   let [nameVis, setNameVis] = useState("visible");
   let [iconVis, setIconVis] = useState("visible");
 
-  const lastPositionUpdate = useRef(0);
-
   const handleVisibility = () => {
     if (nameVis == "visible" && iconVis == "visible") {
       setNameVis("hidden");
@@ -51,15 +56,16 @@ export const SharedPlanetState = () => {
   customData.current["handleVisibility"] = handleVisibility;
 
   const handleReset = () => {
-    setSpeed(0);
+    setSpeed(-1);
   };
   customData.current["handleReset"] = handleReset;
 
   //set speed (timeinterval between positions 60000ms*speed)
-  const [speed, setSpeed] = useState(60);
+  const [speed, setSpeed] = useState(1);
   const updateSpeed = (newSpeed) => {
     setSpeed(newSpeed);
     setSpeedChanged(true);
+    console.log(speed);
   };
   customData.current["updateSpeed"] = updateSpeed;
 
@@ -67,19 +73,49 @@ export const SharedPlanetState = () => {
   const dateTime = useRef(new Date(Date.now()));
   const [speedChanged, setSpeedChanged] = useState();
 
-  const getPositions = (planet, setPosState, oldState, posCounter) => {
+  function updatePlanetPosition(group, posArr, lineArr) {
+    if (true && planetPositionIndex.current < posArr.length) {
+      group.current.position.set(
+        Number(
+          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
+        ),
+        Number(
+          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
+        ),
+        Number(
+          posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+        )
+      );
+      if (speed > 0) 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
+          )
+        )
+      );
+    }
+  }
+
+  const getPositions = (planet, setPosState, oldState) => {
     //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) {
+    /*    if (speedChanged) {
       //console.log(oldState.length);
       //console.log(posCounter);
       setPosState(oldState.slice(0, 500));
 
       //console.log("here" + speedChanged);
-    }
+    } */
 
-    if (oldState.length - posCounter < 1000 || speedChanged) {
+    if (oldState.length - planetPositionIndex.current < 15000) {
       //console.log("there" + speedChanged);
       setSpeedChanged(false);
       if (oldState.length > 0 && speed > 0) {
@@ -89,24 +125,48 @@ export const SharedPlanetState = () => {
       }
 
       const fetchData = async () => {
-        let res = await fetch(
+        fetch(
           `http://127.0.0.1:8000/duration/${planet}` +
             `?date=${dateTime.current}&speed=${speed}`
-        );
+        ).then((response) => {
-        let response = await res.json();
+          if (!response.ok) {
-        setPosState(oldState.concat(response));
+            throw new Error(
+              `This is an HTTP error: The status is ${response.status}`
+            );
+          }
+          loadingRef.current = true;
+          response
+            .json()
+            .then((data) => {
+              setPosState(oldState.concat(data));
+              setData(data);
+              dataRef.current = data;
+              errRef.current = null;
+            })
+            .catch((err) => {
+              setData(null);
+              dataRef.current = null;
+              errRef.current = err.message;
+            })
+            .finally(() => {
+              loadingRef.current = false;
+            });
+        });
       };
-
       fetchData();
     }
+
     //console.log(oldState.length);
   };
 
   const dataRef = useRef(null);
   const loadingRef = useRef(false);
   const errRef = useRef(null);
+  const [data, setData] = useState(null);
 
   useFrame(({ clock }) => {
+    //console.log(initialData);
+    /* handlePositionIndex();
     const fetchData = async () => {
       fetch(`http://127.0.0.1:8000/duration`).then((response) => {
         if (!response.ok) {
@@ -118,10 +178,12 @@ export const SharedPlanetState = () => {
         response
           .json()
           .then((data) => {
+            setData(data);
             dataRef.current = data;
             errRef.current = null;
           })
           .catch((err) => {
+            setData(null);
             dataRef.current = null;
             errRef.current = err.message;
           })
@@ -130,34 +192,84 @@ export const SharedPlanetState = () => {
           });
       });
     };
-    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    const timeSinceLastUpdate = clock.elapsedTime - lastGetRequestRef.current;
     if (timeSinceLastUpdate >= 5) {
       fetchData();
       console.log(dataRef.current);
-      lastPositionUpdate.current = clock.elapsedTime;
+      lastGetRequestRef.current = clock.elapsedTime;
-    }
+    } */
   });
 
+  function handlePositionIndex() {
+    currentPosIndexRef.current++;
+  }
+
   return (
     <>
       <PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
-        <Earth
+        {initialData && (
-          speed={speed}
+          <>
-          getPosition={getPositions}
+            <Earth
-          speedChanged={speedChanged}
+              speed={speed}
-        />
+              getPosition={getPositions}
-        <Mars
+              speedChanged={speedChanged}
-          speed={speed}
+              data={initialData["399"]}
-          getPosition={getPositions}
+              setPosition={updatePlanetPosition}
-          speedChanged={speedChanged}
+            />
-        />
+            <Mars
-        <Jupiter speed={speed} getPosition={getPositions} />
+              speed={speed}
-        <Saturn speed={speed} getPosition={getPositions} />
+              getPosition={getPositions}
-        <Mercury speed={speed} getPosition={getPositions} />
+              speedChanged={speedChanged}
-        <Venus speed={speed} getPosition={getPositions} />
+              data={initialData["499"]}
-        <Neptune speed={speed} getPosition={getPositions} />
+              setPosition={updatePlanetPosition}
-        <Uranus speed={speed} getPosition={getPositions} />
+            />
-        <Sun />
+            <Jupiter
+              speed={speed}
+              getPosition={getPositions}
+              data={initialData["599"]}
+              setPosition={updatePlanetPosition}
+            />
+            <Saturn
+              speed={speed}
+              getPosition={getPositions}
+              data={initialData["699"]}
+              setPosition={updatePlanetPosition}
+            />
+            <Mercury
+              speed={speed}
+              getPosition={getPositions}
+              data={initialData["199"]}
+              setPosition={updatePlanetPosition}
+            />
+
+            <Venus
+              speed={speed}
+              getPosition={getPositions}
+              data={initialData["299"]}
+              setPosition={updatePlanetPosition}
+            />
+            <Neptune
+              speed={speed}
+              getPosition={getPositions}
+              data={initialData["899"]}
+              setPosition={updatePlanetPosition}
+            />
+            <Uranus
+              speed={speed}
+              getPosition={getPositions}
+              data={initialData["799"]}
+              setPosition={updatePlanetPosition}
+            />
+            <Sun />
+          </>
+        )}
+        {false && (
+          <Planet
+            posArr={data["199"]}
+            planetPosIndex={currentPosIndexRef}
+            speed={speed}
+          />
+        )}
       </PlanetOverlayContext.Provider>
     </>
   );

src/TestScene.jsx

@@ -1,61 +0,0 @@
-import { Canvas, useThree } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
-import React, { Suspense, useState, useEffect, useRef } from "react";
-import { Earth } from "./earth.jsx";
-import { Mars } from "./mars.jsx";
-import { Jupiter } from "./jupiter.jsx";
-import { Saturn } from "./saturn.jsx";
-import * as THREE from "three";
-import {
-  Selection,
-  Select,
-  EffectComposer,
-  Outline,
-} from "@react-three/postprocessing";
-
-const TestScene = () => {
-  const [data, setData] = useState(null);
-  useEffect(() => {
-    console.log("useeffect called");
-    const fetchData = async () => {
-      let res = await fetch(
-        "http://127.0.0.1:8000/duration" //example and simple data
-      );
-      let response = await res.json();
-      setData(response); // parse json
-      console.log(response);
-    };
-    fetchData();
-  }, []);
-
-  const Skybox = () => {
-    const { scene } = useThree();
-    const loader = new THREE.CubeTextureLoader();
-    const box = loader.load([
-      "../img/skybox/front.png",
-      "../img/skybox/back.png",
-      "../img/skybox/top.png",
-      "../img/skybox/bottom.png",
-      "../img/skybox/left.png",
-      "../img/skybox/right.png",
-    ]);
-    scene.background = box;
-    return null;
-  };
-
-  if (data)
-    return (
-      <>
-        <Canvas camera={{ position: [0, 0, 15] }}>
-          <ambientLight intensity={0.1} />
-          <pointLight position={[15, 15, 15]} intensity={0.5} />
-          <Suspense fallback={null}>
-            <Earth parentToChild={data["399"]} />
-          </Suspense>
-          <OrbitControls />
-        </Canvas>
-      </>
-    );
-};
-
-export default TestScene;

src/customCamera.jsx

@@ -90,7 +90,7 @@ export function CustomCamera(props) {
       zoomSpeed *= cameraRef.current.position.distanceTo(
         camGroup.current.position
       );
-      console.log("asdasd");
+      //console.log("asdasd");
     }
 
     function newDistance(prevDistance) {
@@ -98,7 +98,7 @@ export function CustomCamera(props) {
       return Math.max(0, newDistance); // Adjust the minimum distance as needed
     }
     distance.current = newDistance(distance.current);
-    console.log(distance);
+    //console.log(distance);
   };
   customData.current["handleZoom"] = handleZoom;
 
@@ -154,7 +154,7 @@ export function CustomCamera(props) {
 
       rotate.current = false;
       lerpedilerp.current *= 1.1;
-      console.log(camGroup.current.position.distanceTo(currObj.position));
+      //console.log(camGroup.current.position.distanceTo(currObj.position));
 
       if (camGroup.current.position.distanceTo(currObj.position) < 0.1) {
         currObj.add(camGroup.current);

src/jupiter.jsx

@@ -1,96 +0,0 @@
-import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
-import { shaderMaterial, OrbitControls, Line } from "@react-three/drei";
-import React, {
-  useRef,
-  Suspense,
-  useLayoutEffect,
-  useEffect,
-  useState,
-  useContext,
-} from "react";
-import * as THREE from "three";
-import glsl from "glslify";
-import { TextureLoader } from "three/src/loaders/TextureLoader";
-import { PlanetOverlay } from "./planetOverlay";
-import { PlanetPath } from "./path";
-import { MyContext } from "./Scene3";
-
-export const Jupiter = ({ getPosition, speed, speedChanged }) => {
-  const group = useRef();
-  const col = useLoader(TextureLoader, "../img/jupiter/jupiter2_4k.jpg");
-
-  const [posArr, setPosArr] = useState([]);
-  const lineArr = useRef([]);
-
-  let planetPositionIndex = useRef(0);
-  const lastPositionUpdate = useRef(0);
-
-  let distanceScaleFactor = 1000000;
-
-  useEffect(() => {
-    group.current.userData.name = "Jupiter";
-    group.current.userData.nearOvOp = 800;
-    group.current.userData.scolor = "yellow";
-  });
-
-  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 (true && planetPositionIndex.current < posArr.length) {
-      group.current.position.set(
-        Number(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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(posArr.length);
-      //console.log(planetPositionIndex.current);
-    }
-  }, []);
-
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        planet={group}
-        color={"yellow"}
-        lineLength={400}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh>
-          <sphereGeometry args={[69911 / 6000, 50, 50]} />
-          <meshPhongMaterial map={col} />
-        </mesh>
-      </group>
-    </>
-  );
-};

src/main.jsx

@@ -4,7 +4,6 @@ import Scene1 from "./Scene2";
 import SolarSystemScene from "./Scene3";
 import Smemo from "./Scene3";
 import React, { useEffect, useReducer, useState, useRef } from "react";
-import TestScene from "./TestScene";
 import SunScene from "./sunscene";
 
 const App = () => {
@@ -14,7 +13,6 @@ const App = () => {
         <Route path="/" element={<Scene />} />
         <Route path="next" element={<Scene1 />} />
         <Route path="solarsystem" element={<Smemo />} />
-        <Route path="test" element={<TestScene />} />
         <Route path="sun" element={<SunScene />} />
       </Routes>
     </BrowserRouter>

src/neptune.jsx

@@ -1,128 +0,0 @@
-import {
-  Canvas,
-  extend,
-  useFrame,
-  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 { PlanetInfo } from "./planetInfo";
-
-import { PlanetOverlay } from "./planetOverlay";
-import { PlanetPath } from "./path";
-import { MyContext } from "./Scene3";
-
-export const Neptune = ({ speedChanged, getPosition, speed }) => {
-  const [poss, setPos] = useState([]);
-  let distanceScaleFactor = 1000000;
-  const neptune = useRef();
-  const group = useRef();
-  const lineArr = useRef([]);
-
-  const [posArr, setPosArr] = useState([]);
-
-  let planetPositionIndex = useRef(0);
-
-  const { customData } = useContext(MyContext);
-  const lastPositionUpdate = useRef(0);
-
-  useLayoutEffect(() => {
-    group.current.userData.counter = 0;
-    group.current.userData.name = "Neptune";
-    group.current.userData.nearOvOp = 500;
-    group.current.userData.scolor = "darkblue";
-  }, []);
-
-  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(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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
-          )
-        )
-      );
-    }
-  }, []);
-
-  const changeSpeed = (newSpeed) => {
-    setPos(poss.slice(0, group.current.userData.counter + 10));
-    setGetAgain(true);
-    console.log(poss);
-    setSpeed(newSpeed);
-  };
-
-  customData.current["changeNeptuneSpeed"] = changeSpeed;
-  const col = useLoader(TextureLoader, "../img/neptune/neptunemap.jpg");
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        planet={group}
-        color={"darkblue"}
-        lineLength={20}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={neptune}>
-          <sphereGeometry args={[24622 / 6000, 50, 50]} />
-          <meshPhongMaterial map={col} />
-        </mesh>
-      </group>
-    </>
-  );
-};

src/omnioverlay.jsx

@@ -11,21 +11,27 @@ import React, {
 import { PlanetInfo } from "./planetInfo.jsx";
 import { MyContext } from "./Scene3.jsx";
 
-export const ScreenOverlay = () => {
+export const ScreenOverlay = (props) => {
   const { customData } = useContext(MyContext);
 
-  const handleChange = (event) => {
+  const handleChange = () => {
-    customData.current.updateSpeed(event.target.value);
+    customData.current.updateSpeed(0);
+  };
+
+  const handleChange0 = () => {
+    customData.current.updateSpeed(1);
+  };
+
+  const handleChange1 = () => {
+    customData.current.updateSpeed(3);
   };
 
   const handleReset = () => {
     customData.current.handleReset();
-    console.log("reset");
   };
 
   const handlePlanetOverlayVisibility = () => {
     customData.current.handleVisibility();
-    console.log("asd");
   };
 
   return (
@@ -45,21 +51,15 @@ export const ScreenOverlay = () => {
           <button onClick={handleReset} className="btn btn-primary">
             &lt;
           </button>
-          <button onClick={handleReset} className="btn btn-primary">
+          <button onClick={handleChange} className="btn btn-primary">
+            II
+          </button>
+          <button onClick={handleChange0} className="btn btn-primary">
             &gt;
           </button>
-          <button
+          <button onClick={handleChange1} className="btn btn-primary">
-            onClick={handlePlanetOverlayVisibility}
-            className="btn btn-primary"
-          >
             &gt;&gt;
           </button>
-          <button
-            onClick={handlePlanetOverlayVisibility}
-            className="btn btn-primary"
-          >
-            &gt;&gt;&gt;
-          </button>
         </div>
         <div className="btn-group" role="group">
           <button
@@ -70,7 +70,7 @@ export const ScreenOverlay = () => {
           </button>
         </div>
       </div>
-      <PlanetInfo />
+      <PlanetInfo planetInfo={props.planetInfo} />
     </>
   );
 };

src/planetInfo.jsx

@@ -25,7 +25,7 @@ import React, {
 import { useNavigate } from "react-router-dom";
 import * as THREE from "three";
 import { MyContext } from "./Scene3";
-import saturnImage from "./saturn.jpg";
+import saturnImage from "./planet_overlay_img/saturn.jpg";
 
 import "./styles.css";
 
@@ -38,9 +38,17 @@ export const PlanetInfo = memo(
     const { customData } = useContext(MyContext);
     const [planetData, setPlanetData] = useState({ name: "Default" });
 
+    function getPlanetDataAtName() {}
+
     useEffect(() => {
+      console.log(props.planetInfo);
       const showInfo = (planet) => {
-        if (planet && planet.name) setPlanetData({ name: planet.name });
+        props.planetInfo.forEach((oplanet) => {
+          if (planet.name == oplanet.name) {
+            setPlanetData(oplanet);
+          }
+        });
+        //if (planet && planet.name) setPlanetData({ name: planet.name });
         console.log(planetData);
         setVisibility("visible");
       };
@@ -56,18 +64,50 @@ export const PlanetInfo = memo(
     }
 
     return (
-      <div className="planetInfo" style={{ visibility: visibility }}>
+      <div
+        className={visibility == "visible" ? "planetInfo" : "planetInfoFadeIn"}
+        style={{ visibility: visibility }}
+      >
         <div className="wrapper">
+          <button
+            type="button"
+            className="btn-close"
+            aria-label="Close"
+            onClick={closeInfo}
+          >
+            X
+          </button>
           <h1>{planetData.name}</h1>
           <img src={saturnImage}></img>
-          <p>
+          <p>{planetData.Description}</p>
-            Adorned with a dazzling, complex system of icy rings, Saturn is
+          <div className="data-wrapper">
-            unique in our solar system. The other giant planets have rings, but
+            <div className="data">
-            none are as spectacular as Saturn's.
+              <span style={{ color: planetData.color }} className="data-1">
-          </p>
+                {planetData.LOY}
-          <button type="button" onClick={closeInfo}>
+              </span>
-            Visit
+              <span className="data-2">Earth Days/Years</span>
-          </button>
+            </div>
+            <div className="data">
+              <span style={{ color: planetData.color }} className="data-1">
+                {planetData.DFS}
+              </span>
+              <span className="data-2">AU</span>
+              <span className="data-3">Distance from Sun</span>
+            </div>
+            <div className="data">
+              <span style={{ color: planetData.color }} className="data-1">
+                {planetData.Moons}
+              </span>
+              <span className="data-2">Moons</span>
+            </div>
+            <div className="data">
+              <span style={{ color: planetData.color }} className="data-1">
+                {planetData.Radius}
+              </span>
+              <span className="data-2">Radius</span>
+              <span className="data-3">Kilometers</span>
+            </div>
+          </div>
         </div>
       </div>
     );

src/planets/earth.jsx

@@ -1,46 +1,24 @@
-import {
+import { useFrame, useLoader } from "@react-three/fiber";
-  Canvas,
+import React, { useRef, useLayoutEffect, useState, useEffect } from "react";
-  extend,
-  useFrame,
-  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 "../styles.css";
-import { PlanetInfo } from "./planetInfo";
-import { PlanetPath } from "./path";
-import { MyContext } from "./Scene3";
-import { PlanetOverlayContext } from "./SharedPlanetState";
 
-export const Earth = ({ speed, getPosition, speedChanged }) => {
+import { PlanetOverlay } from "../planetOverlay";
+
+import { PlanetPath } from "../path";
+
+export const Earth = ({
+  speed,
+  getPosition,
+  speedChanged,
+  data,
+  setPosition,
+}) => {
   let distanceScaleFactor = 1000000;
-  const [posArr, setPosArr] = useState([]);
+  const [posArr, setPosArr] = useState(data);
   const lineArr = useRef([]);
   const line = useRef();
   const clouds = useRef("clouds");
@@ -57,52 +35,24 @@ export const Earth = ({ speed, getPosition, speedChanged }) => {
     group.current.userData.scolor = "lightgreen";
   });
 
+  useEffect(() => {}, []);
   useFrame(({ clock }) => {
     const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-    if (timeSinceLastUpdate >= 2 || speedChanged) {
+    if (timeSinceLastUpdate >= 3) {
       //console.log("gethis");
-      getPosition("earth", setPosArr, posArr, planetPositionIndex.current);
+      getPosition("earth", setPosArr, posArr);
       lastPositionUpdate.current = clock.elapsedTime;
+      //console.log(posArr);
       //console.log(group.current);
     }
     //console.log("arrlength" + posArr.length);
     clouds.current.rotation.y += 0.00025;
     earth.current.rotation.y += 0.00015;
 
+    if (posArr) setPosition(group, posArr, lineArr);
+
     //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(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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
-          )
-        )
-      );
-    }
   }, []);
 
   const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
@@ -145,15 +95,17 @@ export const Earth = ({ speed, getPosition, speedChanged }) => {
           <sphereGeometry args={[6371.0 / 6000 + 0.01, 50, 50]} />
           <meshPhongMaterial map={cloudMap} transparent={true} opacity={0.5} />
         </mesh>
-        <line ref={line}>
+        {true && (
-          <bufferGeometry />
+          <line ref={line}>
-          <lineBasicMaterial
+            <bufferGeometry />
-            color={"hotpink"}
+            <lineBasicMaterial
-            transparent={true}
+              color={"hotpink"}
-            opacity={0.5}
+              transparent={true}
-            linewidth={2}
+              opacity={0.5}
-          />
+              linewidth={2}
-        </line>
+            />
+          </line>
+        )}
       </group>
     </>
   );

src/planets/jupiter.jsx

@@ -0,0 +1,63 @@
+import { useFrame, useLoader } from "@react-three/fiber";
+import React, { useRef, useEffect, useState } from "react";
+import * as THREE from "three";
+import { TextureLoader } from "three/src/loaders/TextureLoader";
+import { PlanetOverlay } from "../planetOverlay";
+import { PlanetPath } from "../path";
+
+export const Jupiter = ({
+  getPosition,
+  speed,
+  speedChanged,
+  setPosition,
+  data,
+}) => {
+  const group = useRef();
+  const col = useLoader(TextureLoader, "../img/jupiter/jupiter2_4k.jpg");
+
+  const [posArr, setPosArr] = useState(data);
+  const lineArr = useRef([]);
+
+  let planetPositionIndex = useRef(0);
+  const lastPositionUpdate = useRef(0);
+
+  let distanceScaleFactor = 1000000;
+
+  useEffect(() => {
+    group.current.userData.name = "Jupiter";
+    group.current.userData.nearOvOp = 800;
+    group.current.userData.scolor = "yellow";
+  });
+
+  useFrame(({ clock }) => {
+    //getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current);
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2) {
+      //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
+    setPosition(group, posArr, lineArr);
+  }, []);
+
+  return (
+    <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"yellow"}
+        lineLength={400}
+      />
+      <group ref={group}>
+        <PlanetOverlay planet={group} />
+        <mesh>
+          <sphereGeometry args={[69911 / 6000, 50, 50]} />
+          <meshPhongMaterial map={col} />
+        </mesh>
+      </group>
+    </>
+  );
+};

src/planets/mars.jsx

@@ -1,21 +1,19 @@
 import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
-import { shaderMaterial, OrbitControls, Line } from "@react-three/drei";
-import React, {
-  useRef,
-  Suspense,
-  useLayoutEffect,
-  useState,
-  useContext,
-} from "react";
-import * as THREE from "three";
-import { MyContext } from "./Scene3";
-import glsl from "glslify";
-import { TextureLoader } from "three/src/loaders/TextureLoader";
-import { PlanetOverlay } from "./planetOverlay";
-import { PlanetPath } from "./path";
 
-export const Mars = ({ speed, getPosition, speedChanged }) => {
+import React, { useRef, useLayoutEffect, useState } from "react";
-  const [posArr, setPosArr] = useState([]);
+import * as THREE from "three";
+import { TextureLoader } from "three/src/loaders/TextureLoader";
+import { PlanetOverlay } from "../planetOverlay";
+import { PlanetPath } from "../path";
+
+export const Mars = ({
+  speed,
+  getPosition,
+  speedChanged,
+  setPosition,
+  data,
+}) => {
+  const [posArr, setPosArr] = useState(data);
   const lineArr = useRef([]);
   const lastPositionUpdate = useRef(0);
 
@@ -37,7 +35,7 @@ export const Mars = ({ speed, getPosition, speedChanged }) => {
     //getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
     const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
     //console.log(speedChanged);
-    if (timeSinceLastUpdate >= 2 || speedChanged) {
+    if (timeSinceLastUpdate >= 2) {
       getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
       //console.log(planetPositionIndex);
       //console.log("getpos");
@@ -46,34 +44,7 @@ export const Mars = ({ speed, getPosition, speedChanged }) => {
 
     //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;
+    setPosition(group, posArr, lineArr);
-    if (true && planetPositionIndex.current < posArr.length) {
-      group.current.position.set(
-        Number(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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
-          )
-        )
-      );
-    }
   }, []);
 
   return (

src/planets/mercury.jsx

@@ -1,26 +1,20 @@
-import {
+import { useFrame, useLoader } from "@react-three/fiber";
-  Canvas,
+import React, { useRef, useLayoutEffect, useState } from "react";
-  extend,
-  useFrame,
-  useLoader,
-  useThree,
-} from "@react-three/fiber";
-import React, {
-  useRef,
-  Suspense,
-  useLayoutEffect,
-  useState,
-  useEffect,
-} from "react";
 import * as THREE from "three";
 import { TextureLoader } from "three/src/loaders/TextureLoader";
-import "./styles.css";
+import "../styles.css";
 
-import { PlanetOverlay } from "./planetOverlay";
+import { PlanetOverlay } from "../planetOverlay";
-import { PlanetPath } from "./path";
+import { PlanetPath } from "../path";
 
-export const Mercury = ({ speed, getPosition, speedChanged }) => {
+export const Mercury = ({
-  const [posArr, setPosArr] = useState([]);
+  speed,
+  getPosition,
+  speedChanged,
+  setPosition,
+  data,
+}) => {
+  const [posArr, setPosArr] = useState(data);
   const lineArr = useRef([]);
   let planetPositionIndex = useRef(0);
   let distanceScaleFactor = 1000000;
@@ -37,7 +31,7 @@ export const Mercury = ({ speed, getPosition, speedChanged }) => {
   useFrame(({ clock }) => {
     //getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
     const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-    if (timeSinceLastUpdate >= 2 || speedChanged) {
+    if (timeSinceLastUpdate >= 2) {
       //console.log("gethis");
       getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
       lastPositionUpdate.current = clock.elapsedTime;
@@ -46,34 +40,7 @@ export const Mercury = ({ speed, getPosition, speedChanged }) => {
 
     //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;
+    setPosition(group, posArr, lineArr);
-    if (true && planetPositionIndex.current < posArr.length) {
-      group.current.position.set(
-        Number(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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
-          )
-        )
-      );
-    }
   }, []);
   const col = useLoader(TextureLoader, "../img/mercury/mercurymap.jpg");
   const bump = useLoader(TextureLoader, "../img/mercury/mercurybump.jpg");

src/planets/neptune.jsx

@@ -0,0 +1,74 @@
+import { useFrame, useLoader } from "@react-three/fiber";
+import React, { useRef, useLayoutEffect, useState, useContext } from "react";
+import * as THREE from "three";
+import { TextureLoader } from "three/src/loaders/TextureLoader";
+import "../styles.css";
+
+import { PlanetOverlay } from "../planetOverlay";
+import { PlanetPath } from "../path";
+import { MyContext } from "../Scene3";
+
+export const Neptune = ({
+  speedChanged,
+  getPosition,
+  speed,
+  setPosition,
+  data,
+}) => {
+  const [poss, setPos] = useState(data);
+  let distanceScaleFactor = 1000000;
+  const neptune = useRef();
+  const group = useRef();
+  const lineArr = useRef([]);
+
+  const [posArr, setPosArr] = useState([]);
+
+  let planetPositionIndex = useRef(0);
+
+  const { customData } = useContext(MyContext);
+  const lastPositionUpdate = useRef(0);
+
+  useLayoutEffect(() => {
+    group.current.userData.counter = 0;
+    group.current.userData.name = "Neptune";
+    group.current.userData.nearOvOp = 500;
+    group.current.userData.scolor = "darkblue";
+  }, []);
+
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2) {
+      //console.log("gethis");
+      getPosition("neptune", setPosArr, posArr, planetPositionIndex.current);
+      lastPositionUpdate.current = clock.elapsedTime;
+    }
+    setPosition(group, posArr, lineArr);
+  }, []);
+
+  const changeSpeed = (newSpeed) => {
+    setPos(poss.slice(0, group.current.userData.counter + 10));
+    setGetAgain(true);
+    console.log(poss);
+    setSpeed(newSpeed);
+  };
+
+  customData.current["changeNeptuneSpeed"] = changeSpeed;
+  const col = useLoader(TextureLoader, "../img/neptune/neptunemap.jpg");
+  return (
+    <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"darkblue"}
+        lineLength={20}
+      />
+      <group ref={group}>
+        <PlanetOverlay planet={group} />
+        <mesh ref={neptune}>
+          <sphereGeometry args={[24622 / 6000, 50, 50]} />
+          <meshPhongMaterial map={col} />
+        </mesh>
+      </group>
+    </>
+  );
+};

src/planets/saturn.jsx

@@ -1,18 +1,11 @@
-import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
+import { extend, useFrame, useLoader } from "@react-three/fiber";
-import { shaderMaterial, OrbitControls, Line } from "@react-three/drei";
+import { shaderMaterial } from "@react-three/drei";
-import React, {
+import React, { useRef, useLayoutEffect, useState } from "react";
-  useRef,
-  Suspense,
-  useLayoutEffect,
-  useState,
-  useContext,
-} from "react";
 import * as THREE from "three";
 import glsl from "glslify";
 import { TextureLoader } from "three/src/loaders/TextureLoader";
-import { PlanetOverlay } from "./planetOverlay";
+import { PlanetOverlay } from "../planetOverlay";
-import { PlanetPath } from "./path";
+import { PlanetPath } from "../path";
-import { MyContext } from "./Scene3";
 
 const SaturnRingMaterial = shaderMaterial(
   {
@@ -59,8 +52,14 @@ void main() {
 
 extend({ SaturnRingMaterial });
 
-export const Saturn = ({ speed, speedChanged, getPosition }) => {
+export const Saturn = ({
-  const [posArr, setPosArr] = useState([]);
+  speed,
+  speedChanged,
+  getPosition,
+  setPosition,
+  data,
+}) => {
+  const [posArr, setPosArr] = useState(data);
   const lineArr = useRef([]);
   const lastPositionUpdate = useRef(0);
 
@@ -84,7 +83,7 @@ export const Saturn = ({ speed, speedChanged, getPosition }) => {
 
   useFrame(({ clock }) => {
     const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-    if (timeSinceLastUpdate >= 2 || speedChanged) {
+    if (timeSinceLastUpdate >= 2) {
       //console.log("gethis");
       getPosition("saturn", setPosArr, posArr, planetPositionIndex.current);
       lastPositionUpdate.current = clock.elapsedTime;
@@ -93,38 +92,7 @@ export const Saturn = ({ speed, speedChanged, getPosition }) => {
 
     //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;
+    setPosition(group, posArr, lineArr);
-    if (
-      true &&
-      planetPositionIndex.current < posArr.length &&
-      posArr.length > 0
-    ) {
-      group.current.position.set(
-        Number(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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
-          )
-        )
-      );
-    }
   }, []);
 
   return (

src/planets/sun.jsx

@@ -4,7 +4,7 @@ import React, { useRef, Suspense, useLayoutEffect } from "react";
 import * as THREE from "three";
 import glsl from "glslify";
 import { TextureLoader } from "three/src/loaders/TextureLoader";
-import { PlanetOverlay } from "./planetOverlay";
+import { PlanetOverlay } from "../planetOverlay";
 
 export const Sun = ({ positions }) => {
   const mars = useRef("mars");

src/planets/uranus.jsx

@@ -0,0 +1,67 @@
+import { useFrame, useLoader } from "@react-three/fiber";
+import React, { useRef, useLayoutEffect, useState } from "react";
+import * as THREE from "three";
+import glsl from "glslify";
+import { TextureLoader } from "three/src/loaders/TextureLoader";
+import "../styles.css";
+
+import { PlanetOverlay } from "../planetOverlay";
+import { PlanetPath } from "../path";
+
+export const Uranus = ({
+  speed,
+  speedChanged,
+  getPosition,
+  setPosition,
+  data,
+}) => {
+  let distanceScaleFactor = 1000000;
+  const [posArr, setPosArr] = useState(data);
+  const lineArr = useRef([]);
+  const lastPositionUpdate = useRef(0);
+
+  let planetPositionIndex = useRef(0);
+
+  const uranus = useRef();
+  const group = useRef();
+
+  useLayoutEffect(() => {
+    group.current.userData.counter = 0;
+    group.current.userData.name = "Uranus";
+    group.current.userData.nearOvOp = 350;
+    group.current.userData.scolor = "lightblue";
+  }, []);
+
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2) {
+      //console.log("gethis");
+      getPosition("uranus", 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
+    setPosition(group, posArr, lineArr);
+  }, []);
+
+  const col = useLoader(TextureLoader, "../img/uranus/uranusmap.jpg");
+  return (
+    <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"lightblue"}
+        lineLength={200}
+      />
+      <group ref={group}>
+        <PlanetOverlay planet={group} />
+        <mesh ref={uranus}>
+          <sphereGeometry args={[25362 / 6000, 50, 50]} />
+          <meshPhongMaterial map={col} />
+        </mesh>
+      </group>
+    </>
+  );
+};

src/planets/venus.jsx

@@ -0,0 +1,67 @@
+import { useFrame, useLoader } from "@react-three/fiber";
+import React, { useRef, useLayoutEffect, useState, useContext } from "react";
+import * as THREE from "three";
+import { TextureLoader } from "three/src/loaders/TextureLoader";
+import "../styles.css";
+
+import { PlanetOverlay } from "../planetOverlay";
+import { PlanetPath } from "../path";
+import { MyContext } from "../Scene3";
+
+export const Venus = ({
+  speed,
+  speedChanged,
+  getPosition,
+  setPosition,
+  data,
+}) => {
+  const [posArr, setPosArr] = useState(data);
+  const lineArr = useRef([]);
+  const lastPositionUpdate = useRef(0);
+
+  let planetPositionIndex = useRef(0);
+  const venus = useRef();
+  const group = useRef();
+  const { customData } = useContext(MyContext);
+
+  useLayoutEffect(() => {
+    group.current.userData.counter = 0;
+    group.current.userData.name = "Venus";
+    group.current.userData.nearOvOp = 20;
+    group.current.userData.scolor = "brown";
+  }, []);
+
+  useFrame(({ clock }) => {
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    if (timeSinceLastUpdate >= 2) {
+      //console.log("gethis");
+      getPosition("venus", 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
+    setPosition(group, posArr, lineArr);
+  }, []);
+
+  const col = useLoader(TextureLoader, "../img/venus/venusmap.jpg");
+  const bump = useLoader(TextureLoader, "../img/venus/venusbump.jpg");
+  return (
+    <>
+      <PlanetPath
+        linePos={lineArr.current}
+        planet={group}
+        color={"brown"}
+        lineLength={100}
+      />
+      <group ref={group}>
+        <PlanetOverlay planet={group} />
+        <mesh ref={venus}>
+          <sphereGeometry args={[6051.8 / 6000, 50, 50]} />
+          <meshPhongMaterial map={col} bumpMap={bump} bumpScale={0.3} />
+        </mesh>
+      </group>
+    </>
+  );
+};

src/skybox.jsx

@@ -1,34 +1,6 @@
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { 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 {
-  Selection,
-  Select,
-  EffectComposer,
-  Outline,
-} from "@react-three/postprocessing";
 
+import * as THREE from "three";
 export const Skybox = () => {
   const { scene } = useThree();
   const loader = new THREE.CubeTextureLoader();

src/styles.css

@@ -35,6 +35,8 @@ canvas {
   z-index: 12;
   position: absolute;
   height: 100%;
+  transition: opacity 0.5s;
+  /*opacity: 0;
   /*background-color: aliceblue;*/
 }
 
@@ -49,7 +51,31 @@ canvas {
   width: 100%;
 }
 
+.planetInfoFadeIn {
+  z-index: 12;
+  position: absolute;
+  height: 100%;
+  transition-delay: 1s;
+  transition-property: opacity;
+  transition: opacity 2s;
+  opacity: 0;
+}
+
+.btn-close {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  top: 50px;
+  font-size: x-large;
+  color: white;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  cursor: pointer;
+  right: calc(-100% + 40px);
+}
+
 .planetInfo .wrapper {
+  padding-top: 100px;
   background-color: rgba(194, 15, 15, 0);
   backdrop-filter: blur(0.5px);
   display: block;
@@ -57,12 +83,43 @@ canvas {
   top: 0;
   height: 100%;
   border-right: 1px solid rgba(255, 255, 255, 0.216);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 16px;
 }
 
 .planetInfo .wrapper p {
   color: white;
-  padding: 2px;
+  padding: 10px 10px;
-  margin-left: 3%;
+  margin: 0 auto;
+}
+
+.planetInfo .wrapper .data-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 10px;
+  margin: 0 auto;
+}
+
+.planetInfo .wrapper .data-wrapper .data {
+  padding-bottom: 0px;
+  border-bottom: 1px solid rgb(116, 116, 116);
+}
+
+.planetInfo .wrapper .data-wrapper .data-1 {
+  padding-right: 5px;
+  font-size: 28.8px;
+}
+
+.planetInfo .wrapper .data-wrapper .data-2 {
+  padding-right: 5px;
+  color: white;
+  font-size: 18.8px;
+}
+
+.planetInfo .wrapper .data-wrapper .data-3 {
+  padding-right: 5px;
+  color: rgb(83, 83, 83);
+  font-size: 14px;
 }
 
 .planetInfo .wrapper h1 {

src/uranus.jsx

@@ -1,120 +0,0 @@
-import {
-  Canvas,
-  extend,
-  useFrame,
-  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 Uranus = ({ speed, speedChanged, getPosition }) => {
-  let distanceScaleFactor = 1000000;
-  const [posArr, setPosArr] = useState([]);
-  const lineArr = useRef([]);
-  const lastPositionUpdate = useRef(0);
-
-  let planetPositionIndex = useRef(0);
-
-  const uranus = useRef();
-  const group = useRef();
-
-  useLayoutEffect(() => {
-    group.current.userData.counter = 0;
-    group.current.userData.name = "Uranus";
-    group.current.userData.nearOvOp = 350;
-    group.current.userData.scolor = "lightblue";
-  }, []);
-
-  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;
-    }
-    //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(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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
-          )
-        )
-      );
-    }
-  }, []);
-
-  const col = useLoader(TextureLoader, "../img/uranus/uranusmap.jpg");
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        planet={group}
-        color={"lightblue"}
-        lineLength={200}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={uranus}>
-          <sphereGeometry args={[25362 / 6000, 50, 50]} />
-          <meshPhongMaterial map={col} />
-        </mesh>
-      </group>
-    </>
-  );
-};

src/venus.jsx

@@ -1,121 +0,0 @@
-import {
-  Canvas,
-  extend,
-  useFrame,
-  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 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 { customData } = useContext(MyContext);
-
-  useLayoutEffect(() => {
-    group.current.userData.counter = 0;
-    group.current.userData.name = "Venus";
-    group.current.userData.nearOvOp = 20;
-    group.current.userData.scolor = "brown";
-  }, []);
-
-  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;
-    }
-    //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(
-          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
-        ),
-        Number(
-          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
-        ),
-        Number(
-          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
-          )
-        )
-      );
-    }
-  }, []);
-
-  const col = useLoader(TextureLoader, "../img/venus/venusmap.jpg");
-  const bump = useLoader(TextureLoader, "../img/venus/venusbump.jpg");
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        planet={group}
-        color={"brown"}
-        lineLength={100}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={venus}>
-          <sphereGeometry args={[6051.8 / 6000, 50, 50]} />
-          <meshPhongMaterial map={col} bumpMap={bump} bumpScale={0.3} />
-        </mesh>
-      </group>
-    </>
-  );
-};