Refactor

js/earth/earth_mesh.js

@@ -1,66 +0,0 @@
-import * as THREE from "three";
-import { moonMesh } from "../moon/moon.js";
-
-const textL = new THREE.TextureLoader();
-
-const r = 25;
-const s = 50;
-const tilt = 1;
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/earth/earth_uv_1k.jpg"),
-  bumpMap: textL.load("../../img/earth/earth_bump_1k.jpg"),
-  specularMap: textL.load("../../img/earth/earth_spec_1k.jpg"),
-  bumpScale: 0.2,
-  shininess: 0.5,
-});
-
-const earthMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(6371.0 / 6000, 50, 50),
-  material
-);
-
-earthMesh.rotation.z = tilt;
-
-earthMesh.name = "earthMesh";
-
-const cloudGeometry = new THREE.SphereGeometry(6371.0 / 6000 + 0.01, 50, 50);
-const cloudMaterial = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/earth/6k_earth_clouds.jpg"),
-  transparent: true,
-  opacity: 0.5,
-});
-
-const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
-clouds.rotation.z = tilt;
-
-const axisPoints = [
-  new THREE.Vector3(0, 6371.0 / 6000 + 0.5, 0),
-  new THREE.Vector3(0, -(6371.0 / 6000 + 0.5), 0),
-];
-const axisGeometry = new THREE.BufferGeometry().setFromPoints(axisPoints);
-const axis = new THREE.Line(
-  axisGeometry,
-  new THREE.LineBasicMaterial({
-    color: 0x330000,
-    transparent: true,
-    opacity: 0.5,
-    linewidth: 2,
-  })
-);
-axis.rotation.z = 0;
-
-//earthMesh.castShadow = true;
-//earthMesh.receiveShadow = true;
-//clouds.receiveShadow = true;
-
-const earthGroup = new THREE.Group();
-moonMesh.position.set(0, 384000 / 200000, 0);
-earthGroup.userData.id = 399;
-earthGroup.name = "earthGroup";
-earthGroup.add(earthMesh);
-earthGroup.add(clouds);
-earthGroup.add(axis);
-earthGroup.add(moonMesh);
-
-export { earthMesh, earthGroup };

js/jupiter/jupiter.js

@@ -1,21 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/jupiter/jupiter2_4k.jpg"),
-});
-
-const jupiterMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(69911 / 6000, 50, 50),
-  material
-);
-
-jupiterMesh.name = "jupiterMesh";
-
-const jupiterGroup = new THREE.Group();
-jupiterGroup.name = "jupiterGroup";
-jupiterGroup.userData.id = 599;
-jupiterGroup.add(jupiterMesh);
-
-export { jupiterMesh, jupiterGroup };

js/mars/mars.js

@@ -1,23 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/mars/mars_1k_color.jpg"),
-  bumpMap: textL.load("../../img/mars/mars_1k_topo.jpg"),
-  normalMap: textL.load("../../img/mars/mars_1k_normal.jpg"),
-});
-
-const marsMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(3389.5 / 6000, 50, 50),
-  material
-);
-
-marsMesh.name = "mercuryMesh";
-
-const marsGroup = new THREE.Group();
-marsGroup.name = "marsGroup";
-marsGroup.userData.id = 499;
-marsGroup.add(marsMesh);
-
-export { marsMesh, marsGroup };

js/mercury/mercury.js

@@ -1,22 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/mercury/mercurymap.jpg"),
-  bumpMap: textL.load("../../img/mercury/mercurybump.jpg"),
-});
-
-const mercuryMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(2439.7 / 6000, 50, 50),
-  material
-);
-
-mercuryMesh.name = "mercuryMesh";
-
-const mercuryGroup = new THREE.Group();
-mercuryGroup.name = "mercuryGroup";
-mercuryGroup.userData.id = 199;
-mercuryGroup.add(mercuryMesh);
-
-export { mercuryMesh, mercuryGroup };

js/moon/moon.js

@@ -1,19 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const r = 1737 / 6000;
-const s = 50;
-
-const moonMaterial = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/moon/moonmap4k.jpg"),
-  bumpMap: textL.load("../../img/moon/moonbump4k.jpg"),
-  bumpScale: 0.2,
-});
-
-const moonMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(r, s, s),
-  moonMaterial
-);
-
-export { moonMesh };

js/neptune/neptune.js

@@ -1,21 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/neptune/neptunemap.jpg"),
-});
-
-const neptuneMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(24622 / 6000, 50, 50),
-  material
-);
-
-neptuneMesh.name = "neptuneMesh";
-
-const neptuneGroup = new THREE.Group();
-neptuneGroup.name = "neptuneGroup";
-neptuneGroup.userData.id = 899;
-neptuneGroup.add(neptuneMesh);
-
-export { neptuneMesh, neptuneGroup };

js/pluto/pluto.js

@@ -1,21 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/pluto/plutomap2k.jpg"),
-  bumpMap: textL.load("../../img/pluto/plutobump2k.jpg"),
-});
-
-const plutoMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(1188 / 6000, 50, 50),
-  material
-);
-
-plutoMesh.name = "plutoMesh";
-
-const plutoGroup = new THREE.Group();
-plutoGroup.name = "plutoGroup";
-plutoGroup.add(plutoMesh);
-
-export { plutoMesh, plutoGroup };

js/saturn/saturn.js

@@ -1,87 +0,0 @@
-import * as THREE from "three";
-import { BoxGeometry } from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/saturn/saturnmap.jpg"),
-});
-
-const saturnMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(58232 / 6000, 30, 30),
-  material
-);
-
-saturnMesh.name = "saturnMesh";
-
-const sringGeo = new THREE.RingGeometry(
-  58232 / 6000 + 1,
-  58232 / 6000 + 5,
-  100,
-  100
-);
-
-const textured = textL.load("../../img/saturn/saturnringcolor.jpg");
-const otexture = textL.load("../../img/saturn/saturnringpattern.gif");
-
-const sringMaterial = new THREE.ShaderMaterial({
-  uniforms: {
-    texturea: { value: textured },
-    alphaTex: { value: otexture },
-    innerRadius: { value: 58232 / 6000 + 0 },
-    outerRadius: { value: 58232 / 6000 + 0 },
-  },
-  vertexShader: `
-    varying vec3 vPos;
-    
-    void main() {
-      vPos = position;
-      vec3 viewPosition = (modelViewMatrix * vec4(position, 1.)).xyz;
-      gl_Position = projectionMatrix * vec4(viewPosition, 1.);
-    }
-  `,
-  fragmentShader: `
-    uniform sampler2D texturea;
-    uniform sampler2D alphaTex;
-    uniform float innerRadius;
-    uniform float outerRadius;
-
-    varying vec3 vPos;
-
-    vec4 color() {
-      vec2 uv = vec2(0);
-      uv.x = (length(vPos) - innerRadius) / (innerRadius + outerRadius);  
-      
-      vec4 pixel = texture2D(texturea, uv);
-      vec4 pixel2 = texture2D(alphaTex, uv);
-      pixel[3] = pixel2[0];
-      if (pixel[3] <= 0.01) {
-        discard;
-      }
-      return pixel;
-    }
-
-    void main() {
-      gl_FragColor = color();
-    }
-  `,
-  transparent: true,
-  side: THREE.DoubleSide,
-});
-
-const sringMat = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/saturn/saturnringcolor.jpg"),
-  alphaMap: textL.load("../../img/saturn/saturnringpattern.gif"),
-  side: THREE.DoubleSide,
-  transparent: true,
-});
-
-const sringMesh = new THREE.Mesh(sringGeo, sringMaterial);
-
-const saturnGroup = new THREE.Group();
-saturnGroup.name = "saturnGroup";
-saturnGroup.userData.id = 699;
-saturnGroup.add(saturnMesh);
-saturnGroup.add(sringMesh);
-
-export { saturnMesh, saturnGroup };

js/skybox/skybox.js

@@ -1,17 +0,0 @@
-import * as THREE from "three"
-
-const textL = new THREE.CubeTextureLoader();
-
-//const skyboxGeo = new THREE.BoxGeometry(10000,10000,10000);
-//const skybox = new THREE.Mesh(skyboxGeo);
-
-const skybox = textL.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"
-])
-
-export default skybox

js/sun/sun_mesh.js

@@ -1,22 +0,0 @@
-import * as THREE from "three";
-
-const standardSunMaterial = new THREE.MeshStandardMaterial({
-  emissive: 0xffd700,
-  emissiveMap: new THREE.TextureLoader().load("./img/sun/sun_uv.jpg"),
-  emissiveIntensity: 1,
-});
-
-const sunMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(10000 / 6000, 30, 30),
-  standardSunMaterial
-);
-
-sunMesh.name = "sunMesh";
-
-var sunLight = new THREE.PointLight(0xffffff, 1, 10000.0, 2);
-const sunGroup = new THREE.Group();
-sunGroup.name = "Sun";
-sunGroup.add(sunMesh);
-//sunGroup.add(sunLight);
-
-export { sunGroup, sunMesh };

js/uranus/uranus.js

@@ -1,21 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/uranus/uranusmap.jpg"),
-});
-
-const uranusMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(25362 / 6000, 50, 50),
-  material
-);
-
-uranusMesh.name = "uranusMesh";
-
-const uranusGroup = new THREE.Group();
-uranusGroup.name = "uranusGroup";
-uranusGroup.userData.id = 799;
-uranusGroup.add(uranusMesh);
-
-export { uranusMesh, uranusGroup };

js/venus/venus.js

@@ -1,23 +0,0 @@
-import * as THREE from "three";
-
-const textL = new THREE.TextureLoader();
-
-const material = new THREE.MeshPhongMaterial({
-  map: textL.load("../../img/venus/venusmap.jpg"),
-  bumpMap: textL.load("../../img/venus/venusbump.jpg"),
-  bumpScale: 0.2,
-});
-
-const venusMesh = new THREE.Mesh(
-  new THREE.SphereGeometry(6051.8 / 6000, 30, 30),
-  material
-);
-
-venusMesh.name = "venusMesh";
-
-const venusGroup = new THREE.Group();
-venusGroup.name = "venusGroup";
-venusGroup.userData.id = 299;
-venusGroup.add(venusMesh);
-
-export { venusMesh, venusGroup };

ring.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 512 512" xml:space="preserve">
-<g>
-	<g>
-		<path d="M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,486.4
-			C128.751,486.4,25.6,383.249,25.6,256S128.751,25.6,256,25.6S486.4,128.751,486.4,256S383.249,486.4,256,486.4z"/>
-	</g>
-</g>
-</svg>

src/App.css

@@ -11,3 +11,138 @@ body,
   margin: 0;
   padding: 0;
 }
