mirror of
https://github.com/denismhz/solar-system.git
synced 2025-11-09 16:16:22 +01:00
planet info
This commit is contained in:
parent
20d9c7fbbe
commit
0c7417c768
BIN
img/skybox/Jahresrechnung vom 11.07.2022.pdf
Normal file
BIN
img/skybox/Jahresrechnung vom 11.07.2022.pdf
Normal file
Binary file not shown.
BIN
img/skybox/Vertragsinformation vom 03.04.2023.pdf
Normal file
BIN
img/skybox/Vertragsinformation vom 03.04.2023.pdf
Normal file
Binary file not shown.
|
|
@ -1,6 +1,13 @@
|
|||
import { Canvas, useThree } from "@react-three/fiber";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import React, { Suspense, useRef, createContext, memo } from "react";
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import React, {
|
||||
Suspense,
|
||||
useRef,
|
||||
createContext,
|
||||
memo,
|
||||
useLayoutEffect,
|
||||
useState,
|
||||
useEffect,
|
||||
} from "react";
|
||||
|
||||
import { ScreenOverlay } from "./omnioverlay.jsx";
|
||||
import { SharedPlanetState } from "./SharedPlanetState.jsx";
|
||||
|
|
@ -12,12 +19,82 @@ 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>}>
|
||||
{!loading && (
|
||||
<>
|
||||
<MyContext.Provider value={{ controls, customData }}>
|
||||
<ScreenOverlay />
|
||||
<Suspense fallback={null}>
|
||||
{!loading && <ScreenOverlay planetInfo={pinfo} />}
|
||||
|
||||
{loading && <div className="loadingScreen">Loading</div>}
|
||||
{!loading && (
|
||||
<Canvas
|
||||
/*camera={{
|
||||
position: [0, 0, 100],
|
||||
|
|
@ -29,11 +106,13 @@ const SolarSystemScene = () => {
|
|||
<CustomCamera />
|
||||
<Skybox />
|
||||
<ambientLight intensity={0.5} />
|
||||
<SharedPlanetState />
|
||||
<SharedPlanetState initialData={initialData} />
|
||||
</Canvas>
|
||||
</Suspense>
|
||||
)}
|
||||
</MyContext.Provider>
|
||||
</>
|
||||
)}
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@ import React, {
|
|||
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 { Earth } from "./planets/earth.jsx";
|
||||
import { Mars } from "./planets/mars.jsx";
|
||||
import { Jupiter } from "./planets/jupiter.jsx";
|
||||
import { Saturn } from "./planets/saturn.jsx";
|
||||
import { Mercury } from "./planets/mercury.jsx";
|
||||
import { Venus } from "./planets/venus.jsx";
|
||||
import { Neptune } from "./planets/neptune.jsx";
|
||||
import { Uranus } from "./planets/uranus.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) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
let response = await res.json();
|
||||
setPosState(oldState.concat(response));
|
||||
}
|
||||
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 }}>
|
||||
{initialData && (
|
||||
<>
|
||||
<Earth
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
speedChanged={speedChanged}
|
||||
data={initialData["399"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Mars
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
speedChanged={speedChanged}
|
||||
data={initialData["499"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
<Jupiter speed={speed} getPosition={getPositions} />
|
||||
<Saturn speed={speed} getPosition={getPositions} />
|
||||
<Mercury speed={speed} getPosition={getPositions} />
|
||||
<Venus speed={speed} getPosition={getPositions} />
|
||||
<Neptune speed={speed} getPosition={getPositions} />
|
||||
<Uranus speed={speed} getPosition={getPositions} />
|
||||
<Sun />
|
||||
</>
|
||||
)}
|
||||
{false && (
|
||||
<Planet
|
||||
posArr={data["199"]}
|
||||
planetPosIndex={currentPosIndexRef}
|
||||
speed={speed}
|
||||
/>
|
||||
)}
|
||||
</PlanetOverlayContext.Provider>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
128
src/neptune.jsx
128
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -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) => {
|
||||
customData.current.updateSpeed(event.target.value);
|
||||
const handleChange = () => {
|
||||
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">
|
||||
<
|
||||
</button>
|
||||
<button onClick={handleReset} className="btn btn-primary">
|
||||
<button onClick={handleChange} className="btn btn-primary">
|
||||
II
|
||||
</button>
|
||||
<button onClick={handleChange0} className="btn btn-primary">
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePlanetOverlayVisibility}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
<button onClick={handleChange1} className="btn btn-primary">
|
||||
>>
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePlanetOverlayVisibility}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
>>>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-group" role="group">
|
||||
<button
|
||||
|
|
@ -70,7 +70,7 @@ export const ScreenOverlay = () => {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<PlanetInfo />
|
||||
<PlanetInfo planetInfo={props.planetInfo} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Adorned with a dazzling, complex system of icy rings, Saturn is
|
||||
unique in our solar system. The other giant planets have rings, but
|
||||
none are as spectacular as Saturn's.
|
||||
</p>
|
||||
<button type="button" onClick={closeInfo}>
|
||||
Visit
|
||||
</button>
|
||||
<p>{planetData.Description}</p>
|
||||
<div className="data-wrapper">
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.LOY}
|
||||
</span>
|
||||
<span className="data-2">Earth Days/Years</span>
|
||||
</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>
|
||||
);
|
||||
|
|
|
|||
BIN
src/planet_overlay_img/jupiter.jpg
Normal file
BIN
src/planet_overlay_img/jupiter.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/planet_overlay_img/mars.jpg
Normal file
BIN
src/planet_overlay_img/mars.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/planet_overlay_img/neptune.jpg
Normal file
BIN
src/planet_overlay_img/neptune.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
BIN
src/planet_overlay_img/uranus.jpg
Normal file
BIN
src/planet_overlay_img/uranus.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8 KiB |
|
|
@ -1,46 +1,24 @@
|
|||
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, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useLayoutEffect, useState, useEffect } 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 { PlanetInfo } from "./planetInfo";
|
||||
import { PlanetPath } from "./path";
|
||||
import { MyContext } from "./Scene3";
|
||||
import { PlanetOverlayContext } from "./SharedPlanetState";
|
||||
import "../styles.css";
|
||||
|
||||
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,6 +95,7 @@ export const Earth = ({ speed, getPosition, speedChanged }) => {
|
|||
<sphereGeometry args={[6371.0 / 6000 + 0.01, 50, 50]} />
|
||||
<meshPhongMaterial map={cloudMap} transparent={true} opacity={0.5} />
|
||||
</mesh>
|
||||
{true && (
|
||||
<line ref={line}>
|
||||
<bufferGeometry />
|
||||
<lineBasicMaterial
|
||||
|
|
@ -154,6 +105,7 @@ export const Earth = ({ speed, getPosition, speedChanged }) => {
|
|||
linewidth={2}
|
||||
/>
|
||||
</line>
|
||||
)}
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
63
src/planets/jupiter.jsx
Normal file
63
src/planets/jupiter.jsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -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 }) => {
|
||||
const [posArr, setPosArr] = useState([]);
|
||||
import React, { useRef, useLayoutEffect, 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 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;
|
||||
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
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -1,26 +1,20 @@
|
|||
import {
|
||||
Canvas,
|
||||
extend,
|
||||
useFrame,
|
||||
useLoader,
|
||||
useThree,
|
||||
} from "@react-three/fiber";
|
||||
import React, {
|
||||
useRef,
|
||||
Suspense,
|
||||
useLayoutEffect,
|
||||
useState,
|
||||
useEffect,
|
||||
} from "react";
|
||||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useLayoutEffect, useState } 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 { PlanetPath } from "./path";
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
export const Mercury = ({ speed, getPosition, speedChanged }) => {
|
||||
const [posArr, setPosArr] = useState([]);
|
||||
export const Mercury = ({
|
||||
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;
|
||||
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
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
const col = useLoader(TextureLoader, "../img/mercury/mercurymap.jpg");
|
||||
const bump = useLoader(TextureLoader, "../img/mercury/mercurybump.jpg");
|
||||
74
src/planets/neptune.jsx
Normal file
74
src/planets/neptune.jsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,18 +1,11 @@
|
|||
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 { extend, useFrame, useLoader } from "@react-three/fiber";
|
||||
import { shaderMaterial } from "@react-three/drei";
|
||||
import React, { useRef, useLayoutEffect, useState } 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";
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
const SaturnRingMaterial = shaderMaterial(
|
||||
{
|
||||
|
|
@ -59,8 +52,14 @@ void main() {
|
|||
|
||||
extend({ SaturnRingMaterial });
|
||||
|
||||
export const Saturn = ({ speed, speedChanged, getPosition }) => {
|
||||
const [posArr, setPosArr] = useState([]);
|
||||
export const Saturn = ({
|
||||
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;
|
||||
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
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -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");
|
||||
67
src/planets/uranus.jsx
Normal file
67
src/planets/uranus.jsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
67
src/planets/venus.jsx
Normal file
67
src/planets/venus.jsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,34 +1,6 @@
|
|||
import { Canvas, useFrame, 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 { useThree } from "@react-three/fiber";
|
||||
|
||||
import * as THREE from "three";
|
||||
export const Skybox = () => {
|
||||
const { scene } = useThree();
|
||||
const loader = new THREE.CubeTextureLoader();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
margin-left: 3%;
|
||||
padding: 10px 10px;
|
||||
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 {
|
||||
|
|
|
|||
120
src/uranus.jsx
120
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
121
src/venus.jsx
121
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue