-
*/}
+
+
+ {date && date.toUTCString()}
+
+
);
diff --git a/src/planets/path.jsx b/src/planets/path.jsx
new file mode 100644
index 0000000..bfeba0c
--- /dev/null
+++ b/src/planets/path.jsx
@@ -0,0 +1,128 @@
+import { useFrame } from "@react-three/fiber";
+import React, { useRef, useContext, useLayoutEffect, useState } from "react";
+import * as THREE from "three";
+import { PlanetOverlayContext } from "../SharedPlanetState";
+
+export const PlanetPath = ({
+ linePos,
+ color,
+ lineLength,
+ planet,
+}) => {
+ const lineref = useRef();
+ const lineArr = useRef([]);
+ const first = useRef(true);
+ const [loading, setLoading] = useState();
+ const { speed } = useContext(PlanetOverlayContext);
+ const [linePoss, setLinePoss] = useState(null);
+ const [second, setSecond] = useState(false);
+ const asd = useContext(PlanetOverlayContext);
+
+ //from chatgpt very nice :D
+ const cutPath = (path, maxLength) => {
+ let length = getLength(path);
+ while (length > maxLength && path.length >= 2) {
+ const firstPoint = path[0];
+ const secondPoint = path[1];
+ const segmentLength = firstPoint.distanceTo(secondPoint);
+ if (segmentLength > maxLength) {
+ // If the first segment is longer than the maximum length,
+ // split it into multiple segments of the maximum length.
+ const numSegments = Math.ceil(segmentLength / maxLength);
+ const segmentDirection = secondPoint
+ .clone()
+ .sub(firstPoint)
+ .normalize();
+ const segmentLength = segmentLength / numSegments;
+ const newPoints = [firstPoint];
+ for (let i = 1; i < numSegments; i++) {
+ const newPoint = firstPoint
+ .clone()
+ .add(segmentDirection.clone().multiplyScalar(segmentLength * i));
+ newPoints.push(newPoint);
+ }
+ newPoints.push(secondPoint);
+ path.splice(0, 2, ...newPoints);
+ length = getLength(path);
+ } else {
+ path.shift();
+ length -= segmentLength;
+ }
+ }
+ };
+
+ function getLength(arrV3) {
+ let sum = 0;
+ for (var i = 0; i < arrV3.length - 1; i += 2) {
+ sum += arrV3[i].distanceTo(arrV3[i + 1]);
+ }
+ return sum;
+ }
+
+ const distanceScaleFactor = 1000000;
+
+ useLayoutEffect(() => {
+ if (second && linePoss) {
+ linePoss.forEach((element) => {
+ element.position.x = element.position.x / distanceScaleFactor;
+ element.position.y = element.position.y / distanceScaleFactor;
+ element.position.z = element.position.z / distanceScaleFactor;
+ lineArr.current.push(
+ new THREE.Vector3(
+ element.position.x,
+ element.position.y,
+ element.position.z
+ )
+ );
+ });
+
+
+ setSecond(false);
+ }
+ if(first.current){
+ const fetchLinePos = async () => {
+ fetch(
+ `http://127.0.0.1:8000/duration/line?name=${planet.name}&id=${planet.id}&LOY=${planet.year}`
+ ).then((response) => {
+ if (!response.ok) {
+ throw new Error(
+ `This is an HTTP error: The status is ${response.status}`
+ );
+ }
+ setLoading(true);
+ response
+ .json()
+ .then((data) => {
+ setLinePoss(data)
+ setSecond(true);
+
+ })
+ .catch(() => {})
+ .finally(() => {
+ setLoading(false);
+ });
+ });
+ };
+ fetchLinePos();
+ first.current = false;
+ }
+ //console.log(lineArr.current);
+ },[linePoss, planet, second]);
+
+ const lineGeometry = new THREE.BufferGeometry();
+ useFrame(() => {
+ let vis = Infinity;
+ if(asd.pathVis == "hidden") vis = 0;
+ else vis = Infinity;
+ lineref.current.geometry.setFromPoints(lineArr.current);
+ lineref.current.geometry.setDrawRange(0, vis);
+ //cutPath(linePos, lineLength);
+ });
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/src/planets/planet.jsx b/src/planets/planet.jsx
new file mode 100644
index 0000000..4234227
--- /dev/null
+++ b/src/planets/planet.jsx
@@ -0,0 +1,62 @@
+import { useFrame, useLoader, useThree } from "@react-three/fiber";
+import { useRef, useLayoutEffect } from "react";
+import { TextureLoader } from "three/src/loaders/TextureLoader";
+import { PlanetOverlay } from "./planetOverlay";
+import { PlanetPath } from "./path";
+import PropTypes from "prop-types";
+
+const Planet = ({ planetData, setPosition, positions, realPos, linePos }) => {
+ const lineArr = useRef([]);
+
+ const colorMap = useLoader(
+ TextureLoader,
+ `../img/${planetData.name.toLowerCase()}/color.jpg`
+ );
+
+ useFrame(() => {
+ if (positions) setPosition(group, positions, lineArr, realPos);
+ });
+
+ useLayoutEffect(() => {
+ group.current.userData.name = planetData.name;
+ group.current.userData.nearOvOp = planetData.overlayVisibilityDistance;
+ group.current.userData.scolor = planetData.color;
+ });
+
+ useThree(() => {});
+
+ const group = useRef();
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Planet.propTypes = {
+ planetData: PropTypes.object,
+ setPosition: PropTypes.func,
+ positions: PropTypes.array,
+ realPos: PropTypes.object,
+ linePos: PropTypes.array,
+};
+
+export default Planet;
diff --git a/src/planets/planetInfo.jsx b/src/planets/planetInfo.jsx
new file mode 100644
index 0000000..ba80962
--- /dev/null
+++ b/src/planets/planetInfo.jsx
@@ -0,0 +1,79 @@
+import { useState, useEffect, useContext } from "react";
+import { MyContext } from "../SolarSystemMain";
+import PropTypes from "prop-types";
+
+export const PlanetInfo = (props) => {
+ const [visibility, setVisibility] = useState("hidden");
+ const { customData } = useContext(MyContext);
+ const [planetData, setPlanetData] = useState({ name: "Default" });
+
+ useEffect(() => {
+ const showInfo = (planet) => {
+ props.planetInfo.forEach((oplanet) => {
+ if (planet.name == oplanet.name) {
+ setPlanetData(oplanet);
+ }
+ });
+ setVisibility("visible");
+ };
+ if (showInfo) customData.current["showInfo"] = showInfo;
+ }, [customData, planetData, props.planetInfo]);
+
+ function closeInfo() {
+ setVisibility("hidden");
+ }
+
+ return (
+
+
+
+
{planetData.name}
+
}.jpg`})
+
{planetData.Description}
+
+
+
+ {planetData.LOY}
+
+ Earth Days/Years
+
+
+
+ {planetData.DFS}
+
+ AU
+ Distance from Sun
+
+
+
+ {planetData.Moons}
+
+ Moons
+
+
+
+ {planetData.Radius}
+
+ Radius
+ Kilometers
+
+
+
+
+ );
+};
+
+PlanetInfo.propTypes = {
+ planet: PropTypes.object,
+ planetInfo: PropTypes.array
+};
diff --git a/src/planetOverlay.jsx b/src/planets/planetOverlay.jsx
similarity index 61%
rename from src/planetOverlay.jsx
rename to src/planets/planetOverlay.jsx
index 2735f62..d587a1b 100644
--- a/src/planetOverlay.jsx
+++ b/src/planets/planetOverlay.jsx
@@ -1,81 +1,40 @@
-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 { useFrame, useThree } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import React, { useState, useEffect, useContext } from "react";
import * as THREE from "three";
-import { MyContext } from "./Scene3";
-
-import "./styles.css";
-
+import { MyContext } from "../SolarSystemMain";
import PropTypes from "prop-types";
-import { PlanetOverlayContext } from "./SharedPlanetState";
+import { PlanetOverlayContext } from "../SharedPlanetState";
export const PlanetOverlay = ({ planet }) => {
- const ref = useRef();
let [opacity, setOpacity] = useState(0);
let [minDistance, setMinDistance] = useState(0);
const { nameVis, iconVis } = useContext(PlanetOverlayContext);
let [scolor, setSColor] = useState("white");
- let [follow, setFollow] = useState(false);
const { camera } = useThree();
const [name, setName] = useState("Undefined");
const svgStyle = { height: "20px", width: "20px", stroke: scolor };
- var { controls } = useContext(MyContext);
const { customData } = useContext(MyContext);
const handleClick = React.useCallback(
(event) => {
// prevent context menu from opening on right-click
event.preventDefault();
-
- // synthetic event
- /*switch (event.type) {
- case "click":
- message = `Left click (synthetic event)`;
- break;
- case "contextmenu":
- message = `Right click (synthetic event)`;
- break;
- }*/
-
// native event
switch (event.nativeEvent.button) {
case 0:
- //controls.current.target.copy(planet.current.position.clone());
customData.current.showInfo(planet.current.userData);
customData.current.handlePosition(
planet.current.position,
planet.current
);
- customData.current.handleLookAt(planet.current.position);
- //console.log(customData);
- //startFollow();
break;
case 2:
- //endFollow();
break;
}
},
- [controls, planet, customData]
+ [planet, customData]
);
useEffect(() => {
@@ -93,27 +52,11 @@ export const PlanetOverlay = ({ planet }) => {
} else {
setOpacity(1);
}
- if (follow && controls) {
- controls.current.target.copy(planet.current.position.clone());
- controls.current.maxDistance = 20;
- }
- //console.log(iconVis);
- }, []);
-
- function startFollow() {
- console.log(ref === ref);
- setFollow(true);
- }
-
- function endFollow() {
- setFollow(false);
- controls.current.reset();
- }
+ });
return (
<>
{
style={{ visibility: iconVis }}
>
-