+
+.overlay .wrapper {
+  transform: translate3d(-10px, -10px, 0);
+  position: absolute;
+  cursor: pointer;
+}
+
+canvas {
+  background-color: black;
+}
+
+.overlay .wrapper .content {
+  position: absolute;
+  color: rgb(254, 254, 254);
+  font-size: 1.05em;
+  font-family: Arial, Helvetica, sans-serif;
+  user-select: none;
+  background-size: contain;
+}
+
+.overlay .wrapper .icon {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.planetInfo {
+  z-index: 12;
+  position: absolute;
+  height: 100%;
+  transition: opacity 0.5s;
+}
+
+.slidecontainer {
+  text-align: center;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  z-index: 12;
+  top: 90%;
+  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;
+  position: absolute;
+  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: 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 {
+  color: white;
+  padding: 2px;
+  margin-left: 3%;
+}
+
+.date {
+  position:absolute;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  bottom:3%;
+  width: 100%;
+}
+
+.dateSpan {
+  
+  font-size: 1.4em;
+}
+

src/App.jsx

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import App from "./main";
+import App from "./Main";
 import "../src/App.css";
 
 const container = document.getElementById("root");

src/CameraControls.jsx

@@ -1,115 +0,0 @@
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import { OrbitControls, PositionPoint } from "@react-three/drei";
-import React, {
-  Suspense,
-  useRef,
-  createContext,
-  memo,
-  useState,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-} from "react";
-import * as THREE from "three";
-
-import { ScreenOverlay } from "./omnioverlay.jsx";
-import { SharedPlanetState } from "./SharedPlanetState.jsx";
-import { Skybox } from "./skybox.jsx";
-import { MyContext } from "./Scene3.jsx";
-
-export const CameraController = () => {
-  const { customData } = useContext(MyContext);
-  const [distance, setDistance] = useState(5);
-  const [lookAt, setLookAt] = useState(new THREE.Vector3(0, 0, 0));
-  const [position, setPosition] = useState(new THREE.Vector3(0, 0, 200));
-  const [animate, setAnimate] = useState(false);
-  const { camera } = useThree();
-  const [currObj, setCurrObj] = useState(undefined);
-  const mycam = useRef();
-  const cameraGroupRef = useRef();
-  const set = useThree(({ set }) => set);
-  const size = useThree(({ size }) => size);
-
-  useLayoutEffect(() => {
-    if (mycam.current) {
-      mycam.current.aspect = size.width / size.height;
-      mycam.current.updateProjectionMatrix();
-    }
-  }, [size]);
-
-  const handleLookAt = (pos) => {
-    setLookAt(pos);
-  };
-  customData.current["handleLookAt"] = handleLookAt;
-
-  const handleDistance = (obj) => {
-    setDistance(obj.children[1].geometry.boundingSphere.radius * 1.5);
-  };
-
-  const handlePosition = (pos, obj) => {
-    mycam.current.updateMatrixWorld();
-    const newPosition = pos
-      .clone()
-      .add(
-        new THREE.Vector3(
-          0,
-          0,
-          obj.children[1].geometry.boundingSphere.radius * 2.5
-        )
-      );
-
-    setCurrObj(obj);
-    setPosition(newPosition);
-    setAnimate(true);
-    //console.log(newPosition);
-  };
-  customData.current["handlePosition"] = handlePosition;
-
-  useFrame(() => {
-    console.log(mycam);
-    let rp = undefined;
-    cameraGroupRef.current.position.set(new THREE.Vector3(0, 0, 200));
-    //camera.updateProjectionMatrix();
-    if (currObj) {
-      rp = currObj.position
-        .clone()
-        .add(
-          new THREE.Vector3(
-            0,
-            0,
-            currObj.children[1].geometry.boundingSphere.radius * 2.5
-          )
-        );
-    }
-    //console.log(state);
-
-    if (animate && currObj) {
-      //update relative position
-
-      setPosition();
-      camera.position.lerp(rp, 0.02);
-      camera.lookAt(lookAt);
-
-      //console.log(currObj);
-      if (camera.position.distanceTo(rp) < 0.1) {
-        //camera.quaternion.slerp(currObj.quaternion, 0.2);
-        setAnimate(false);
-      }
-    }
-    //cameraRef.current.position.addScalar(2);
-    //camera.position.addScalar(1);
-    //console.log(camera);
-  });
-  return (
-    <group ref={cameraGroupRef}>
-      <perspectiveCamera
-        ref={mycam}
-        position={[0, 0, 100]}
-        fov={75}
-        aspect={window.innerWidth / window.innerHeight}
-        near={0.1}
-        far={1000}
-      />
-    </group>
-  );
-};

src/CustomCamera.jsx

@@ -17,55 +17,68 @@ import React, {
 } from "react";
 import * as THREE from "three";
 
-import { ScreenOverlay } from "./omnioverlay.jsx";
+import { MyContext } from "./SolarSystemMain.jsx";
-import { SharedPlanetState } from "./SharedPlanetState.jsx";
-import { Skybox } from "./skybox.jsx";
-import { MyContext } from "./Scene3.jsx";
 
 export function CustomCamera(props) {
   const { customData } = useContext(MyContext);
-  const [lookAt, setLookAt] = useState(new THREE.Vector3(0, 0, 0));
-  const [position, setPosition] = useState(new THREE.Vector3(0, 0, 200));
   const [animate, setAnimate] = useState(false);
+  const [zoom, setZoom] = useState(true);
+  const [pos, setPos] =useState();
   const mouseDown = useRef(false);
   const mouseUp = useRef(false);
+  const dist = useRef(60);
   let _mouseStart = useRef(new THREE.Vector2(0, 0));
   let _mouseEnd = useRef(new THREE.Vector2(0, 0));
   let distance = useRef(200);
+  const [globalQuaternion, setGlobalQuaternion] = useState(
+    new THREE.Quaternion()
+  );
 
   const [currObj, setCurrObj] = useState(undefined);
   let rotate = useRef(true);
 
   const handleMouseWheel = (event) => {
     const delta = Math.sign(event.deltaY);
-    console.log(delta)
     handleZoom(delta);
   };
 
   const handleMouseMove = (event) => {
     if (mouseDown.current && rotate.current) {
       _mouseEnd.current = new THREE.Vector2(event.clientX, event.clientY);
-      const deltaX = event.movementX;
+      const deltaX = -event.movementX;
-      const deltaY = event.movementY;
+      const deltaY = -event.movementY;
 
       const rotationSpeed = 0.005;
 
       // Create quaternions for rotation around X and Y axes
       const quaternionX = new THREE.Quaternion().setFromAxisAngle(
         new THREE.Vector3(1, 0, 0),
-        deltaY * rotationSpeed
+        deltaY * 0.01
       );
       const quaternionY = new THREE.Quaternion().setFromAxisAngle(
         new THREE.Vector3(0, 1, 0),
         deltaX * rotationSpeed
       );
 
+      const quaternionZ = new THREE.Quaternion().setFromAxisAngle(
+        new THREE.Vector3(0, 0, 1),
+        0
+      );
+
       // Combine the quaternions
-      const deltaQuaternion = quaternionY.multiply(quaternionX);
+      const deltaQuaternion = quaternionY
+        .multiply(quaternionX)
+        .multiply(quaternionZ);
 
       // Apply the rotation to the camera quaternion
-      if (camGroup.current.quaternion)
+      if (camGroup && camGroup.current.quaternion) {
-        camGroup.current.quaternion.multiply(deltaQuaternion);
+        const finalQuaternion = camGroup.current.quaternion.clone();
+        finalQuaternion.multiply(deltaQuaternion);
+
+        const slerpSpeed = 0.3; // Adjust this value to control the smoothness
+
+        camGroup.current.quaternion.slerp(finalQuaternion, slerpSpeed);
+      }
     }
   };
 
@@ -80,11 +93,6 @@ export function CustomCamera(props) {
     mouseUp.current = true;
   };
 
-  const handleLookAt = (pos) => {
-    setLookAt(pos);
-  };
-  customData.current["handleLookAt"] = handleLookAt;
-
   const handleZoom = (delta) => {
     let zoomSpeed = 0.03;
     if (camGroup && cameraRef) {
@@ -92,24 +100,21 @@ export function CustomCamera(props) {
         camGroup.current.position
       );
     }
-
-    console.log(currObj)
-
     function newDistance(prevDistance) {
       const newDistance = prevDistance + delta * zoomSpeed;
-      return Math.max(0, newDistance); // Adjust the minimum distance as needed
+      return Math.max(dist.current, newDistance); // Adjust the minimum distance as needed
     }
     distance.current = newDistance(distance.current);
-    console.log("asdasd")
-    //console.log(distance);
   };
   customData.current["handleZoom"] = handleZoom;
 
   const handlePosition = (pos, obj) => {
-    if (currObj) currObj.remove(camGroup.current);
+    if (currObj) {
+      currObj.remove(camGroup.current);
+      setGlobalQuaternion(new THREE.Quaternion());
+    }
 
     setCurrObj(obj);
-
     setAnimate(true);
   };
   customData.current["handlePosition"] = handlePosition;
@@ -123,8 +128,9 @@ export function CustomCamera(props) {
     if (cameraRef.current) {
       cameraRef.current.aspect = size.width / size.height;
       cameraRef.current.updateProjectionMatrix();
+      setPos(camGroup.current.position);
     }
-    cameraRef.current.position.copy(new THREE.Vector3(0, 0, 400));
+    //cameraRef.current.position.copy(new THREE.Vector3(0, 0, 400));
     window.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("mouseup", handleMouseUp);
     window.addEventListener("mousemove", handleMouseMove);
@@ -137,12 +143,29 @@ export function CustomCamera(props) {
 
   let lerpedilerp = useRef(0.01);
 
+  function easeIn(t){
+    return t*t;
+  }
+
+  function myLerp(v3Start, v3End, t){
+    return new THREE.Vector3(
+      v3Start.x + (v3End.x - v3Start.x)*t,
+      v3Start.y + (v3End.y - v3Start.y)*t,
+      v3Start.z + (v3End.z - v3Start.z)*t
+    )
+  }
+
   useFrame(({ clock }) => {
     cameraRef.current.updateProjectionMatrix();
 
     if (animate && currObj) {
+      setZoom(false);
       distance.current =
         currObj.children[1].geometry.boundingSphere.radius * 2.5;
+      dist.current = currObj.children[1].geometry.boundingSphere.radius * 2.5;
+      //camGroup.current.position.lerp(currObj.position,lerpedilerp.current);
+      //camGroup.current.position.copy(myLerp(pos, currObj.position, 0.5));
+
       camGroup.current.position.lerp(currObj.position, lerpedilerp.current);
       cameraRef.current.position.lerp(
         new THREE.Vector3(
@@ -153,31 +176,32 @@ export function CustomCamera(props) {
         lerpedilerp.current
       );
 
+     
+
       cameraRef.current.lookAt(currObj.position);
+      camGroup.current.quaternion.copy(globalQuaternion);
 
       rotate.current = false;
-      lerpedilerp.current *= 1.1;
+      lerpedilerp.current *= 1.08;
       //console.log(camGroup.current.position.distanceTo(currObj.position));
 
-      if (camGroup.current.position.distanceTo(currObj.position) < 0.2) {
+      if (camGroup.current.position.distanceTo(currObj.position) < 0.3) {
         currObj.add(camGroup.current);
         camGroup.current.position.copy(new THREE.Vector3(0, 0, 0), 0.2);
+
         rotate.current = true;
+        lerpedilerp.current = 0.01;
+        setZoom(true);
         setAnimate(false);
       }
     }
     if (rotate.current && currObj) {
-      /*       cameraRef.current.quaternion.multiply(lastQ.current); */
+      
-      //camGroup.current.rotation.x += 0.005;
+    }
-      lerpedilerp.current = 0.01;
+    if (zoom && cameraRef.current) {
-      if (
+      cameraRef.current.position.copy(
-        distance.current >
+        new THREE.Vector3(0, 0, distance.current)
-        currObj.children[1].geometry.boundingSphere.radius * 2.5
+      );
-      ) {
-        cameraRef.current.position.copy(
-          new THREE.Vector3(0, 0, distance.current)
-        );
-      }
     }
   });
 
@@ -188,7 +212,7 @@ export function CustomCamera(props) {
         position={[0, 0, 0]}
         fov={75}
         near={0.1}
-        far={10000}
+        far={1000000}
       />
     </group>
   );

src/Main.jsx

@@ -0,0 +1,14 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import SolarSystemScene from "./SolarSystemMain";
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<SolarSystemScene />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default App;

src/Scene1.jsx

@@ -1,160 +0,0 @@
-import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
-import { shaderMaterial } from "@react-three/drei";
-import React, { useRef, Suspense } from "react";
-import * as THREE from "three";
-import glsl from "glslify";
-
-const WaveShaderMaterial = shaderMaterial(
-  //Uniform
-  {
-    uTime: 0,
-    uColor: new THREE.Color(0.0, 0.0, 0.0),
-  },
-  //Vertex Shader
-  glsl`
-  precision mediump float;
-
-  uniform float uTime;
-
-  varying vec2 vUv;
-
-  vec3 mod289(vec3 x) {
-    return x - floor(x * (1.0 / 289.0)) * 289.0;
-  }
-  
-  vec4 mod289(vec4 x) {
-    return x - floor(x * (1.0 / 289.0)) * 289.0;
-  }
-  
-  vec4 permute(vec4 x) {
-       return mod289(((x*34.0)+10.0)*x);
-  }
-  
-  vec4 taylorInvSqrt(vec4 r)
-  {
-    return 1.79284291400159 - 0.85373472095314 * r;
-  }
-  
-  float snoise(vec3 v)
-    { 
-    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
-    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
-  
-  // First corner
-    vec3 i  = floor(v + dot(v, C.yyy) );
-    vec3 x0 =   v - i + dot(i, C.xxx) ;
-  
-  // Other corners
-    vec3 g = step(x0.yzx, x0.xyz);
-    vec3 l = 1.0 - g;
-    vec3 i1 = min( g.xyz, l.zxy );
-    vec3 i2 = max( g.xyz, l.zxy );
-  
-    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
-    //   x1 = x0 - i1  + 1.0 * C.xxx;
-    //   x2 = x0 - i2  + 2.0 * C.xxx;
-    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
-    vec3 x1 = x0 - i1 + C.xxx;
-    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
-    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
-  
-  // Permutations
-    i = mod289(i); 
-    vec4 p = permute( permute( permute( 
-               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
-             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
-             + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
-  
-  // Gradients: 7x7 points over a square, mapped onto an octahedron.
-  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
-    float n_ = 0.142857142857; // 1.0/7.0
-    vec3  ns = n_ * D.wyz - D.xzx;
-  
-    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
-  
-    vec4 x_ = floor(j * ns.z);
-    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
-  
-    vec4 x = x_ *ns.x + ns.yyyy;
-    vec4 y = y_ *ns.x + ns.yyyy;
-    vec4 h = 1.0 - abs(x) - abs(y);
-  
-    vec4 b0 = vec4( x.xy, y.xy );
-    vec4 b1 = vec4( x.zw, y.zw );
-  
-    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
-    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
-    vec4 s0 = floor(b0)*2.0 + 1.0;
-    vec4 s1 = floor(b1)*2.0 + 1.0;
-    vec4 sh = -step(h, vec4(0.0));
-  
-    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
-    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
-  
-    vec3 p0 = vec3(a0.xy,h.x);
-    vec3 p1 = vec3(a0.zw,h.y);
-    vec3 p2 = vec3(a1.xy,h.z);
-    vec3 p3 = vec3(a1.zw,h.w);
-  
-  //Normalise gradients
-    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
-    p0 *= norm.x;
-    p1 *= norm.y;
-    p2 *= norm.z;
-    p3 *= norm.w;
-  
-  // Mix final noise value
-    vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
-    m = m * m;
-    return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
-                                  dot(p2,x2), dot(p3,x3) ) );
-    }
-
-  void main(){
-    vUv = uv;
-
-    vec3 pos = position;
-    float noiseFreq = 0.25;
-    float noiseAmp = 0.25;
-    vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
-    pos.z += snoise(noisePos) * noiseAmp;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
-  }`,
-  //Fragment Shader
-  glsl`
-  precision mediump float;
-
-  uniform vec3 uColor;
-  uniform float uTime;
-
-  varying vec2 vUv;
-
-  void main(){
-    gl_FragColor = vec4(cos(vUv.x - uTime*2.0) * uColor, 1.0);
-  }`
-);
-
-extend({ WaveShaderMaterial });
-
-const Wave = () => {
-  const ref = useRef();
-  useFrame(({ clock }) => (ref.current.uTime = clock.getElapsedTime()));
-  return (
-    <mesh>
-      <planeGeometry args={[0.4, 0.6, 16, 16]} />
-      <waveShaderMaterial uColor={"lightblue"} ref={ref} />
-    </mesh>
-  );
-};
-
-const Scene = () => {
-  return (
-    <Canvas camera={{ fov: 10 }}>
-      <Suspense fallback={null}>
-        <Wave />
-      </Suspense>
-    </Canvas>
-  );
-};
-
-export default Scene;

src/Scene2.jsx

@@ -1,160 +0,0 @@
-import { Canvas, extend, useFrame } from "@react-three/fiber";
-import { shaderMaterial } from "@react-three/drei";
-import React, { useRef, Suspense } from "react";
-import * as THREE from "three";
-import glsl from "glslify";
-
-const WaveShaderMaterial = shaderMaterial(
-  //Uniform
-  {
-    uTime: 0,
-    uColor: new THREE.Color(0.0, 0.0, 0.0),
-  },
-  //Vertex Shader
-  glsl`
-  precision mediump float;
-
-  uniform float uTime;
-
-  varying vec2 vUv;
-
-  vec3 mod289(vec3 x) {
-    return x - floor(x * (1.0 / 289.0)) * 289.0;
-  }
-  
-  vec4 mod289(vec4 x) {
-    return x - floor(x * (1.0 / 289.0)) * 289.0;
-  }
-  
-  vec4 permute(vec4 x) {
-       return mod289(((x*34.0)+10.0)*x);
-  }
-  
-  vec4 taylorInvSqrt(vec4 r)
-  {
-    return 1.79284291400159 - 0.85373472095314 * r;
-  }
-  
-  float snoise(vec3 v)
-    { 
-    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
-    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
-  
-  // First corner
-    vec3 i  = floor(v + dot(v, C.yyy) );
-    vec3 x0 =   v - i + dot(i, C.xxx) ;
-  
-  // Other corners
-    vec3 g = step(x0.yzx, x0.xyz);
-    vec3 l = 1.0 - g;
-    vec3 i1 = min( g.xyz, l.zxy );
-    vec3 i2 = max( g.xyz, l.zxy );
-  
-    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
-    //   x1 = x0 - i1  + 1.0 * C.xxx;
-    //   x2 = x0 - i2  + 2.0 * C.xxx;
-    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
-    vec3 x1 = x0 - i1 + C.xxx;
-    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
-    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
-  
-  // Permutations
-    i = mod289(i); 
-    vec4 p = permute( permute( permute( 
-               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
-             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
-             + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
-  
-  // Gradients: 7x7 points over a square, mapped onto an octahedron.
-  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
-    float n_ = 0.142857142857; // 1.0/7.0
-    vec3  ns = n_ * D.wyz - D.xzx;
-  
-    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
-  
-    vec4 x_ = floor(j * ns.z);
-    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
-  
-    vec4 x = x_ *ns.x + ns.yyyy;
-    vec4 y = y_ *ns.x + ns.yyyy;
-    vec4 h = 1.0 - abs(x) - abs(y);
-  
-    vec4 b0 = vec4( x.xy, y.xy );
-    vec4 b1 = vec4( x.zw, y.zw );
-  
-    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
-    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
-    vec4 s0 = floor(b0)*2.0 + 1.0;
-    vec4 s1 = floor(b1)*2.0 + 1.0;
-    vec4 sh = -step(h, vec4(0.0));
-  
-    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
-    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
-  
-    vec3 p0 = vec3(a0.xy,h.x);
-    vec3 p1 = vec3(a0.zw,h.y);
-    vec3 p2 = vec3(a1.xy,h.z);
-    vec3 p3 = vec3(a1.zw,h.w);
-  
-  //Normalise gradients
-    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
-    p0 *= norm.x;
-    p1 *= norm.y;
-    p2 *= norm.z;
-    p3 *= norm.w;
-  
-  // Mix final noise value
-    vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
-    m = m * m;
-    return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
-                                  dot(p2,x2), dot(p3,x3) ) );
-    }
-
-  void main(){
-    vUv = uv;
-
-    vec3 pos = position;
-    float noiseFreq = 0.25;
-    float noiseAmp = 0.25;
-    vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
-    pos.z += snoise(noisePos) * noiseAmp;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
-  }`,
-  //Fragment Shader
-  glsl`
-  precision mediump float;
-
-  uniform vec3 uColor;
-  uniform float uTime;
-
-  varying vec2 vUv;
-
-  void main(){
-    gl_FragColor = vec4(cos(vUv.x + uTime*2.0) * uColor, 1.0);
-  }`
-);
-
-extend({ WaveShaderMaterial });
-
-const Wave = () => {
-  const ref = useRef();
-  useFrame(({ clock }) => (ref.current.uTime = clock.getElapsedTime()));
-  return (
-    <mesh>
-      <planeGeometry args={[0.4, 0.6, 16, 16]} />
-      <waveShaderMaterial uColor={"red"} ref={ref} />
-    </mesh>
-  );
-};
-
-const Scene1 = () => {
-  return (
-    <Canvas camera={{ fov: 10 }}>
-      <Suspense fallback={null}>
-        <Wave />
-      </Suspense>
-    </Canvas>
-  );
-};
-
-export default Scene1;

src/Scene4.jsx

@@ -1,109 +0,0 @@
-import {
-    Canvas,
-    extend,
-    useFrame,
-    useLoader,
-    useThree,
-  } from "@react-three/fiber";
-  import {
-    OrbitControls,
-  } from "@react-three/drei";
-  import React, { useRef, Suspense, useLayoutEffect, useState, useEffect } from "react";
-  import * as THREE from "three";
-  import glsl from "glslify";
-
-  import { TextureLoader } from "three/src/loaders/TextureLoader";
-
-  const Planet = ({planetData}) => {
-    
-    const [ready, setReady] = useState(false);
-
-
-
-    const colorMap = useLoader(TextureLoader, planetData.colorMap); 
-
-    useLayoutEffect(() => {
-        console.log(planetData.colorMap)
-        //get props
-
-        //setup mesh
-
-        //load textures
-
-        //set ready to true
-    })
-
-    useThree(() => {
-
-    })
-
-    return (
-        <mesh>
-            <sphereGeometry args={[planetData.Radius / 6000, 100, 100]}/>
-            <meshPhongMaterial
-              map={colorMap}
-            />
-        </mesh>
-        
-    )
-
-  }
- 
-  
-  const PlanetScene = () => {
-    const [planetData, setPlanetData] = useState( {});
-    const [planetDataReady, setPlanetDataReady] = useState(false)
-    useLayoutEffect(() => {
-        //get planet data
-        const fetchPlanetInfo = async () => {
-            fetch(`http://127.0.0.1:8000/planetInfo/Earth`).then((response) => {
-              if (!response.ok) {
-                throw new Error(
-                  `This is an HTTP error: The status is ${response.status}`
-                );
-              }
-              //setLoading(true);
-              response
-                .json()
-                .then((data) => {
-                    fetch(`http://127.0.0.1:8000/planetData/Earth`).then((response) => {
-              if (!response.ok) {
-                throw new Error(
-                  `This is an HTTP error: The status is ${response.status}`
-                );
-              }
-              //setLoading(true);
-              response
-                .json()
-                .then((data2) => {
-                    setPlanetData(Object.assign(data, data2));
-                })
-                .catch((err) => {
-                    console.log(err)
-                }).finally(() => {
-                  setPlanetDataReady(true);
-                })
-            });
-                })
-                .catch((err) => {
-                    console.log(err)
-                })
-            });
-            
-          };
-          fetchPlanetInfo();
-    }, []);
-    return (
-      <Canvas style={{ backgroundColor: "white" }}>
-        <Suspense fallback={null}>
-          {planetDataReady?<Planet planetData = {planetData}/>:undefined}
-          <OrbitControls enablePan={false} />
-          <ambientLight intensity={0.5} />
-        </Suspense>
-      </Canvas>
-    );
-  };
-
-  
-  export default PlanetScene;
-  

src/SharedPlanetState.jsx

@@ -1,80 +1,71 @@
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useFrame } from "@react-three/fiber";
-import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
+import { Html } from "@react-three/drei";
-import React, {
+import { useState, useRef, createContext, useContext } from "react";
-  Suspense,
-  useState,
-  useEffect,
-  useRef,
-  createContext,
-  useContext,
-  forwardRef,
-  memo,
-  useMemo,
-} from "react";
-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 { MyContext } from "./SolarSystemMain.jsx";
-import { Skybox } from "./skybox.jsx";
+import Planet from "./planets/planet.jsx";
-import { ReactPropTypes } from "react";
+import Sun from "./planets/sun.jsx";
-import { MyContext } from "./Scene3.jsx";
+import PropTypes from "prop-types";
 
 export const PlanetOverlayContext = createContext();
 
-import { Planet } from "./planet.jsx";
+export const SharedPlanetState = ({ planetData, linePos }) => {
-
-export const SharedPlanetState = ({ initialData }) => {
   const distanceScaleFactor = 1000000;
   const { customData } = useContext(MyContext);
 
-  const lastGetRequestRef = useRef(0);
+  const [loading, setLoading] = useState(true);
-  const currentPosIndexRef = useRef(0);
+  const [positions, setPositions] = useState(null);
-  const getNewDataThresholdRef = 5000;
+  const [realPos, setRealPos] = useState(null);
-  const currentSpeedRef = useRef(0);
+  let first = useRef(true);
+
   const planetPositionIndex = useRef(0);
+  const lastPositionUpdate = useRef(0);
+  const lastRealPositionUpdate = useRef(0);
 
   let [nameVis, setNameVis] = useState("visible");
   let [iconVis, setIconVis] = useState("visible");
+  let [pathVis, setPathVis] = useState("visible");
 
   const handleVisibility = () => {
-    if (nameVis == "visible" && iconVis == "visible") {
+    if (nameVis == "visible" && iconVis == "visible" && pathVis == "visible") {
       setNameVis("hidden");
-    } else if (nameVis == "hidden" && iconVis == "visible") {
+    } else if (nameVis == "hidden" && iconVis == "visible" && pathVis == "visible") {
       setIconVis("hidden");
-    } else if (nameVis == "hidden" && iconVis == "hidden") {
+    } else if (nameVis == "hidden" && iconVis == "hidden" && pathVis == "visible") {
+      setPathVis("hidden")
+    } else if(nameVis == "hidden" && iconVis == "hidden" && pathVis == "hidden"){
       setIconVis("visible");
       setNameVis("visible");
+      setPathVis("visible")
     }
   };
   customData.current["handleVisibility"] = handleVisibility;
 
   const handleReset = () => {
     setSpeed(-1);
+    console.log("reset");
+    planetPositionIndex.current = 0;
+    lastRealPositionUpdate.current = 0;
+    getRealTimePos();
   };
   customData.current["handleReset"] = handleReset;
 
   //set speed (timeinterval between positions 60000ms*speed)
-  const [speed, setSpeed] = useState(1);
+  const [speed, setSpeed] = useState(-1);
   const updateSpeed = (newSpeed) => {
     setSpeed(newSpeed);
-    setSpeedChanged(true);
-    console.log(speed);
   };
   customData.current["updateSpeed"] = updateSpeed;
 
   //get position data and reset if necessary
   const dateTime = useRef(new Date(Date.now()));
-  const [speedChanged, setSpeedChanged] = useState();
 
-  function updatePlanetPosition(group, posArr, lineArr) {
+  function updatePlanetPosition(group, posArr, lineArr, realPos) {
-    if (true && planetPositionIndex.current < posArr.length) {
+    if (
+      !loading &&
+      planetPositionIndex.current < posArr.length &&
+      speed != -1
+    ) {
       group.current.position.set(
         Number(
           posArr[planetPositionIndex.current].position.x / distanceScaleFactor
@@ -86,191 +77,154 @@ export const SharedPlanetState = ({ initialData }) => {
           posArr[planetPositionIndex.current].position.z / distanceScaleFactor
         )
       );
-      if (speed > 0) planetPositionIndex.current += Number(speed);
+
-      lineArr.current.push(
+      //realtime
-        new THREE.Vector3(
+
-          Number(
+      customData.current.setDate(
-            posArr[planetPositionIndex.current].position.x / distanceScaleFactor
+        new Date(positions[199][planetPositionIndex.current].date)
-          ),
+      );
-          Number(
+      if (speed > 0) {
-            posArr[planetPositionIndex.current].position.y / distanceScaleFactor
+        lineArr.current.push(
-          ),
+          new THREE.Vector3(
-          Number(
+            Number(
-            posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+              posArr[planetPositionIndex.current].position.x /
+                distanceScaleFactor
+            ),
+            Number(
+              posArr[planetPositionIndex.current].position.y /
+                distanceScaleFactor
+            ),
+            Number(
+              posArr[planetPositionIndex.current].position.z /
+                distanceScaleFactor
+            )
           )
-        )
+        );
+      }
+    }
+    //realtime
+    if (speed == -1) {
+      group.current.position.set(
+        Number(realPos.position.x / distanceScaleFactor),
+        Number(realPos.position.y / distanceScaleFactor),
+        Number(realPos.position.z / distanceScaleFactor)
+      );
+      customData.current.setDate(
+        new Date(realPos.date)
       );
     }
   }
 
-  const getPositions = (planet, setPosState, oldState) => {
+  useFrame(({ clock }) => {
-    //if speed was changed delete old data an get new data
+    if (first.current) {
+      getAllPositions();
+      getRealTimePos();
+      first.current = false;
+    }
+    if (speed > 0 && !loading) planetPositionIndex.current += Number(speed);
+    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
+    const timeSinceLastRealUpdate = clock.elapsedTime - lastRealPositionUpdate.current;
+    if(timeSinceLastRealUpdate > 60) {
+      lastRealPositionUpdate.current = clock.elapsedTime;
+      getRealTimePos()
+    }
+    if (timeSinceLastUpdate >= 1 && !loading && speed > 0) {
+      
+      getAllPositions();
+      lastPositionUpdate.current = clock.elapsedTime;
+    }
+  });
 
-    //???????Why when i set the speed to 0 it doesnt immidiatly stop? good enough for know
+  const getAllPositions = () => {
-    /*    if (speedChanged) {
+    if (positions && positions[199].length > 0 && speed > 0) {
-      //console.log(oldState.length);
+      dateTime.current = new Date(
-      //console.log(posCounter);
+        positions[199][positions[199].length - 1].date
-      setPosState(oldState.slice(0, 500));
+      ).toUTCString();
-
-      //console.log("here" + speedChanged);
-    } */
-
-    if (oldState.length - planetPositionIndex.current < 15000) {
-      //console.log("there" + speedChanged);
-      setSpeedChanged(false);
-      if (oldState.length > 0 && speed > 0) {
-        dateTime.current = new Date(
-          oldState[oldState.length - 1].date
-        ).toUTCString();
-      }
-
-      const fetchData = async () => {
-        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}`
-            );
-          }
-          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) => {
+      fetch(
+        `http://127.0.0.1:8000/duration` + `?date=${dateTime.current}`
+      ).then((response) => {
         if (!response.ok) {
           throw new Error(
             `This is an HTTP error: The status is ${response.status}`
           );
         }
-        loadingRef.current = true;
         response
           .json()
           .then((data) => {
-            setData(data);
+            if (!positions) {
-            dataRef.current = data;
+              setPositions(data);
-            errRef.current = null;
+            } else {
-          })
+              let obj = new Object();
-          .catch((err) => {
+              for (let key in positions) {
-            setData(null);
+                obj[key] = positions[key].concat(data[key]);
-            dataRef.current = null;
+              }
-            errRef.current = err.message;
+              setPositions(obj);
+            }
           })
+          .catch(() => {})
           .finally(() => {
-            loadingRef.current = false;
+            setLoading(false);
           });
       });
     };
-    const timeSinceLastUpdate = clock.elapsedTime - lastGetRequestRef.current;
+    fetchData();
-    if (timeSinceLastUpdate >= 5) {
+  };
-      fetchData();
-      console.log(dataRef.current);
-      lastGetRequestRef.current = clock.elapsedTime;
-    } */
-  });
 
-  function handlePositionIndex() {
+  const getRealTimePos = () => {
-    currentPosIndexRef.current++;
+    const fetchData = async () => {
+      fetch(`http://127.0.0.1:8000/now`).then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `This is an HTTP error: The status is ${response.status}`
+          );
+        }
+        response
+          .json()
+          .then((data) => {
+            setRealPos(data);
+          })
+          .catch(() => {})
+          .finally(() => {
+            //setLoading(false);
+          });
+      });
+    };
+    fetchData();
+  };
+
+  const planets = [];
+  for (let planet of planetData) {
+    planets.push(
+      <Planet
+        key={planet._id}
+        planetData={planet}
+        setPosition={updatePlanetPosition}
+        positions={positions && positions[planet._id]}
+        realPos={realPos && realPos[planet._id]}
+        linePos={linePos && linePos[planet._id]}
+      />
+    );
   }
 
   return (
     <>
-      <PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
+      <PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed, pathVis }}>
-        {initialData && (
+        {!loading && planets}
-          <>
+        {loading && (
-            <Earth
+          <Html>
-              speed={speed}
+            <h1 style={{color:"white"}}>Loading...</h1>
-              getPosition={getPositions}
+          </Html>
-              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}
-            />
-            <Sun />
-          </>
-        )}
-        {false && (
-          <Planet
-            posArr={data["199"]}
-            planetPosIndex={currentPosIndexRef}
-            speed={speed}
-          />
         )}
+        <Sun />
       </PlanetOverlayContext.Provider>
     </>
   );
 };
+
+SharedPlanetState.propTypes = {
+  planetData: PropTypes.array,
+  linePos: PropTypes.object
+};

src/SolarSystemMain.jsx

@@ -1,29 +1,26 @@
 import { Canvas } from "@react-three/fiber";
-import React, {
+import {
   Suspense,
   useRef,
   createContext,
-  memo,
   useLayoutEffect,
   useState,
   useEffect,
 } from "react";
 
-import { ScreenOverlay } from "./omnioverlay.jsx";
+import { ScreenOverlay } from "./planets/omnioverlay.jsx";
 import { SharedPlanetState } from "./SharedPlanetState.jsx";
-import { Skybox } from "./skybox.jsx";
+import { Skybox } from "./Skybox.jsx";
-import { CustomCamera } from "./customCamera.jsx";
+import { CustomCamera } from "./CustomCamera.jsx";
 
 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 [loading, setLoading] = useState(true);
-  //const { progress } = useProgress();
+  const [linePos, setLinePos] = useState(null);
 
   useLayoutEffect(() => {
     const fetchPlanetInfo = async () => {
@@ -33,31 +30,23 @@ const SolarSystemScene = () => {
             `This is an HTTP error: The status is ${response.status}`
           );
         }
-        //setLoading(true);
+        setLoading(true);
         response
           .json()
           .then((data) => {
             setPinfo(data);
-            setErr(null);
           })
-          .catch((err) => {
+          .catch(() => {
             setPinfo(null);
-            setErr(err.message);
           })
           .finally(() => {
-            //setLoading(false);
+            setLoading(false);
           });
       });
     };
     fetchPlanetInfo();
-    const currDate = new Date(Date.now());
+    const fetchLinePos = async () => {
-    currDate.setSeconds(0);
+      fetch(`http://127.0.0.1:8000/duration/line`).then((response) => {
-    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}`
@@ -67,19 +56,19 @@ const SolarSystemScene = () => {
         response
           .json()
           .then((data) => {
-            setInitialData(data);
+            
-            setErr(null);
+            setLinePos(data);
           })
-          .catch((err) => {
+          .catch(() => {
-            setInitialData(null);
+            setLinePos(null)
-            setErr(err.message);
           })
           .finally(() => {
             setLoading(false);
           });
       });
     };
-    fetchData();
+    //fetchLinePos();
+    fetchPlanetInfo();
   }, []);
 
   useEffect(() => {
@@ -91,22 +80,22 @@ const SolarSystemScene = () => {
       {!loading && (
         <>
           <MyContext.Provider value={{ controls, customData }}>
-            {!loading && <ScreenOverlay planetInfo={pinfo} />}
+            <ScreenOverlay planetInfo={pinfo} />
 
-            {loading && <div className="loadingScreen">Loading</div>}
+            {true && (
-            {!loading && (
               <Canvas
-              /*camera={{
+                camera={{
-              position: [0, 0, 100],
+                  position: [0, 0, 100],
-              fov: 75,
+                  fov: 75,
-              near: 0.1,
+                  near: 0.1,
-              far: 1000,
+                  far: 10000000,
-            }}*/
+                }}
               >
-                <CustomCamera />
+                {true && <CustomCamera />}
                 <Skybox />
-                <ambientLight intensity={0.5} />
+                <ambientLight intensity={0.025} />
-                <SharedPlanetState initialData={initialData} />
+                <pointLight position={[0, 0, 0]} />
+                <SharedPlanetState planetData={pinfo} linePos={linePos}/>
               </Canvas>
             )}
           </MyContext.Provider>
@@ -116,6 +105,4 @@ const SolarSystemScene = () => {
   );
 };
 
-const Smemo = memo(SolarSystemScene, true);
+export default SolarSystemScene;
-
-export default Smemo;

src/main.jsx

@@ -1,24 +0,0 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Scene from "./Scene1";
-import Scene1 from "./Scene2";
-import Scene4 from "./Scene4"
-import SolarSystemScene from "./Scene3";
-import Smemo from "./Scene3";
-import React, { useEffect, useReducer, useState, useRef } from "react";
-import SunScene from "./sunscene";
-
-const App = () => {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Scene />} />
-        <Route path="next" element={<Scene1 />} />
-        <Route path="solarsystem" element={<Smemo />} />
-        <Route path="sun" element={<SunScene />} />
-        <Route path="planet" element={<Scene4 />} />
-      </Routes>
-    </BrowserRouter>
-  );
-};
-
-export default App;

src/path.jsx

@@ -1,99 +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 { useControls } from "leva";
-import * as THREE from "three";
-import glsl from "glslify";
-import { TextureLoader } from "three/src/loaders/TextureLoader";
-import { PlanetOverlay } from "./planetOverlay";
-import { PlanetOverlayContext } from "./SharedPlanetState";
-
-export const PlanetPath = ({
-  positions,
-  linePos,
-  color,
-  datas,
-  lineLength,
-  lineAt,
-  planet,
-}) => {
-  const lineref = useRef();
-  const { speed } = useContext(PlanetOverlayContext);
-
-  useLayoutEffect(() => {});
-
-  useEffect(() => {});
-
-  /* const cutPath = (path, maxLength) => {
-    if (getLength(path) > maxLength) {
-      path.shift();
-    }
-  };*/
-
-  //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 lineGeometry = new THREE.BufferGeometry();
-  useFrame(() => {
-    if (speed === 0) {
-      linePos.length = 0;
-      return;
-    }
-    lineref.current.geometry.setFromPoints(linePos);
-    lineref.current.geometry.setDrawRange(0, Infinity);
-    cutPath(linePos, lineLength);
-    //console.log(getLength(linePos));
-  });
-  return (
-    <>
-      <line ref={lineref} geometry={lineGeometry} frustumCulled={false}>
-        <lineBasicMaterial color={color} />
-      </line>
-    </>
-  );
-};

src/planet.jsx

@@ -1,165 +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 { PlanetInfo } from "./planetInfo";
-import { PlanetPath } from "./path";
-import { MyContext } from "./Scene3";
-import { PlanetOverlayContext } from "./SharedPlanetState";
-
-export const Planet = (props) => {
-  const distanceScaleFactor = 1000000;
-  //These are the props i need
-  let allPosArr = useRef([]);
-
-  let speed = props.speed;
-  const lineArr = useRef([]);
-  const line = useRef();
-  const clouds = useRef("clouds");
-  const earth = useRef();
-  const group = useRef();
-
-  //let planetPositionIndex = props.planetPosIndex;
-  let planetPositionIndex = useRef(0);
-
-  useLayoutEffect(() => {
-    group.current.userData.name = props.planetData.name;
-    group.current.userData.nearOvOp = props.planetData.nearOvOp;
-    group.current.userData.scolor = props.planetData.scolor;
-  });
-
-  useEffect(() => {
-    allPosArr.current = allPosArr.current.concat(props.posArr);
-  });
-
-  useFrame(() => {
-    //console.log(allPosArr.current.length);
-    //console.log("arrlength" + posArr.length);
-    clouds.current.rotation.y += 0.00025;
-    earth.current.rotation.y += 0.00015;
-
-    //if speed is 0 set the date to current date get from posArr
-    //search for current date in posArr and set planetPositionIndex
-
-    //if speed > 0 update positions
-    if (
-      true &&
-      planetPositionIndex.current < allPosArr.current.length &&
-      allPosArr.current.length > 0 &&
-      speed > 0
-    ) {
-      console.log("herer");
-      group.current.position.set(
-        Number(
-          allPosArr.current[planetPositionIndex.current].x / distanceScaleFactor
-        ),
-        Number(
-          allPosArr.current[planetPositionIndex.current].y / distanceScaleFactor
-        ),
-        Number(
-          allPosArr.current[planetPositionIndex.current].z / distanceScaleFactor
-        )
-      );
-      if (speed > 0) planetPositionIndex.current += Number(1);
-      lineArr.current.push(
-        new THREE.Vector3(
-          Number(
-            allPosArr.current[planetPositionIndex.current].x /
-              distanceScaleFactor
-          ),
-          Number(
-            allPosArr.current[planetPositionIndex.current].y /
-              distanceScaleFactor
-          ),
-          Number(
-            allPosArr.current[planetPositionIndex.current].z /
-              distanceScaleFactor
-          )
-        )
-      );
-    }
-  }, []);
-
-  const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
-  const bump = useLoader(TextureLoader, "../img/earth/earth_bump_1k.jpg");
-  const spec = useLoader(
-    TextureLoader,
-    "../img/earth/6k_earth_specular_map.jpg"
-  );
-  const norm = useLoader(TextureLoader, "../img/earth/6k_earth_normal_map.jpg");
-  const cloudMap = useLoader(TextureLoader, "../img/earth/6k_earth_clouds.jpg");
-  const axisPoints = [
-    new THREE.Vector3(0, 6371.0 / 6000 + 0.5, 0),
-    new THREE.Vector3(0, -(6371.0 / 6000 + 0.5), 0),
-  ];
-  useLayoutEffect(() => {
-    line.current.geometry.setFromPoints(axisPoints);
-  });
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        color={"lightgreen"}
-        lineLength={300}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={earth}>
-          <sphereGeometry args={[6371.0 / 6000, 50, 50]} />
-          <meshPhongMaterial
-            map={col}
-            bumpMap={bump}
-            specularMap={spec}
-            normalMap={norm}
-            bumpScale={0.2}
-            shininess={0.5}
-          />
-        </mesh>
-        <mesh ref={clouds}>
-          <sphereGeometry args={[6371.0 / 6000 + 0.01, 50, 50]} />
-          <meshPhongMaterial map={cloudMap} transparent={true} opacity={0.5} />
-        </mesh>
-        <line ref={line}>
-          <bufferGeometry />
-          <lineBasicMaterial
-            color={"hotpink"}
-            transparent={true}
-            opacity={0.5}
-            linewidth={2}
-          />
-        </line>
-      </group>
-    </>
-  );
-};

src/planetInfo.jsx

@@ -1,119 +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,
-  forwardRef,
-  memo,
-} from "react";
-import { useNavigate } from "react-router-dom";
-import * as THREE from "three";
-import { MyContext } from "./Scene3";
-import saturnImage from "./planet_overlay_img/saturn.jpg";
-
-import "./styles.css";
-
-import PropTypes from "prop-types";
-
-export const PlanetInfo = memo(
-  forwardRef(function PlanetInfo(props, ref) {
-    const navigate = useNavigate();
-    const [visibility, setVisibility] = useState("hidden");
-    const { customData } = useContext(MyContext);
-    const [planetData, setPlanetData] = useState({ name: "Default" });
-
-    function getPlanetDataAtName() {}
-
-    useEffect(() => {
-      console.log(props.planetInfo);
-      const showInfo = (planet) => {
-        props.planetInfo.forEach((oplanet) => {
-          if (planet.name == oplanet.name) {
-            setPlanetData(oplanet);
-          }
-        });
-        //if (planet && planet.name) setPlanetData({ name: planet.name });
-        console.log(planetData);
-        setVisibility("visible");
-      };
-      if (showInfo) customData.current["showInfo"] = showInfo;
-    }, [customData, planetData]);
-
-    const someEventHandler = () => {
-      navigate("/");
-    };
-
-    function closeInfo() {
-      setVisibility("hidden");
-    }
-
-    return (
-      <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>{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>
-    );
-  })
-);
-
-PlanetInfo.propTypes = {
-  planet: PropTypes.object,
-};

src/planets/earth.jsx

@@ -1,112 +0,0 @@
-import { useFrame, useLoader } from "@react-three/fiber";
-import React, { useRef, useLayoutEffect, useState, useEffect } 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";
-
-export const Earth = ({
-  speed,
-  getPosition,
-  speedChanged,
-  data,
-  setPosition,
-}) => {
-  let distanceScaleFactor = 1000000;
-  const [posArr, setPosArr] = useState(data);
-  const lineArr = useRef([]);
-  const line = useRef();
-  const clouds = useRef("clouds");
-  const earth = useRef();
-  const group = useRef();
-  const first = useRef(true);
-  const lastPositionUpdate = useRef(0);
-
-  let planetPositionIndex = useRef(0);
-
-  useLayoutEffect(() => {
-    group.current.userData.name = "Earth";
-    group.current.userData.nearOvOp = 60;
-    group.current.userData.scolor = "lightgreen";
-  });
-
-  useEffect(() => {}, []);
-  useFrame(({ clock }) => {
-    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-    if (timeSinceLastUpdate >= 3) {
-      //console.log("gethis");
-      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
-  }, []);
-
-  const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
-  const bump = useLoader(TextureLoader, "../img/earth/earth_bump_1k.jpg");
-  const spec = useLoader(
-    TextureLoader,
-    "../img/earth/6k_earth_specular_map.jpg"
-  );
-  const norm = useLoader(TextureLoader, "../img/earth/6k_earth_normal_map.jpg");
-  const cloudMap = useLoader(TextureLoader, "../img/earth/6k_earth_clouds.jpg");
-  const axisPoints = [
-    new THREE.Vector3(0, 6371.0 / 6000 + 0.5, 0),
-    new THREE.Vector3(0, -(6371.0 / 6000 + 0.5), 0),
-  ];
-  useLayoutEffect(() => {
-    line.current.geometry.setFromPoints(axisPoints);
-  });
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        planet={group}
-        color={"lightgreen"}
-        lineLength={300}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={earth}>
-          <sphereGeometry args={[6371.0 / 6000, 50, 50]} />
-          <meshPhongMaterial
-            map={col}
-            bumpMap={bump}
-            specularMap={spec}
-            normalMap={norm}
-            bumpScale={0.2}
-            shininess={0.5}
-          />
-        </mesh>
-        <mesh ref={clouds}>
-          <sphereGeometry args={[6371.0 / 6000 + 0.01, 50, 50]} />
-          <meshPhongMaterial map={cloudMap} transparent={true} opacity={0.5} />
-        </mesh>
-        {true && (
-          <line ref={line}>
-            <bufferGeometry />
-            <lineBasicMaterial
-              color={"hotpink"}
-              transparent={true}
-              opacity={0.5}
-              linewidth={2}
-            />
-          </line>
-        )}
-      </group>
-    </>
-  );
-};

src/planets/jupiter.jsx

@@ -1,63 +0,0 @@
-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,72 +0,0 @@
-import { Canvas, extend, 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 { 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);
-
-  let planetPositionIndex = useRef(0);
-  const mars = useRef("mars");
-  const group = useRef("group");
-  const col = useLoader(TextureLoader, "../img/mars/mars_1k_color.jpg");
-  const bump = useLoader(TextureLoader, "../img/mars/mars_1k_topo.jpg");
-  const norm = useLoader(TextureLoader, "../img/mars/mars_1k_normal.jpg");
-  let distanceScaleFactor = 1000000;
-
-  useLayoutEffect(() => {
-    group.current.userData.name = "Mars";
-    group.current.userData.nearOvOp = 40;
-    group.current.userData.scolor = "orange";
-  }, []);
-
-  useFrame(({ clock }) => {
-    //getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
-    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-    //console.log(speedChanged);
-    if (timeSinceLastUpdate >= 2) {
-      getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
-      //console.log(planetPositionIndex);
-      //console.log("getpos");
-      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={"orange"}
-        lineLength={150}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={mars}>
-          <sphereGeometry args={[3389.5 / 6000, 50, 50]} />
-          <meshPhongMaterial
-            map={col}
-            bumpMap={bump}
-            normalMap={norm}
-            bumpScale={0.3}
-          />
-        </mesh>
-      </group>
-    </>
-  );
-};

src/planets/mercury.jsx

@@ -1,64 +0,0 @@
-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 { PlanetOverlay } from "../planetOverlay";
-import { PlanetPath } from "../path";
-
-export const Mercury = ({
-  speed,
-  getPosition,
-  speedChanged,
-  setPosition,
-  data,
-}) => {
-  const [posArr, setPosArr] = useState(data);
-  const lineArr = useRef([]);
-  let planetPositionIndex = useRef(0);
-  let distanceScaleFactor = 1000000;
-  const mercury = useRef();
-  const lastPositionUpdate = useRef(0);
-  const group = useRef();
-
-  useLayoutEffect(() => {
-    group.current.userData.name = "Mercury";
-    group.current.userData.nearOvOp = 20;
-    group.current.userData.scolor = "#a34f5f";
-  }, []);
-
-  useFrame(({ clock }) => {
-    //getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
-    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-    if (timeSinceLastUpdate >= 2) {
-      //console.log("gethis");
-      getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
-      lastPositionUpdate.current = clock.elapsedTime;
-      //console.log(group.current);
-    }
-
-    //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/mercury/mercurymap.jpg");
-  const bump = useLoader(TextureLoader, "../img/mercury/mercurybump.jpg");
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        planet={group}
-        color={"#a34f5f"}
-        lineLength={100}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={mercury}>
-          <sphereGeometry args={[2439.7 / 6000, 50, 50]} />
-          <meshPhongMaterial map={col} bumpMap={bump} bumpScale={0.3} />
-        </mesh>
-      </group>
-    </>
-  );
-};

src/planets/neptune.jsx

@@ -1,74 +0,0 @@
-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/omnioverlay.jsx

@@ -1,29 +1,27 @@
-import { Canvas } from "@react-three/fiber";
+import { useContext, useState } from "react";
-import { OrbitControls } from "@react-three/drei";
-import React, {
-  Suspense,
-  useRef,
-  createContext,
-  memo,
-  useContext,
-} from "react";
-
 import { PlanetInfo } from "./planetInfo.jsx";
-import { MyContext } from "./Scene3.jsx";
+import { MyContext } from "../SolarSystemMain.jsx";
 
 export const ScreenOverlay = (props) => {
   const { customData } = useContext(MyContext);
 
+  const [date, setDate] = useState();
+  customData.current["setDate"] = setDate;
+
   const handleChange = () => {
     customData.current.updateSpeed(0);
   };
 
   const handleChange0 = () => {
-    customData.current.updateSpeed(1);
+    customData.current.updateSpeed(3);
   };
 
   const handleChange1 = () => {
-    customData.current.updateSpeed(3);
+    customData.current.updateSpeed(8);
+  };
+
+  const handleChange2 = () => {
+    customData.current.updateSpeed(20);
   };
 
   const handleReset = () => {
@@ -36,16 +34,6 @@ export const ScreenOverlay = (props) => {
 
   return (
     <>
-      {/* <div className="slidecontainer">
-        <input
-          type="range"
-          min="30"
-          max="120"
-          step="30"
-          className="slider"
-          id="myRange"
-          onChange={handleChange}
-        /> */}
       <div className="btn-toolbar slidecontainer">
         <div className="btn-group mr-2" role="group">
           <button onClick={handleReset} className="btn btn-primary">
@@ -60,6 +48,9 @@ export const ScreenOverlay = (props) => {
           <button onClick={handleChange1} className="btn btn-primary">
             &gt;&gt;
           </button>
+          <button onClick={handleChange2} className="btn btn-primary">
+            &gt;&gt;&gt;
+          </button>
         </div>
         <div className="btn-group" role="group">
           <button
@@ -70,6 +61,11 @@ export const ScreenOverlay = (props) => {
           </button>
         </div>
       </div>
+      <div className="date">
+        <span className="dateSpan" style={{ color: "white" }}>
+          {date && date.toUTCString()}
+        </span>
+      </div>
       <PlanetInfo planetInfo={props.planetInfo} />
     </>
   );

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 (
+    <>
+      <line ref={lineref} geometry={lineGeometry} frustumCulled={false}>
+        <lineBasicMaterial color={color} />
+      </line>
+    </>
+  );
+};

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 (
+    <>
+      <PlanetPath
+        linePos={lineArr.current}
+        linePoss={linePos}
+        planet={{
+          name: planetData.name,
+          id: planetData._id,
+          year: planetData.LOY,
+        }}
+        color={planetData.color}
+        lineLength={200}
+      />
+      <group ref={group}>
+        <PlanetOverlay planet={group} />
+        <mesh>
+          <sphereGeometry args={[planetData.Radius / 6000, 100, 100]} />
+          <meshPhongMaterial map={colorMap} />
+        </mesh>
+      </group>
+    </>
+  );
+};
+
+Planet.propTypes = {
+  planetData: PropTypes.object,
+  setPosition: PropTypes.func,
+  positions: PropTypes.array,
+  realPos: PropTypes.object,
+  linePos: PropTypes.array,
+};
+
+export default Planet;

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 (
+    <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 id="plInfoImg" src={`${planetData.name.toLowerCase()}.jpg`}></img>
+        <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>
+  );
+};
+
+PlanetInfo.propTypes = {
+  planet: PropTypes.object,
+  planetInfo: PropTypes.array
+};

src/planets/planetOverlay.jsx

@@ -1,81 +1,40 @@
-import {
+import { useFrame, useThree } from "@react-three/fiber";
-  Canvas,
+import { Html } from "@react-three/drei";
-  extend,
+import React, { useState, useEffect, useContext } from "react";
-  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 { MyContext } from "./Scene3";
+import { MyContext } from "../SolarSystemMain";
-
-import "./styles.css";
-
 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 (
     <>
       <Html
-        ref={ref}
         zIndexRange={[11, 0]}
         className="overlay"
         style={{ opacity: opacity }}
@@ -126,7 +69,7 @@ export const PlanetOverlay = ({ planet }) => {
             style={{ visibility: iconVis }}
           >
             <svg
-              onMouseEnter={() => setSColor("blue")}
+              onMouseEnter={() => setSColor("lightgrey")}
               onMouseLeave={() => setSColor(planet.current.userData.scolor)}
               style={svgStyle}
             >

src/planets/saturn.jsx

@@ -1,124 +0,0 @@
-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";
-
-const SaturnRingMaterial = shaderMaterial(
-  {
-    ringCol: 0,
-    ringAlpha: 0,
-    innerRadius: 58232 / 6000 + 0,
-    outerRadius: 58232 / 6000 + 0,
-  },
-  glsl`
-varying vec3 vPos;
-
-void main() {
-  vPos = position;
-  vec3 viewPosition = (modelViewMatrix * vec4(position, 1.)).xyz;
-  gl_Position = projectionMatrix * vec4(viewPosition, 1.);
-}
-`,
-  glsl`
-uniform sampler2D ringCol;
-uniform sampler2D ringAlpha;
-uniform float innerRadius;
-uniform float outerRadius;
-
-varying vec3 vPos;
-
-vec4 color() {
-  vec2 uv = vec2(0);
-  uv.x = (length(vPos) - innerRadius) / (innerRadius + outerRadius);  
-  
-  vec4 pixel = texture2D(ringCol, uv);
-  vec4 pixel2 = texture2D(ringAlpha, uv);
-  pixel[3] = pixel2[0];
-  if (pixel[3] <= 0.01) {
-    discard;
-  }
-  return pixel;
-}
-
-void main() {
-  gl_FragColor = color();
-}
-`
-);
-
-extend({ SaturnRingMaterial });
-
-export const Saturn = ({
-  speed,
-  speedChanged,
-  getPosition,
-  setPosition,
-  data,
-}) => {
-  const [posArr, setPosArr] = useState(data);
-  const lineArr = useRef([]);
-  const lastPositionUpdate = useRef(0);
-
-  let planetPositionIndex = useRef(0);
-  const saturn = useRef("saturn");
-  const group = useRef("group");
-  const col = useLoader(TextureLoader, "../img/saturn/saturnmap.jpg");
-  const ringCol = useLoader(TextureLoader, "../img/saturn/saturnringcolor.jpg");
-  const ringAlpha = useLoader(
-    TextureLoader,
-    "../img/saturn/saturnringpattern.gif"
-  );
-  let distanceScaleFactor = 1000000;
-
-  useLayoutEffect(() => {
-    group.current.userData.counter = 0;
-    group.current.userData.name = "Saturn";
-    group.current.userData.nearOvOp = 800;
-    group.current.userData.scolor = "red";
-  }, []);
-
-  useFrame(({ clock }) => {
-    const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
-    if (timeSinceLastUpdate >= 2) {
-      //console.log("gethis");
-      getPosition("saturn", setPosArr, posArr, planetPositionIndex.current);
-      lastPositionUpdate.current = clock.elapsedTime;
-    }
-    //console.log("arrlength" + posArr.length);
-
-    //if speed is 0 set the date to current date get from posArr
-    //search for current date in posArr an set planetPositionIndex
-    setPosition(group, posArr, lineArr);
-  }, []);
-
-  return (
-    <>
-      <PlanetPath
-        linePos={lineArr.current}
-        planet={group}
-        color={"red"}
-        lineLength={300}
-      />
-      <group ref={group}>
-        <PlanetOverlay planet={group} />
-        <mesh ref={saturn}>
-          <sphereGeometry args={[58232 / 6000, 50, 50]} />
-          <meshPhongMaterial map={col} />
-        </mesh>
-        <mesh>
-          <ringGeometry args={[58232 / 6000 + 1, 58232 / 6000 + 5, 100, 100]} />
-          <saturnRingMaterial
-            ringCol={ringCol}
-            ringAlpha={ringAlpha}
-            transparent={true}
-            side={THREE.DoubleSide}
-          />
-        </mesh>
-      </group>
-    </>
-  );
-};

src/planets/sun.jsx

@@ -1,47 +1,390 @@
-import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
+import {
-import { shaderMaterial, OrbitControls, Line } from "@react-three/drei";
+  Canvas,
-import React, { useRef, Suspense, useLayoutEffect } from "react";
+  extend,
+  useFrame,
+  useLoader,
+  useThree,
+} from "@react-three/fiber";
+import {
+  shaderMaterial,
+  OrbitControls,
+  CubeCamera,
+  useCubeCamera,
+} from "@react-three/drei";
+import React, { useRef, Suspense, useLayoutEffect, 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";
 
-export const Sun = ({ positions }) => {
+const SunPerlinMaterial = shaderMaterial(
-  const mars = useRef("mars");
+  //uniform
-  const group = useRef("group");
+  {
-  const col = useLoader(TextureLoader, "../img/sun/sun_uv.jpg");
+    uTime: 0,
-  let distanceScaleFactor = 1000000;
+  },
+  //Vertex SHader
+  glsl`
+    uniform float uTime;
+
+    varying vec3 vPosition;
+
+  varying vec2 vUv;
+  void main(){
+
+    vPosition = position;
+    vUv = uv;
+    gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
+  }`,
+  //Fragment Shader
+  glsl`
+  //	Classic Perlin 3D Noise 
+  //	by Stefan Gustavson
+  //
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+  
+  float cnoise(vec4 P){
+    vec4 Pi0 = floor(P); // Integer part for indexing
+    vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
+    Pi0 = mod(Pi0, 289.0);
+    Pi1 = mod(Pi1, 289.0);
+    vec4 Pf0 = fract(P); // Fractional part for interpolation
+    vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = vec4(Pi0.zzzz);
+    vec4 iz1 = vec4(Pi1.zzzz);
+    vec4 iw0 = vec4(Pi0.wwww);
+    vec4 iw1 = vec4(Pi1.wwww);
+  
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+    vec4 ixy00 = permute(ixy0 + iw0);
+    vec4 ixy01 = permute(ixy0 + iw1);
+    vec4 ixy10 = permute(ixy1 + iw0);
+    vec4 ixy11 = permute(ixy1 + iw1);
+  
+    vec4 gx00 = ixy00 / 7.0;
+    vec4 gy00 = floor(gx00) / 7.0;
+    vec4 gz00 = floor(gy00) / 6.0;
+    gx00 = fract(gx00) - 0.5;
+    gy00 = fract(gy00) - 0.5;
+    gz00 = fract(gz00) - 0.5;
+    vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
+    vec4 sw00 = step(gw00, vec4(0.0));
+    gx00 -= sw00 * (step(0.0, gx00) - 0.5);
+    gy00 -= sw00 * (step(0.0, gy00) - 0.5);
+  
+    vec4 gx01 = ixy01 / 7.0;
+    vec4 gy01 = floor(gx01) / 7.0;
+    vec4 gz01 = floor(gy01) / 6.0;
+    gx01 = fract(gx01) - 0.5;
+    gy01 = fract(gy01) - 0.5;
+    gz01 = fract(gz01) - 0.5;
+    vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
+    vec4 sw01 = step(gw01, vec4(0.0));
+    gx01 -= sw01 * (step(0.0, gx01) - 0.5);
+    gy01 -= sw01 * (step(0.0, gy01) - 0.5);
+  
+    vec4 gx10 = ixy10 / 7.0;
+    vec4 gy10 = floor(gx10) / 7.0;
+    vec4 gz10 = floor(gy10) / 6.0;
+    gx10 = fract(gx10) - 0.5;
+    gy10 = fract(gy10) - 0.5;
+    gz10 = fract(gz10) - 0.5;
+    vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
+    vec4 sw10 = step(gw10, vec4(0.0));
+    gx10 -= sw10 * (step(0.0, gx10) - 0.5);
+    gy10 -= sw10 * (step(0.0, gy10) - 0.5);
+  
+    vec4 gx11 = ixy11 / 7.0;
+    vec4 gy11 = floor(gx11) / 7.0;
+    vec4 gz11 = floor(gy11) / 6.0;
+    gx11 = fract(gx11) - 0.5;
+    gy11 = fract(gy11) - 0.5;
+    gz11 = fract(gz11) - 0.5;
+    vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
+    vec4 sw11 = step(gw11, vec4(0.0));
+    gx11 -= sw11 * (step(0.0, gx11) - 0.5);
+    gy11 -= sw11 * (step(0.0, gy11) - 0.5);
+  
+    vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
+    vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
+    vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
+    vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
+    vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
+    vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
+    vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
+    vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
+    vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
+    vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
+    vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
+    vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
+    vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
+    vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
+    vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
+    vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
+  
+    vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
+    g0000 *= norm00.x;
+    g0100 *= norm00.y;
+    g1000 *= norm00.z;
+    g1100 *= norm00.w;
+  
+    vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
+    g0001 *= norm01.x;
+    g0101 *= norm01.y;
+    g1001 *= norm01.z;
+    g1101 *= norm01.w;
+  
+    vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
+    g0010 *= norm10.x;
+    g0110 *= norm10.y;
+    g1010 *= norm10.z;
+    g1110 *= norm10.w;
+  
+    vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
+    g0011 *= norm11.x;
+    g0111 *= norm11.y;
+    g1011 *= norm11.z;
+    g1111 *= norm11.w;
+  
+    float n0000 = dot(g0000, Pf0);
+    float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
+    float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
+    float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
+    float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
+    float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
+    float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
+    float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
+    float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
+    float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
+    float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
+    float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
+    float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
+    float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
+    float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
+    float n1111 = dot(g1111, Pf1);
+  
+    vec4 fade_xyzw = fade(Pf0);
+    vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
+    vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
+    vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
+    vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
+    float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
+    return 2.2 * n_xyzw;
+  }
+  
+  // Classic Perlin noise, periodic version
+  float cnoise(vec4 P, vec4 rep){
+    vec4 Pi0 = mod(floor(P), rep); // Integer part modulo rep
+    vec4 Pi1 = mod(Pi0 + 1.0, rep); // Integer part + 1 mod rep
+    vec4 Pf0 = fract(P); // Fractional part for interpolation
+    vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = vec4(Pi0.zzzz);
+    vec4 iz1 = vec4(Pi1.zzzz);
+    vec4 iw0 = vec4(Pi0.wwww);
+    vec4 iw1 = vec4(Pi1.wwww);
+  
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+    vec4 ixy00 = permute(ixy0 + iw0);
+    vec4 ixy01 = permute(ixy0 + iw1);
+    vec4 ixy10 = permute(ixy1 + iw0);
+    vec4 ixy11 = permute(ixy1 + iw1);
+  
+    vec4 gx00 = ixy00 / 7.0;
+    vec4 gy00 = floor(gx00) / 7.0;
+    vec4 gz00 = floor(gy00) / 6.0;
+    gx00 = fract(gx00) - 0.5;
+    gy00 = fract(gy00) - 0.5;
+    gz00 = fract(gz00) - 0.5;
+    vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
+    vec4 sw00 = step(gw00, vec4(0.0));
+    gx00 -= sw00 * (step(0.0, gx00) - 0.5);
+    gy00 -= sw00 * (step(0.0, gy00) - 0.5);
+  
+    vec4 gx01 = ixy01 / 7.0;
+    vec4 gy01 = floor(gx01) / 7.0;
+    vec4 gz01 = floor(gy01) / 6.0;
+    gx01 = fract(gx01) - 0.5;
+    gy01 = fract(gy01) - 0.5;
+    gz01 = fract(gz01) - 0.5;
+    vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
+    vec4 sw01 = step(gw01, vec4(0.0));
+    gx01 -= sw01 * (step(0.0, gx01) - 0.5);
+    gy01 -= sw01 * (step(0.0, gy01) - 0.5);
+  
+    vec4 gx10 = ixy10 / 7.0;
+    vec4 gy10 = floor(gx10) / 7.0;
+    vec4 gz10 = floor(gy10) / 6.0;
+    gx10 = fract(gx10) - 0.5;
+    gy10 = fract(gy10) - 0.5;
+    gz10 = fract(gz10) - 0.5;
+    vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
+    vec4 sw10 = step(gw10, vec4(0.0));
+    gx10 -= sw10 * (step(0.0, gx10) - 0.5);
+    gy10 -= sw10 * (step(0.0, gy10) - 0.5);
+  
+    vec4 gx11 = ixy11 / 7.0;
+    vec4 gy11 = floor(gx11) / 7.0;
+    vec4 gz11 = floor(gy11) / 6.0;
+    gx11 = fract(gx11) - 0.5;
+    gy11 = fract(gy11) - 0.5;
+    gz11 = fract(gz11) - 0.5;
+    vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
+    vec4 sw11 = step(gw11, vec4(0.0));
+    gx11 -= sw11 * (step(0.0, gx11) - 0.5);
+    gy11 -= sw11 * (step(0.0, gy11) - 0.5);
+  
+    vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
+    vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
+    vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
+    vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
+    vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
+    vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
+    vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
+    vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
+    vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
+    vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
+    vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
+    vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
+    vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
+    vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
+    vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
+    vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
+  
+    vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
+    g0000 *= norm00.x;
+    g0100 *= norm00.y;
+    g1000 *= norm00.z;
+    g1100 *= norm00.w;
+  
+    vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
+    g0001 *= norm01.x;
+    g0101 *= norm01.y;
+    g1001 *= norm01.z;
+    g1101 *= norm01.w;
+  
+    vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
+    g0010 *= norm10.x;
+    g0110 *= norm10.y;
+    g1010 *= norm10.z;
+    g1110 *= norm10.w;
+  
+    vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
+    g0011 *= norm11.x;
+    g0111 *= norm11.y;
+    g1011 *= norm11.z;
+    g1111 *= norm11.w;
+  
+    float n0000 = dot(g0000, Pf0);
+    float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
+    float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
+    float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
+    float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
+    float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
+    float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
+    float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
+    float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
+    float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
+    float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
+    float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
+    float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
+    float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
+    float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
+    float n1111 = dot(g1111, Pf1);
+  
+    vec4 fade_xyzw = fade(Pf0);
+    vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
+    vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
+    vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
+    vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
+    float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
+    return 2.2 * n_xyzw;
+  }
+
+  varying vec2 vUv;
+  varying vec3 vPosition;
+  uniform float uTime;
+
+  // 6 lyers of noise
+
+  float fbm(vec4 p){
+    float sum = 0.;
+    float amp = 1.;
+    float scale = 0.5;
+    for(int i = 0; i < 6; i++){
+        sum+=cnoise(p*scale)*amp;
+        //p.w += 100.;
+        amp*=0.9;
+        scale *= 3.9;
+    }
+    return sum;
+  }
+    
+    void main(){
+
+        vec4 p = vec4(vPosition*3.,uTime*0.4);
+
+        float noisy = fbm(p*0.1);
+
+        vec4 p1 = vec4(vPosition*2.,uTime*0.05);
+        float spots = max(cnoise(p1),0.5);
+
+        gl_FragColor = vec4(noisy);
+        gl_FragColor *= mix(1.,spots, 1.0);
+        gl_FragColor *= vec4(1.,0.7,0.,1.);
+    }`
+);
+
+extend({ SunPerlinMaterial });
+
+const Sun = () => {
+  const { scene, camera } = useThree();
+  const sunPerlinMesh = useRef();
+  const group = useRef();
+  const ref = useRef();
+
+  useFrame(({ clock, gl }) => {
+    gl.render(scene, camera);
+    ref.current.uTime = clock.getElapsedTime();
+  });
 
   useLayoutEffect(() => {
     group.current.userData.counter = 0;
     group.current.userData.name = "Sun";
-    group.current.userData.nearOvOp = 800;
+    group.current.userData.nearOvOp = 1800;
     group.current.userData.scolor = "white";
   }, []);
 
-  useFrame(() => {
+  const sunMesh = useRef();
-    if (false) {
+
-      group.current.position.set(
-        Number(
-          positions[group.current.userData.counter].x / distanceScaleFactor
-        ),
-        Number(
-          positions[group.current.userData.counter].y / distanceScaleFactor
-        ),
-        Number(
-          positions[group.current.userData.counter].z / distanceScaleFactor
-        )
-      );
-      group.current.userData.counter++;
-    }
-  });
   return (
-    <group ref={group}>
+    <>
-      <PlanetOverlay planet={group} />
+      <group ref={group}>
-      <mesh ref={mars}>
+        <PlanetOverlay planet={group} />
-        <sphereGeometry args={[100000 / 6000, 50, 50]} />
+        <mesh ref={sunPerlinMesh} position={[0, 0, 0]}>
-        <meshPhongMaterial emissiveMap={col} emmisiveIntensite={1} />
+          <sphereGeometry args={[32, 50, 50]} />
-      </mesh>
+          <sunPerlinMaterial ref={ref} />
-    </group>
+        </mesh>
+        <CubeCamera near={0.1} far={35} frames={3}>
+          {(texture) => (
+            <>
+              <mesh ref={sunMesh} position={[0, 0, 0]}>
+                <sphereGeometry args={[33, 50, 50]} />
+                <meshBasicMaterial envMap={texture} />
+              </mesh>
+            </>
+          )}
+        </CubeCamera>
+      </group>
+    </>
   );
 };
+
+export default Sun;

src/planets/uranus.jsx

@@ -1,67 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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/styles.css

@@ -1,129 +0,0 @@
-.overlay .wrapper {
-  transform: translate3d(-10px, -10px, 0);
-  position: absolute;
-  cursor: pointer;
-}
-
-canvas {
-  background-color: black;
-}
-
-.overlay .wrapper .content {
-  position: absolute;
-  color: rgb(254, 254, 254);
-  font-size: 1.05em;
-  font-family: Arial, Helvetica, sans-serif;
-  user-select: none;
-  background-size: contain;
-}
-
-.overlay .wrapper .icon {
-  /*background-image: url(../ring.svg);
-  background-repeat: no-repeat;
-  background-size: contain;
-  stroke: red;
-
-  height: 20px;
-  width: 20px;
-  top: 10px;*/
-  margin: 0;
-  padding: 0;
-  display: block;
-}
-
-.planetInfo {
-  z-index: 12;
-  position: absolute;
-  height: 100%;
-  transition: opacity 0.5s;
-  /*opacity: 0;
-  /*background-color: aliceblue;*/
-}
-
-.slidecontainer {
-  text-align: center;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-  z-index: 12;
-  top: 90%;
-  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;
-  position: absolute;
-  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: 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 {
-  color: white;
-  padding: 2px;
-  margin-left: 3%;
-}

src/sunscene.jsx

@@ -1,809 +0,0 @@
-import {
-  Canvas,
-  extend,
-  useFrame,
-  useLoader,
-  useThree,
-} from "@react-three/fiber";
-import {
-  shaderMaterial,
-  OrbitControls,
-  CubeCamera,
-  useCubeCamera,
-} from "@react-three/drei";
-import React, { useRef, Suspense } from "react";
-import * as THREE from "three";
-import glsl from "glslify";
-
-const SunPerlinMaterial = shaderMaterial(
-  //uniform
-  {
-    uTime: 0,
-  },
-  //Vertex SHader
-  glsl`
-    uniform float uTime;
-
-    varying vec3 vPosition;
-
-  varying vec2 vUv;
-  void main(){
-
-    vPosition = position;
-    vUv = uv;
-    gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
-  }`,
-  //Fragment Shader
-  glsl`
-  //	Classic Perlin 3D Noise 
-  //	by Stefan Gustavson
-  //
-  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
-  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
-  vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
-  
-  float cnoise(vec4 P){
-    vec4 Pi0 = floor(P); // Integer part for indexing
-    vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
-    Pi0 = mod(Pi0, 289.0);
-    Pi1 = mod(Pi1, 289.0);
-    vec4 Pf0 = fract(P); // Fractional part for interpolation
-    vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
-    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-    vec4 iy = vec4(Pi0.yy, Pi1.yy);
-    vec4 iz0 = vec4(Pi0.zzzz);
-    vec4 iz1 = vec4(Pi1.zzzz);
-    vec4 iw0 = vec4(Pi0.wwww);
-    vec4 iw1 = vec4(Pi1.wwww);
-  
-    vec4 ixy = permute(permute(ix) + iy);
-    vec4 ixy0 = permute(ixy + iz0);
-    vec4 ixy1 = permute(ixy + iz1);
-    vec4 ixy00 = permute(ixy0 + iw0);
-    vec4 ixy01 = permute(ixy0 + iw1);
-    vec4 ixy10 = permute(ixy1 + iw0);
-    vec4 ixy11 = permute(ixy1 + iw1);
-  
-    vec4 gx00 = ixy00 / 7.0;
-    vec4 gy00 = floor(gx00) / 7.0;
-    vec4 gz00 = floor(gy00) / 6.0;
-    gx00 = fract(gx00) - 0.5;
-    gy00 = fract(gy00) - 0.5;
-    gz00 = fract(gz00) - 0.5;
-    vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
-    vec4 sw00 = step(gw00, vec4(0.0));
-    gx00 -= sw00 * (step(0.0, gx00) - 0.5);
-    gy00 -= sw00 * (step(0.0, gy00) - 0.5);
-  
-    vec4 gx01 = ixy01 / 7.0;
-    vec4 gy01 = floor(gx01) / 7.0;
-    vec4 gz01 = floor(gy01) / 6.0;
-    gx01 = fract(gx01) - 0.5;
-    gy01 = fract(gy01) - 0.5;
-    gz01 = fract(gz01) - 0.5;
-    vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
-    vec4 sw01 = step(gw01, vec4(0.0));
-    gx01 -= sw01 * (step(0.0, gx01) - 0.5);
-    gy01 -= sw01 * (step(0.0, gy01) - 0.5);
-  
-    vec4 gx10 = ixy10 / 7.0;
-    vec4 gy10 = floor(gx10) / 7.0;
-    vec4 gz10 = floor(gy10) / 6.0;
-    gx10 = fract(gx10) - 0.5;
-    gy10 = fract(gy10) - 0.5;
-    gz10 = fract(gz10) - 0.5;
-    vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
-    vec4 sw10 = step(gw10, vec4(0.0));
-    gx10 -= sw10 * (step(0.0, gx10) - 0.5);
-    gy10 -= sw10 * (step(0.0, gy10) - 0.5);
-  
-    vec4 gx11 = ixy11 / 7.0;
-    vec4 gy11 = floor(gx11) / 7.0;
-    vec4 gz11 = floor(gy11) / 6.0;
-    gx11 = fract(gx11) - 0.5;
-    gy11 = fract(gy11) - 0.5;
-    gz11 = fract(gz11) - 0.5;
-    vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
-    vec4 sw11 = step(gw11, vec4(0.0));
-    gx11 -= sw11 * (step(0.0, gx11) - 0.5);
-    gy11 -= sw11 * (step(0.0, gy11) - 0.5);
-  
-    vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
-    vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
-    vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
-    vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
-    vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
-    vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
-    vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
-    vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
-    vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
-    vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
-    vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
-    vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
-    vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
-    vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
-    vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
-    vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
-  
-    vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
-    g0000 *= norm00.x;
-    g0100 *= norm00.y;
-    g1000 *= norm00.z;
-    g1100 *= norm00.w;
-  
-    vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
-    g0001 *= norm01.x;
-    g0101 *= norm01.y;
-    g1001 *= norm01.z;
-    g1101 *= norm01.w;
-  
-    vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
-    g0010 *= norm10.x;
-    g0110 *= norm10.y;
-    g1010 *= norm10.z;
-    g1110 *= norm10.w;
-  
-    vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
-    g0011 *= norm11.x;
-    g0111 *= norm11.y;
-    g1011 *= norm11.z;
-    g1111 *= norm11.w;
-  
-    float n0000 = dot(g0000, Pf0);
-    float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
-    float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
-    float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
-    float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
-    float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
-    float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
-    float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
-    float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
-    float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
-    float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
-    float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
-    float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
-    float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
-    float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
-    float n1111 = dot(g1111, Pf1);
-  
-    vec4 fade_xyzw = fade(Pf0);
-    vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
-    vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
-    vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
-    vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
-    float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
-    return 2.2 * n_xyzw;
-  }
-  
-  // Classic Perlin noise, periodic version
-  float cnoise(vec4 P, vec4 rep){
-    vec4 Pi0 = mod(floor(P), rep); // Integer part modulo rep
-    vec4 Pi1 = mod(Pi0 + 1.0, rep); // Integer part + 1 mod rep
-    vec4 Pf0 = fract(P); // Fractional part for interpolation
-    vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
-    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-    vec4 iy = vec4(Pi0.yy, Pi1.yy);
-    vec4 iz0 = vec4(Pi0.zzzz);
-    vec4 iz1 = vec4(Pi1.zzzz);
-    vec4 iw0 = vec4(Pi0.wwww);
-    vec4 iw1 = vec4(Pi1.wwww);
-  
-    vec4 ixy = permute(permute(ix) + iy);
-    vec4 ixy0 = permute(ixy + iz0);
-    vec4 ixy1 = permute(ixy + iz1);
-    vec4 ixy00 = permute(ixy0 + iw0);
-    vec4 ixy01 = permute(ixy0 + iw1);
-    vec4 ixy10 = permute(ixy1 + iw0);
-    vec4 ixy11 = permute(ixy1 + iw1);
-  
-    vec4 gx00 = ixy00 / 7.0;
-    vec4 gy00 = floor(gx00) / 7.0;
-    vec4 gz00 = floor(gy00) / 6.0;
-    gx00 = fract(gx00) - 0.5;
-    gy00 = fract(gy00) - 0.5;
-    gz00 = fract(gz00) - 0.5;
-    vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
-    vec4 sw00 = step(gw00, vec4(0.0));
-    gx00 -= sw00 * (step(0.0, gx00) - 0.5);
-    gy00 -= sw00 * (step(0.0, gy00) - 0.5);
-  
-    vec4 gx01 = ixy01 / 7.0;
-    vec4 gy01 = floor(gx01) / 7.0;
-    vec4 gz01 = floor(gy01) / 6.0;
-    gx01 = fract(gx01) - 0.5;
-    gy01 = fract(gy01) - 0.5;
-    gz01 = fract(gz01) - 0.5;
-    vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
-    vec4 sw01 = step(gw01, vec4(0.0));
-    gx01 -= sw01 * (step(0.0, gx01) - 0.5);
-    gy01 -= sw01 * (step(0.0, gy01) - 0.5);
-  
-    vec4 gx10 = ixy10 / 7.0;
-    vec4 gy10 = floor(gx10) / 7.0;
-    vec4 gz10 = floor(gy10) / 6.0;
-    gx10 = fract(gx10) - 0.5;
-    gy10 = fract(gy10) - 0.5;
-    gz10 = fract(gz10) - 0.5;
-    vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
-    vec4 sw10 = step(gw10, vec4(0.0));
-    gx10 -= sw10 * (step(0.0, gx10) - 0.5);
-    gy10 -= sw10 * (step(0.0, gy10) - 0.5);
-  
-    vec4 gx11 = ixy11 / 7.0;
-    vec4 gy11 = floor(gx11) / 7.0;
-    vec4 gz11 = floor(gy11) / 6.0;
-    gx11 = fract(gx11) - 0.5;
-    gy11 = fract(gy11) - 0.5;
-    gz11 = fract(gz11) - 0.5;
-    vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
-    vec4 sw11 = step(gw11, vec4(0.0));
-    gx11 -= sw11 * (step(0.0, gx11) - 0.5);
-    gy11 -= sw11 * (step(0.0, gy11) - 0.5);
-  
-    vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
-    vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
-    vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
-    vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
-    vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
-    vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
-    vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
-    vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
-    vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
-    vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
-    vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
-    vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
-    vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
-    vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
-    vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
-    vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
-  
-    vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
-    g0000 *= norm00.x;
-    g0100 *= norm00.y;
-    g1000 *= norm00.z;
-    g1100 *= norm00.w;
-  
-    vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
-    g0001 *= norm01.x;
-    g0101 *= norm01.y;
-    g1001 *= norm01.z;
-    g1101 *= norm01.w;
-  
-    vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
-    g0010 *= norm10.x;
-    g0110 *= norm10.y;
-    g1010 *= norm10.z;
-    g1110 *= norm10.w;
-  
-    vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
-    g0011 *= norm11.x;
-    g0111 *= norm11.y;
-    g1011 *= norm11.z;
-    g1111 *= norm11.w;
-  
-    float n0000 = dot(g0000, Pf0);
-    float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
-    float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
-    float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
-    float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
-    float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
-    float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
-    float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
-    float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
-    float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
-    float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
-    float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
-    float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
-    float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
-    float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
-    float n1111 = dot(g1111, Pf1);
-  
-    vec4 fade_xyzw = fade(Pf0);
-    vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
-    vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
-    vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
-    vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
-    float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
-    return 2.2 * n_xyzw;
-  }
-
-  varying vec2 vUv;
-  varying vec3 vPosition;
-  uniform float uTime;
-
-  // 6 lyers of noise
-
-  float fbm(vec4 p){
-    float sum = 0.;
-    float amp = 1.;
-    float scale = 1.;
-    for(int i = 0; i < 6; i++){
-        sum+=cnoise(p*scale)*amp;
-        p.w += 100.;
-        amp*=0.9;
-        scale *= 2.;
-    }
-    return sum;
-  }
-    
-    void main(){
-
-        vec4 p = vec4(vPosition*3.,uTime*0.05);
-
-        float noisy = fbm(p);
-
-        vec4 p1 = vec4(vPosition*2.,uTime*0.07);
-        float spots = max(cnoise(p1),0.);
-
-        gl_FragColor = vec4(noisy);
-        gl_FragColor *= mix(1.,spots, 0.3);
-        gl_FragColor *= vec4(1.,0.3,0.,1.);
-    }`
-);
-
-const SunShaderMaterial = shaderMaterial(
-  {
-    uTime: 0,
-    uPerlin: null,
-  },
-  glsl`
-        uniform float uTime;
-
-        varying vec3 vPosition;
-        varying vec2 vUv;
-
-        void main(){
-          vPosition = position;
-          vUv = uv;
-          gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
-        }`,
-  glsl`
-        uniform float uTime;
-        uniform samplerCube uPerlin;
-
-        varying vec3 vPosition;
-        varying vec2 vUv;
-
-        void main(){
-
-          gl_FragColor = textureCube(uPerlin, vPosition);
-          //gl_FragColor = vec4(0.8,1.,0.1,1.);
-        }`
-);
-
-extend({ SunPerlinMaterial });
-extend({ SunShaderMaterial });
-
-const Sun = () => {
-  const { scene, camera, gl, clock } = useThree();
-  console.log(useThree());
-  const sunMesh = useRef();
-  const scene2 = new THREE.Scene();
-  const time = useRef(0);
-
-  const sunPerlinMesh = useRef();
-  const sphere = new THREE.SphereGeometry(2, 30, 30);
-  const sphereMat = new THREE.ShaderMaterial({
-    side: THREE.DoubleSide,
-    uniforms: {
-      uTime: clock.getElapsedTime(),
-    },
-    vertexShader: `uniform float uTime;
-
-    varying vec3 vPosition;
-    varying vec2 vUv;
-
-    void main(){
-      vPosition = position;
-      vUv = uv;
-      gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
-    }`,
-    fragmentShader: `
-        uniform float uTime;
-        //uniform samplerCube uPerlin;
-
-        varying vec3 vPosition;
-        varying vec2 vUv;
-
-        void main(){
-
-          //gl_FragColor = textureCube(uPerlin, vPosition);
-          gl_FragColor = vec4(vUv,1.*uTime,1.);
-        }`,
-  });
-  const sphereMesh = new THREE.Mesh(sphere, sphereMat);
-
-  const perlinSphere = new THREE.SphereGeometry(3, 30, 30);
-  const perlinSphereMat = new THREE.ShaderMaterial({
-    side: THREE.DoubleSide,
-    uniforms: {
-      uTime: time.current,
-    },
-    vertexShader: `
-    uniform float uTime;
-
-    varying vec3 vPosition;
-
-  varying vec2 vUv;
-  void main(){
-
-    vPosition = position;
-    vUv = uv;
-    gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
-  }`,
-    fragmentShader: `
-    //	Classic Perlin 3D Noise 
-    //	by Stefan Gustavson
-    //
-    vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
-    vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
-    vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
-    
-    float cnoise(vec4 P){
-      vec4 Pi0 = floor(P); // Integer part for indexing
-      vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
-      Pi0 = mod(Pi0, 289.0);
-      Pi1 = mod(Pi1, 289.0);
-      vec4 Pf0 = fract(P); // Fractional part for interpolation
-      vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
-      vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-      vec4 iy = vec4(Pi0.yy, Pi1.yy);
-      vec4 iz0 = vec4(Pi0.zzzz);
-      vec4 iz1 = vec4(Pi1.zzzz);
-      vec4 iw0 = vec4(Pi0.wwww);
-      vec4 iw1 = vec4(Pi1.wwww);
-    
-      vec4 ixy = permute(permute(ix) + iy);
-      vec4 ixy0 = permute(ixy + iz0);
-      vec4 ixy1 = permute(ixy + iz1);
-      vec4 ixy00 = permute(ixy0 + iw0);
-      vec4 ixy01 = permute(ixy0 + iw1);
-      vec4 ixy10 = permute(ixy1 + iw0);
-      vec4 ixy11 = permute(ixy1 + iw1);
-    
-      vec4 gx00 = ixy00 / 7.0;
-      vec4 gy00 = floor(gx00) / 7.0;
-      vec4 gz00 = floor(gy00) / 6.0;
-      gx00 = fract(gx00) - 0.5;
-      gy00 = fract(gy00) - 0.5;
-      gz00 = fract(gz00) - 0.5;
-      vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
-      vec4 sw00 = step(gw00, vec4(0.0));
-      gx00 -= sw00 * (step(0.0, gx00) - 0.5);
-      gy00 -= sw00 * (step(0.0, gy00) - 0.5);
-    
-      vec4 gx01 = ixy01 / 7.0;
-      vec4 gy01 = floor(gx01) / 7.0;
-      vec4 gz01 = floor(gy01) / 6.0;
-      gx01 = fract(gx01) - 0.5;
-      gy01 = fract(gy01) - 0.5;
-      gz01 = fract(gz01) - 0.5;
-      vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
-      vec4 sw01 = step(gw01, vec4(0.0));
-      gx01 -= sw01 * (step(0.0, gx01) - 0.5);
-      gy01 -= sw01 * (step(0.0, gy01) - 0.5);
-    
-      vec4 gx10 = ixy10 / 7.0;
-      vec4 gy10 = floor(gx10) / 7.0;
-      vec4 gz10 = floor(gy10) / 6.0;
-      gx10 = fract(gx10) - 0.5;
-      gy10 = fract(gy10) - 0.5;
-      gz10 = fract(gz10) - 0.5;
-      vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
-      vec4 sw10 = step(gw10, vec4(0.0));
-      gx10 -= sw10 * (step(0.0, gx10) - 0.5);
-      gy10 -= sw10 * (step(0.0, gy10) - 0.5);
-    
-      vec4 gx11 = ixy11 / 7.0;
-      vec4 gy11 = floor(gx11) / 7.0;
-      vec4 gz11 = floor(gy11) / 6.0;
-      gx11 = fract(gx11) - 0.5;
-      gy11 = fract(gy11) - 0.5;
-      gz11 = fract(gz11) - 0.5;
-      vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
-      vec4 sw11 = step(gw11, vec4(0.0));
-      gx11 -= sw11 * (step(0.0, gx11) - 0.5);
-      gy11 -= sw11 * (step(0.0, gy11) - 0.5);
-    
-      vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
-      vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
-      vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
-      vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
-      vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
-      vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
-      vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
-      vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
-      vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
-      vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
-      vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
-      vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
-      vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
-      vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
-      vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
-      vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
-    
-      vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
-      g0000 *= norm00.x;
-      g0100 *= norm00.y;
-      g1000 *= norm00.z;
-      g1100 *= norm00.w;
-    
-      vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
-      g0001 *= norm01.x;
-      g0101 *= norm01.y;
-      g1001 *= norm01.z;
-      g1101 *= norm01.w;
-    
-      vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
-      g0010 *= norm10.x;
-      g0110 *= norm10.y;
-      g1010 *= norm10.z;
-      g1110 *= norm10.w;
-    
-      vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
-      g0011 *= norm11.x;
-      g0111 *= norm11.y;
-      g1011 *= norm11.z;
-      g1111 *= norm11.w;
-    
-      float n0000 = dot(g0000, Pf0);
-      float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
-      float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
-      float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
-      float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
-      float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
-      float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
-      float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
-      float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
-      float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
-      float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
-      float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
-      float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
-      float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
-      float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
-      float n1111 = dot(g1111, Pf1);
-    
-      vec4 fade_xyzw = fade(Pf0);
-      vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
-      vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
-      vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
-      vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
-      float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
-      return 2.2 * n_xyzw;
-    }
-    
-    // Classic Perlin noise, periodic version
-    float cnoise(vec4 P, vec4 rep){
-      vec4 Pi0 = mod(floor(P), rep); // Integer part modulo rep
-      vec4 Pi1 = mod(Pi0 + 1.0, rep); // Integer part + 1 mod rep
-      vec4 Pf0 = fract(P); // Fractional part for interpolation
-      vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
-      vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-      vec4 iy = vec4(Pi0.yy, Pi1.yy);
-      vec4 iz0 = vec4(Pi0.zzzz);
-      vec4 iz1 = vec4(Pi1.zzzz);
-      vec4 iw0 = vec4(Pi0.wwww);
-      vec4 iw1 = vec4(Pi1.wwww);
-    
-      vec4 ixy = permute(permute(ix) + iy);
-      vec4 ixy0 = permute(ixy + iz0);
-      vec4 ixy1 = permute(ixy + iz1);
-      vec4 ixy00 = permute(ixy0 + iw0);
-      vec4 ixy01 = permute(ixy0 + iw1);
-      vec4 ixy10 = permute(ixy1 + iw0);
-      vec4 ixy11 = permute(ixy1 + iw1);
-    
-      vec4 gx00 = ixy00 / 7.0;
-      vec4 gy00 = floor(gx00) / 7.0;
-      vec4 gz00 = floor(gy00) / 6.0;
-      gx00 = fract(gx00) - 0.5;
-      gy00 = fract(gy00) - 0.5;
-      gz00 = fract(gz00) - 0.5;
-      vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
-      vec4 sw00 = step(gw00, vec4(0.0));
-      gx00 -= sw00 * (step(0.0, gx00) - 0.5);
-      gy00 -= sw00 * (step(0.0, gy00) - 0.5);
-    
-      vec4 gx01 = ixy01 / 7.0;
-      vec4 gy01 = floor(gx01) / 7.0;
-      vec4 gz01 = floor(gy01) / 6.0;
-      gx01 = fract(gx01) - 0.5;
-      gy01 = fract(gy01) - 0.5;
-      gz01 = fract(gz01) - 0.5;
-      vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
-      vec4 sw01 = step(gw01, vec4(0.0));
-      gx01 -= sw01 * (step(0.0, gx01) - 0.5);
-      gy01 -= sw01 * (step(0.0, gy01) - 0.5);
-    
-      vec4 gx10 = ixy10 / 7.0;
-      vec4 gy10 = floor(gx10) / 7.0;
-      vec4 gz10 = floor(gy10) / 6.0;
-      gx10 = fract(gx10) - 0.5;
-      gy10 = fract(gy10) - 0.5;
-      gz10 = fract(gz10) - 0.5;
-      vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
-      vec4 sw10 = step(gw10, vec4(0.0));
-      gx10 -= sw10 * (step(0.0, gx10) - 0.5);
-      gy10 -= sw10 * (step(0.0, gy10) - 0.5);
-    
-      vec4 gx11 = ixy11 / 7.0;
-      vec4 gy11 = floor(gx11) / 7.0;
-      vec4 gz11 = floor(gy11) / 6.0;
-      gx11 = fract(gx11) - 0.5;
-      gy11 = fract(gy11) - 0.5;
-      gz11 = fract(gz11) - 0.5;
-      vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
-      vec4 sw11 = step(gw11, vec4(0.0));
-      gx11 -= sw11 * (step(0.0, gx11) - 0.5);
-      gy11 -= sw11 * (step(0.0, gy11) - 0.5);
-    
-      vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
-      vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
-      vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
-      vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
-      vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
-      vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
-      vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
-      vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
-      vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
-      vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
-      vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
-      vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
-      vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
-      vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
-      vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
-      vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
-    
-      vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
-      g0000 *= norm00.x;
-      g0100 *= norm00.y;
-      g1000 *= norm00.z;
-      g1100 *= norm00.w;
-    
-      vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
-      g0001 *= norm01.x;
-      g0101 *= norm01.y;
-      g1001 *= norm01.z;
-      g1101 *= norm01.w;
-    
-      vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
-      g0010 *= norm10.x;
-      g0110 *= norm10.y;
-      g1010 *= norm10.z;
-      g1110 *= norm10.w;
-    
-      vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
-      g0011 *= norm11.x;
-      g0111 *= norm11.y;
-      g1011 *= norm11.z;
-      g1111 *= norm11.w;
-    
-      float n0000 = dot(g0000, Pf0);
-      float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
-      float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
-      float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
-      float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
-      float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
-      float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
-      float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
-      float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
-      float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
-      float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
-      float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
-      float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
-      float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
-      float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
-      float n1111 = dot(g1111, Pf1);
-    
-      vec4 fade_xyzw = fade(Pf0);
-      vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
-      vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
-      vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
-      vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
-      float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
-      return 2.2 * n_xyzw;
-    }
-  
-    varying vec2 vUv;
-    varying vec3 vPosition;
-    uniform float uTime;
-  
-    // 6 lyers of noise
-  
-    float fbm(vec4 p){
-      float sum = 0.;
-      float amp = 1.;
-      float scale = 1.;
-      for(int i = 0; i < 6; i++){
-          sum+=cnoise(p*scale)*amp;
-          p.w += 100.;
-          amp*=0.9;
-          scale *= 2.;
-      }
-      return sum;
-    }
-      
-      void main(){
-  
-          vec4 p = vec4(vPosition*3.,uTime*0.05);
-  
-          float noisy = fbm(p);
-  
-          vec4 p1 = vec4(vPosition*2.,uTime*10.);
-          float spots = max(cnoise(p1),0.);
-  
-          gl_FragColor = vec4(noisy);
-          gl_FragColor *= mix(1.,spots, 0.3);
-          gl_FragColor *= vec4(1.,0.3,0.,1.);
-      }`,
-  });
-  //const perlinSphereMesh = new THREE.Mesh(perlinSphere, perlinSphereMat);
-
-  //scene.add(sphereMesh);
-  //scene.add(perlinSphereMesh);
-  //const scene1 = useRef();
-  //const scene2 = useRef();
-  //const cubeCamera1 = useRef();
-  /*const cubeRenderTarget1 = new THREE.WebGLRenderTarget(256, {
-    format: THREE.RGBAFormat,
-    generateMipMaps: true,
-    minFilter: THREE.LinearMipMapLinearFilter,
-    encoding: THREE.sRGBEncoding,
-  });
-  const cubeCamera = useCubeCamera(256, 0.1, 1000);*/
-  const cube = new THREE.CubeCamera();
-  scene.add(cube);
-  const ref = useRef();
-  const ref1 = useRef();
-  const tmpRef = useRef();
-  useFrame(({ clock, gl }) => {
-    perlinSphereMat.uniforms.uTime = clock.getElapsedTime();
-    console.log(perlinSphereMat.uniforms.uTime);
-    //console.log(gl);
-    gl.render(scene, camera);
-    time.current = clock.getElapsedTime();
-    //console.log(time.current);
-    ref.current.uTime = clock.getElapsedTime();
-    ref1.current.uTime = clock.getElapsedTime();
-    //gl.render(scene, camera);
-    //console.log(tmpRef);
-    ref1.current.uPerlin = tmpRef.current;
-
-    //cubeCamera.camera.position.copy(sunPerlinMesh.current.position);
-    //cubeCamera.camera.update(renderer, scene);
-    //gl.render(scene1, camera);
-    //console.log(camera);
-    //console.log(ref1.current);
-  });
-  return (
-    <>
-      <CubeCamera>
-        {(texture) => {
-          //tmpRef.current = texture;
-        }}
-      </CubeCamera>
-      <mesh ref={sunMesh} position={[0, 0, 0]}>
-        <sphereGeometry args={[1.3, 30, 30]} />
-        <sunShaderMaterial ref={ref1} />
-      </mesh>
-
-      <mesh ref={sunPerlinMesh} position={[0, 0, 0]}>
-        <sphereGeometry args={[1.4, 30, 30]} />
-        <sunPerlinMaterial ref={ref} />
-      </mesh>
-    </>
-  );
-};
-
-const SunScene = () => {
-  return (
-    <Canvas style={{ backgroundColor: "white" }}>
-      <Suspense fallback={null}>
-        <Sun />
-        <OrbitControls enablePan={false} />
-      </Suspense>
-    </Canvas>
-  );
-};
-
-export default SunScene;

vite.config.js

@@ -5,4 +5,5 @@ import glsl from "vite-plugin-glsl";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), glsl()],
+  publicDir: 'public'
 });