Merge pull request #1 from denismhz/Deleting-everything

Deleting everything
2025-11-09 16:16:22 +01:00 · 2023-08-18 21:00:35 +00:00 · 2023-08-18 21:00:35 +00:00 · 2ea93e78e1
parent 81fc729ca6 d8e6fb5316
commit 2ea93e78e1
95 changed files with 11755 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,15 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
--- a/img/4k-ga95967816_1920.jpg
+++ b/img/4k-ga95967816_1920.jpg
--- a/img/back.png
+++ b/img/back.png
--- a/img/bottom.png
+++ b/img/bottom.png
--- a/img/cubemap.png
+++ b/img/cubemap.png
--- a/img/earth/6k_earth_clouds.jpg
+++ b/img/earth/6k_earth_clouds.jpg
--- a/img/earth/6k_earth_daymap.jpg
+++ b/img/earth/6k_earth_daymap.jpg
--- a/img/earth/6k_earth_nightmap.jpg
+++ b/img/earth/6k_earth_nightmap.jpg
--- a/img/earth/6k_earth_normal_map.jpg
+++ b/img/earth/6k_earth_normal_map.jpg
--- a/img/earth/6k_earth_specular_map.jpg
+++ b/img/earth/6k_earth_specular_map.jpg
--- a/img/earth/8k_earth_clouds.jpg
+++ b/img/earth/8k_earth_clouds.jpg
--- a/img/earth/8k_earth_nightmap.jpg
+++ b/img/earth/8k_earth_nightmap.jpg
--- a/img/earth/8k_earth_normal_map.jpg
+++ b/img/earth/8k_earth_normal_map.jpg
--- a/img/earth/8k_earth_normal_map.tif
+++ b/img/earth/8k_earth_normal_map.tif
--- a/img/earth/8k_earth_specular_map.tif
+++ b/img/earth/8k_earth_specular_map.tif
--- a/img/earth/color.jpg
+++ b/img/earth/color.jpg
--- a/img/earth/earth_bump_1k.jpg
+++ b/img/earth/earth_bump_1k.jpg
--- a/img/earth/earth_clouds_color_1k.jpg
+++ b/img/earth/earth_clouds_color_1k.jpg
--- a/img/earth/earth_clouds_trans_1k.jpg
+++ b/img/earth/earth_clouds_trans_1k.jpg
--- a/img/earth/earth_night_uv_1k.jpg
+++ b/img/earth/earth_night_uv_1k.jpg
--- a/img/earth/earth_spec_1k.jpg
+++ b/img/earth/earth_spec_1k.jpg
--- a/img/earth/earth_uv.jpg
+++ b/img/earth/earth_uv.jpg
--- a/img/earth/earth_uv_10k.jpg
+++ b/img/earth/earth_uv_10k.jpg
--- a/img/earth/earth_uv_1k.jpg
+++ b/img/earth/earth_uv_1k.jpg
--- a/img/front.png
+++ b/img/front.png
--- a/img/jupiter/color.jpg
+++ b/img/jupiter/color.jpg
--- a/img/jupiter/jupiter2_1k.jpg
+++ b/img/jupiter/jupiter2_1k.jpg
--- a/img/jupiter/jupiter2_2k.jpg
+++ b/img/jupiter/jupiter2_2k.jpg
--- a/img/jupiter/jupiter2_6k.jp2
+++ b/img/jupiter/jupiter2_6k.jp2
--- a/img/left.png
+++ b/img/left.png
--- a/img/mars/color.jpg
+++ b/img/mars/color.jpg
--- a/img/mars/mars_1k_normal.jpg
+++ b/img/mars/mars_1k_normal.jpg
--- a/img/mars/mars_1k_topo.jpg
+++ b/img/mars/mars_1k_topo.jpg
--- a/img/mercury/color.jpg
+++ b/img/mercury/color.jpg
--- a/img/mercury/mercurybump.jpg
+++ b/img/mercury/mercurybump.jpg
--- a/img/moon/moonbump1k.jpg
+++ b/img/moon/moonbump1k.jpg
--- a/img/moon/moonbump2k.jpg
+++ b/img/moon/moonbump2k.jpg
--- a/img/moon/moonbump4k.jpg
+++ b/img/moon/moonbump4k.jpg
--- a/img/moon/moonmap1k.jpg
+++ b/img/moon/moonmap1k.jpg
--- a/img/moon/moonmap2k.jpg
+++ b/img/moon/moonmap2k.jpg
--- a/img/moon/moonmap4k.jpg
+++ b/img/moon/moonmap4k.jpg
--- a/img/neptune/color.jpg
+++ b/img/neptune/color.jpg
--- a/img/pluto/.~lock.8_Krankenhausmanagement_final_vertont.pptx#
+++ b/img/pluto/.~lock.8_Krankenhausmanagement_final_vertont.pptx#
@ -0,0 +1 @@
+,denis,arch,06.12.2022 09:42,file:///home/denis/.config/libreoffice/4;
--- a/img/pluto/8_Krankenhausmanagement_final_vertont.pptx
+++ b/img/pluto/8_Krankenhausmanagement_final_vertont.pptx
--- a/img/pluto/color.jpg
+++ b/img/pluto/color.jpg
--- a/img/pluto/plutobump1k.jpg
+++ b/img/pluto/plutobump1k.jpg
--- a/img/pluto/plutobump2k.jpg
+++ b/img/pluto/plutobump2k.jpg
--- a/img/pluto/plutomap1k.jpg
+++ b/img/pluto/plutomap1k.jpg
--- a/img/right.png
+++ b/img/right.png
--- a/img/saturn/color.jpg
+++ b/img/saturn/color.jpg
--- a/img/saturn/color_ring.jpg
+++ b/img/saturn/color_ring.jpg
--- a/img/saturn/saturnringpattern.gif
+++ b/img/saturn/saturnringpattern.gif
--- a/img/skybox.zip
+++ b/img/skybox.zip
--- a/img/skybox/back.png
+++ b/img/skybox/back.png
--- a/img/skybox/bottom.png
+++ b/img/skybox/bottom.png
--- a/img/skybox/cubemap.png
+++ b/img/skybox/cubemap.png
--- a/img/skybox/front.png
+++ b/img/skybox/front.png
--- a/img/skybox/left.png
+++ b/img/skybox/left.png
--- a/img/skybox/right.png
+++ b/img/skybox/right.png
--- a/img/skybox/top.png
+++ b/img/skybox/top.png
--- a/img/sun/sun_uv.jpg
+++ b/img/sun/sun_uv.jpg
--- a/img/top.png
+++ b/img/top.png
--- a/img/uranus/color.jpg
+++ b/img/uranus/color.jpg
--- a/img/uranus/uranus_rings.jpg
+++ b/img/uranus/uranus_rings.jpg
--- a/img/uranus/uranusringtrans.gif
+++ b/img/uranus/uranusringtrans.gif
--- a/img/venus/color.jpg
+++ b/img/venus/color.jpg
--- a/img/venus/venusbump.jpg
+++ b/img/venus/venusbump.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sol</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/App.jsx"></script>
+  </body>
+</html>
--- a/nbody.js
+++ b/nbody.js
@ -0,0 +1,379 @@
+import * as THREE from "three";
+import { earthMesh, earthGroup } from "./js/earth/earth_mesh.js";
+import { sunMesh, sunGroup } from "./js/sun/sun_mesh.js";
+import { venusMesh, venusGroup } from "./js/venus/venus.js";
+import { mercuryMesh, mercuryGroup } from "./js/mercury/mercury.js";
+import { marsMesh, marsGroup } from "./js/mars/mars.js";
+import { saturnMesh, saturnGroup } from "./js/saturn/saturn.js";
+import { jupiterMesh, jupiterGroup } from "./js/jupiter/jupiter.js";
+import { uranusMesh, uranusGroup } from "./js/uranus/uranus.js";
+import { neptuneMesh, neptuneGroup } from "./js/neptune/neptune.js";
+import { plutoMesh, plutoGroup } from "./js/pluto/pluto.js";
+import skybox from "./js/skybox/skybox.js";
+import { ArcballControls } from "three/addons/controls/ArcballControls";
+import { OrbitControls } from "three/addons/controls/OrbitControls";
+import { BufferAttribute, BufferGeometryLoader, Color, Vector3 } from "three";
+import axios from "axios";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
+import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
+import { FXAAShader } from "three/addons/shaders/FXAAShader.js";
+import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js";
+import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
+import { PointLight } from "three";
+//import { data } from "./orbitcalculations.js";
+
+var objectsToOutline = [];
+
+let selectedObjects = [];
+
+var distanceScaleFactor = 10000000;
+
+document.body.style.margin = 0;
+
+var clock = new THREE.Clock();
+var delta = 0;
+
+const scene = new THREE.Scene();
+
+const axesHelper = new THREE.AxesHelper(1000);
+scene.add(axesHelper);
+
+scene.add(earthGroup);
+earthGroup.position.setX(149598262.0 / 1000);
+scene.add(sunGroup);
+scene.add(venusGroup);
+venusGroup.position.setX(108209475.0 / 1000);
+scene.add(mercuryGroup);
+mercuryGroup.position.setX(57909227.0 / 1000);
+scene.add(jupiterGroup);
+jupiterGroup.position.setX(778340821.0 / 1000);
+scene.add(saturnGroup);
+saturnGroup.position.setX(1426666422.0 / 1000);
+scene.add(uranusGroup);
+uranusGroup.position.setX(2870658186.0 / 1000);
+scene.add(marsGroup);
+marsGroup.position.setX(227943842.0 / 1000);
+scene.add(neptuneGroup);
+neptuneGroup.position.setX(4498396441.0 / 1000);
+
+scene.background = skybox;
+
+const camera = new THREE.PerspectiveCamera(
+  75,
+  innerWidth / innerHeight,
+  0.1,
+  1000000000
+);
+camera.position.z = 40;
+//camera.useQuaternion = true;
+
+const renderer = new THREE.WebGLRenderer({ alpha: false });
+renderer.setPixelRatio(devicePixelRatio);
+renderer.setSize(innerWidth, innerHeight);
+//renderer.setClearColor(0x222222, 0.0);
+renderer.shadowMap.enabled = true;
+document.body.appendChild(renderer.domElement);
+renderer.autoClear = false;
+//var arc = new ArcballControls(camera, renderer.domElement, scene);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+
+var planetGroups = [
+  mercuryGroup,
+  venusGroup,
+  earthGroup,
+  marsGroup,
+  jupiterGroup,
+  saturnGroup,
+  uranusGroup,
+  neptuneGroup,
+];
+
+var meshes = [];
+planetGroups.forEach((planet) => {
+  meshes.push(planet.children[0]);
+});
+console.log(meshes);
+
+const color = 0xffffff;
+const intensity = 1;
+const light = new THREE.AmbientLight(color, intensity);
+scene.add(light);
+
+var composer = new EffectComposer(renderer);
+
+var renderPass = new RenderPass(scene, camera);
+
+const bloomPass = new UnrealBloomPass(
+  new THREE.Vector2(window.innerWidth, window.innerHeight, 1.5, 0.4, 0.85)
+);
+
+bloomPass.threshold = 0;
+bloomPass.strength = 5;
+bloomPass.radius = 0;
+
+var outlinePass = new OutlinePass(
+  new THREE.Vector2(window.innerWidth, window.innerHeight),
+  scene,
+  camera
+);
+
+outlinePass.renderToScreen = true;
+composer.addPass(renderPass);
+composer.addPass(outlinePass);
+//composer.addPass(bloomPass);
+
+var effectFXAA = new ShaderPass(FXAAShader);
+effectFXAA.uniforms["resolution"].value.set(
+  1 / window.innerWidth,
+  1 / window.innerHeight
+);
+effectFXAA.renderToScreen = true;
+composer.addPass(effectFXAA);
+
+/*var effectFXAA = new ShaderPass(THREE.FXAAShader);
+effectFXAA.uniforms["resolution"].value.set(
+  1 / window.innerWidth,
+  1 / window.innerHeight
+);
+effectFXAA.renderToScreen = true;
+composer.addPass(effectFXAA);*/
+
+var params = {
+  edgeStrength: 10.0,
+  edgeGlow: 1.0,
+  edgeThickness: 1.0,
+  pulsePeriod: 0,
+  rotate: true,
+  usePatternTexture: false,
+};
+outlinePass.edgeStrength = params.edgeStrength;
+outlinePass.edgeGlow = params.edgeGlow;
+outlinePass.visibleEdgeColor.set(0xffffff);
+outlinePass.hiddenEdgeColor.set(0xffffff);
+
+const raycaster = new THREE.Raycaster();
+const pointer = new THREE.Vector2();
+/*const phongMaterial = new THREE.MeshPhongMaterial({
+  color: 0xffffff,
+  specular: 0x111111,
+  shininess: 5,
+});
+const test = new THREE.Mesh(
+  new THREE.SphereGeometry(6371.0, 50, 50),
+  phongMaterial
+);
+test.position.add(new THREE.Vector3(100000, 100000, 100000));
+scene.add(test);*/
+let lines = [];
+planetGroups.forEach((planet) => {
+  const lineGeometry = new THREE.BufferGeometry();
+  const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
+  const line = new THREE.Line(lineGeometry, lineMaterial);
+  lineGeometry.setAttribute(
+    "position",
+    new THREE.BufferAttribute(new Float32Array([]), 3)
+  );
+  lineGeometry.setAttribute(
+    "normal",
+    new THREE.BufferAttribute(new Float32Array([]), 3)
+  );
+  line.geometry.attributes.position.needsUpdate = true;
+  scene.add(line);
+  planet.userData["line"] = line;
+});
+console.log(lines);
+
+//renderer.shadowMap.enabled = true;
+//light.castShadow = true;
+//light.shadow.mapSize.width = 512;
+//light.shadow.mapSize.height = 512;
+//light.shadow.camera.near = 150;
+//light.shadow.camera.far = 350;
+
+var obj = null;
+function onPointerDown(event) {
+  // calculate pointer position in normalized device coordinates
+  // (-1 to +1) for both components
+
+  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
+  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+  raycaster.setFromCamera(pointer, camera);
+  // calculate objects intersecting the picking ray
+  const intersects = raycaster.intersectObjects(planetGroups);
+  for (let i = 0; i < intersects.length; i++) {
+    obj = intersects[i].object.parent;
+  }
+  if (event.button == 0 && obj) {
+    controls.target.copy(obj.position);
+    controls.minDistance = obj.children[0].geometry.boundingSphere.radius * 1.5;
+    controls.maxDistance = obj.children[0].geometry.boundingSphere.radius * 10;
+    controls.update();
+  }
+  if (event.button == 2) {
+    obj = null;
+    controls.minDistance = 1;
+    controls.maxDistance = Infinity;
+  }
+}
+
+function onPointerMove(event) {
+  // calculate pointer position in normalized device coordinates
+  // (-1 to +1) for both components
+
+  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
+  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+  // calculate objects intersecting the picking ray
+  raycaster.setFromCamera(pointer, camera);
+
+  const intersects = raycaster.intersectObject(scene, true);
+
+  function addSelectedObject(object) {
+    selectedObjects = [];
+    selectedObjects.push(object);
+  }
+
+  if (intersects.length > 0) {
+    const selectedObject = intersects[0].object;
+    addSelectedObject(selectedObject);
+    outlinePass.selectedObjects = selectedObjects;
+  } else {
+    outlinePass.selectedObjects = [];
+  }
+}
+
+var url = "http://127.0.0.1:8000/duration";
+
+var data;
+setInterval(
+  await axios.get(url).then((res) => {
+    data = res.data;
+    console.log(data);
+  }),
+  10000
+);
+planetGroups.forEach((planet) => {
+  planet.userData["positions"] = data[planet.userData.id];
+});
+function calculateOrbitLength() {
+  planetGroups.forEach((planet) => {
+    let length = 0;
+    if (planet.name != "Sun") {
+      for (let i = 0; i < planet.userData.positions.length - 1; i += 2) {
+        const dx = Math.abs(
+          planet.userData.positions[i + 1].x - planet.userData.positions[i].x
+        );
+        const dy = Math.abs(
+          planet.userData.positions[i + 1].y - planet.userData.positions[i].y
+        );
+        const dz = Math.abs(
+          planet.userData.positions[i + 1].z - planet.userData.positions[i].z
+        );
+        var segment = Math.sqrt(dx * dx + dy * dy + dz * dz);
+        //console.log(
+        //  `dx: ${dx}, dy: ${dy}, dz: ${dz}, segmentLength: ${segment}`
+        //);
+        length += segment;
+      }
+    }
+    planet.userData["orbitLength"] = length / distanceScaleFactor;
+    console.log(
+      planet.userData.orbitLength * distanceScaleFactor +
+        " " +
+        planet.userData.id
+    );
+  });
+}
+calculateOrbitLength();
+
+function cutPath(line, maxLength) {
+  const positions = line.geometry.attributes.position.array;
+  var currLength = getLength(line);
+  if (currLength > maxLength) {
+    line.geometry.attributes.position.array = positions.slice(3);
+    line.geometry.setDrawRange(
+      0,
+      line.geometry.attributes.position.array.length / 3
+    );
+  }
+}
+
+function getLength(line, maxLength) {
+  var length = 0;
+  const positions = line.geometry.attributes.position.array;
+  for (let i = 0; i < positions.length - 6; i += 3) {
+    const dx = positions[i + 3] - positions[i];
+    const dy = positions[i + 4] - positions[i + 1];
+    const dz = positions[i + 5] - positions[i + 2];
+    length += Math.sqrt(dx * dx + dy * dy + dz * dz);
+  }
+  return length;
+}
+
+var asdf = 0;
+var last = 0;
+function animate(now) {
+  window.requestAnimationFrame(animate);
+  renderer.render(scene, camera);
+  controls.update();
+  composer.render();
+
+  if (obj) {
+    controls.target.copy(obj.position);
+  }
+
+  planetGroups.forEach((planet) => {
+    if (false) {
+      if (planet.name != "Sun") {
+        planet.position.set(
+          Number(data[planet.userData.id].position.x / distanceScaleFactor),
+          Number(data[planet.userData.id].position.y / distanceScaleFactor),
+          Number(data[planet.userData.id].position.z / distanceScaleFactor)
+        );
+      }
+    }
+    if (planet.name != "Sun" && asdf < data["199"].length) {
+      if (true) {
+        const vertices =
+          planet.userData.line.geometry.attributes.position.array;
+        const newVertices = new Float32Array(vertices.length + 3);
+        newVertices.set(vertices);
+        newVertices.set(
+          [
+            Number(data[planet.userData.id][asdf].x / distanceScaleFactor),
+            Number(data[planet.userData.id][asdf].y / distanceScaleFactor),
+            Number(data[planet.userData.id][asdf].z / distanceScaleFactor),
+          ],
+          vertices.length
+        );
+        planet.userData.line.geometry.setAttribute(
+          "position",
+          new THREE.BufferAttribute(newVertices, 3)
+        );
+        planet.userData["pathLength"] = getLength(planet.userData.line, 10);
+        cutPath(planet.userData.line, planet.userData.orbitLength * 0.5);
+      }
+      planet.position.set(
+        Number(data[planet.userData.id][asdf].x / distanceScaleFactor),
+        Number(data[planet.userData.id][asdf].y / distanceScaleFactor),
+        Number(data[planet.userData.id][asdf].z / distanceScaleFactor)
+      );
+    }
+  });
+  performance.now();
+  earthGroup.children[0].rotation.y += 0.0015;
+  earthGroup.children[1].rotation.y += 0.0025;
+  earthGroup.children[3].position.y =
+    (-Math.cos(0.001 * performance.now() * 1) * 384000) / 200000;
+  earthGroup.children[3].position.z =
+    (-Math.sin(0.001 * performance.now() * 1) * 384000) / 200000;
+  asdf++;
+}
+animate();
+
+window.addEventListener("pointermove", onPointerMove);
+window.addEventListener("pointerdown", onPointerDown);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,42 @@
+{
+  "name": "solar-system",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.66.1",
+    "@react-three/fiber": "^8.13.0",
+    "@react-three/postprocessing": "^2.10.0",
+    "@tweenjs/tween.js": "^18.6.4",
+    "axios": "^1.4.0",
+    "babel-plugin": "^1.0.7",
+    "glsl": "^0.0.1",
+    "glsl-noise": "^0.0.0",
+    "glslify": "^7.1.1",
+    "leva": "^0.9.34",
+    "multer": "^1.4.5-lts.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
+    "react-router": "^6.11.0",
+    "react-router-dom": "^6.11.0",
+    "three": "^0.152.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "vite": "^4.3.2",
+    "vite-plugin-glsl": "^1.1.2"
+  }
+}
--- a/public/default.jpg
+++ b/public/default.jpg
--- a/public/earth.jpg
+++ b/public/earth.jpg
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/jupiter.jpg
+++ b/public/jupiter.jpg
--- a/public/mars.jpg
+++ b/public/mars.jpg
--- a/public/mercury.jpg
+++ b/public/mercury.jpg
--- a/public/neptune.jpg
+++ b/public/neptune.jpg
--- a/public/saturn.jpg
+++ b/public/saturn.jpg
--- a/public/uranus.jpg
+++ b/public/uranus.jpg
--- a/public/venus.jpg
+++ b/public/venus.jpg
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,149 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root,
+#canvas-container {
+  width: 100%;
+  height: 100%;
+  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;
+  top:95%;
+  height: 20px;
+  width: 100%;
+}
+
+.dateSpan {
+  
+  font-size: 1.4em;
+}
+
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,7 @@
+import { createRoot } from "react-dom/client";
+import App from "./Main";
+import "../src/App.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(<App />);
--- a/src/CustomCamera.jsx
+++ b/src/CustomCamera.jsx
@ -0,0 +1,219 @@
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import {
+  OrbitControls,
+  PositionPoint,
+  TrackballControls,
+  ArcballControls,
+} from "@react-three/drei";
+import React, {
+  Suspense,
+  useRef,
+  createContext,
+  memo,
+  useState,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+} from "react";
+import * as THREE from "three";
+
+import { MyContext } from "./SolarSystemMain.jsx";
+
+export function CustomCamera(props) {
+  const { customData } = useContext(MyContext);
+  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);
+    handleZoom(delta);
+  };
+
+  const handleMouseMove = (event) => {
+    if (mouseDown.current && rotate.current) {
+      _mouseEnd.current = new THREE.Vector2(event.clientX, event.clientY);
+      const deltaX = -event.movementX;
+      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 * 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)
+        .multiply(quaternionZ);
+
+      // Apply the rotation to the camera quaternion
+      if (camGroup && camGroup.current.quaternion) {
+        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);
+      }
+    }
+  };
+
+  const handleMouseDown = (event) => {
+    _mouseStart.current = new THREE.Vector2(event.clientX, event.clientY);
+    mouseDown.current = true;
+    mouseUp.current = false;
+  };
+
+  const handleMouseUp = (event) => {
+    mouseDown.current = false;
+    mouseUp.current = true;
+  };
+
+  const handleZoom = (delta) => {
+    let zoomSpeed = 0.03;
+    if (camGroup && cameraRef) {
+      zoomSpeed *= cameraRef.current.position.distanceTo(
+        camGroup.current.position
+      );
+    }
+    function newDistance(prevDistance) {
+      const newDistance = prevDistance + delta * zoomSpeed;
+      return Math.max(dist.current, newDistance); // Adjust the minimum distance as needed
+    }
+    distance.current = newDistance(distance.current);
+  };
+  customData.current["handleZoom"] = handleZoom;
+
+  const handlePosition = (pos, obj) => {
+    if (currObj) {
+      currObj.remove(camGroup.current);
+      setGlobalQuaternion(new THREE.Quaternion());
+    }
+
+    setCurrObj(obj);
+    setAnimate(true);
+  };
+  customData.current["handlePosition"] = handlePosition;
+
+  const cameraRef = useRef();
+  const set = useThree(({ set }) => set);
+  const size = useThree(({ size }) => size);
+  const camGroup = useRef();
+
+  useLayoutEffect(() => {
+    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));
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("wheel", handleMouseWheel);
+  }, [size, props]);
+
+  useLayoutEffect(() => {
+    set({ camera: cameraRef.current });
+  });
+
+  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(
+          0,
+          0,
+          currObj.children[1].geometry.boundingSphere.radius * 2.5
+        ),
+        lerpedilerp.current
+      );
+
+     
+
+      cameraRef.current.lookAt(currObj.position);
+      camGroup.current.quaternion.copy(globalQuaternion);
+
+      rotate.current = false;
+      lerpedilerp.current *= 1.08;
+      //console.log(camGroup.current.position.distanceTo(currObj.position));
+
+      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) {
+      
+    }
+    if (zoom && cameraRef.current) {
+      cameraRef.current.position.copy(
+        new THREE.Vector3(0, 0, distance.current)
+      );
+    }
+  });
+
+  return (
+    <group ref={camGroup} position={[0, 0, 0]}>
+      <perspectiveCamera
+        ref={cameraRef}
+        position={[0, 0, 0]}
+        fov={75}
+        near={0.1}
+        far={1000000}
+      />
+    </group>
+  );
+}
--- a/src/Main.jsx
+++ b/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;
--- a/src/SharedPlanetState.jsx
+++ b/src/SharedPlanetState.jsx
@ -0,0 +1,230 @@
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import { useState, useRef, createContext, useContext } from "react";
+import * as THREE from "three";
+import { MyContext } from "./SolarSystemMain.jsx";
+import Planet from "./planets/planet.jsx";
+import Sun from "./planets/sun.jsx";
+import PropTypes from "prop-types";
+
+export const PlanetOverlayContext = createContext();
+
+export const SharedPlanetState = ({ planetData, linePos }) => {
+  const distanceScaleFactor = 1000000;
+  const { customData } = useContext(MyContext);
+
+  const [loading, setLoading] = useState(true);
+  const [positions, setPositions] = useState(null);
+  const [realPos, setRealPos] = useState(null);
+  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" && pathVis == "visible") {
+      setNameVis("hidden");
+    } else if (nameVis == "hidden" && iconVis == "visible" && pathVis == "visible") {
+      setIconVis("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 updateSpeed = (newSpeed) => {
+    setSpeed(newSpeed);
+  };
+  customData.current["updateSpeed"] = updateSpeed;
+
+  //get position data and reset if necessary
+  const dateTime = useRef(new Date(Date.now()));
+
+  function updatePlanetPosition(group, posArr, lineArr, realPos) {
+    if (
+      !loading &&
+      planetPositionIndex.current < posArr.length &&
+      speed != -1
+    ) {
+      group.current.position.set(
+        Number(
+          posArr[planetPositionIndex.current].position.x / distanceScaleFactor
+        ),
+        Number(
+          posArr[planetPositionIndex.current].position.y / distanceScaleFactor
+        ),
+        Number(
+          posArr[planetPositionIndex.current].position.z / distanceScaleFactor
+        )
+      );
+
+      //realtime
+
+      customData.current.setDate(
+        new Date(positions[199][planetPositionIndex.current].date)
+      );
+      if (speed > 0) {
+        lineArr.current.push(
+          new THREE.Vector3(
+            Number(
+              posArr[planetPositionIndex.current].position.x /
+                distanceScaleFactor
+            ),
+            Number(
+              posArr[planetPositionIndex.current].position.y /
+                distanceScaleFactor
+            ),
+            Number(
+              posArr[planetPositionIndex.current].position.z /
+                distanceScaleFactor
+            )
+          )
+        );
+      }
+    }
+    //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)
+      );
+    }
+  }
+
+  useFrame(({ clock }) => {
+    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;
+    }
+  });
+
+  const getAllPositions = () => {
+    if (positions && positions[199].length > 0 && speed > 0) {
+      dateTime.current = new Date(
+        positions[199][positions[199].length - 1].date
+      ).toUTCString();
+    }
+
+    const fetchData = async () => {
+      fetch(
+        `http://192.168.1.136:8000/duration` + `?date=${dateTime.current}`
+      ).then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `This is an HTTP error: The status is ${response.status}`
+          );
+        }
+        response
+          .json()
+          .then((data) => {
+            if (!positions) {
+              setPositions(data);
+            } else {
+              let obj = new Object();
+              for (let key in positions) {
+                obj[key] = positions[key].concat(data[key]);
+              }
+              setPositions(obj);
+            }
+          })
+          .catch(() => {})
+          .finally(() => {
+            setLoading(false);
+          });
+      });
+    };
+    fetchData();
+  };
+
+  const getRealTimePos = () => {
+    const fetchData = async () => {
+      fetch(`http://192.168.1.136: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, pathVis }}>
+        {!loading && planets}
+        {loading && (
+          <Html>
+            <h1 style={{color:"white"}}>Loading...</h1>
+          </Html>
+        )}
+        <Sun />
+      </PlanetOverlayContext.Provider>
+    </>
+  );
+};
+
+SharedPlanetState.propTypes = {
+  planetData: PropTypes.array,
+  linePos: PropTypes.object
+};
--- a/src/Skybox.jsx
+++ b/src/Skybox.jsx
@ -0,0 +1,18 @@
+import { useThree } from "@react-three/fiber";
+
+import * as THREE from "three";
+export const Skybox = () => {
+  const { scene } = useThree();
+  const loader = new THREE.CubeTextureLoader();
+  const box = loader.load([
+    "../img/front.png",
+    "../img/back.png",
+    "../img/top.png",
+    "../img/bottom.png",
+    "../img/left.png",
+    "../img/right.png",
+  ]);
+  scene.background = box;
+
+  return <></>;
+};
--- a/src/SolarSystemMain.jsx
+++ b/src/SolarSystemMain.jsx
@ -0,0 +1,108 @@
+import { Canvas } from "@react-three/fiber";
+import {
+  Suspense,
+  useRef,
+  createContext,
+  useLayoutEffect,
+  useState,
+  useEffect,
+} from "react";
+
+import { ScreenOverlay } from "./planets/omnioverlay.jsx";
+import { SharedPlanetState } from "./SharedPlanetState.jsx";
+import { Skybox } from "./Skybox.jsx";
+import { CustomCamera } from "./CustomCamera.jsx";
+
+export const MyContext = createContext();
+
+const SolarSystemScene = () => {
+  const controls = useRef();
+  let customData = useRef({});
+  const [pinfo, setPinfo] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [linePos, setLinePos] = useState(null);
+
+  useLayoutEffect(() => {
+    const fetchPlanetInfo = async () => {
+      fetch(`http://192.168.1.136:8000/planetInfo`).then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `This is an HTTP error: The status is ${response.status}`
+          );
+        }
+        setLoading(true);
+        response
+          .json()
+          .then((data) => {
+            setPinfo(data);
+          })
+          .catch(() => {
+            setPinfo(null);
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      });
+    };
+    fetchPlanetInfo();
+    const fetchLinePos = async () => {
+      fetch(`http://192.168.1.136:8000/duration/line`).then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `This is an HTTP error: The status is ${response.status}`
+          );
+        }
+        setLoading(true);
+        response
+          .json()
+          .then((data) => {
+            
+            setLinePos(data);
+          })
+          .catch(() => {
+            setLinePos(null)
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      });
+    };
+    //fetchLinePos();
+    fetchPlanetInfo();
+  }, []);
+
+  useEffect(() => {
+    //console.log(progress);
+  });
+
+  return (
+    <Suspense fallback={<div className="loadingScreen">Suspense</div>}>
+      {!loading && (
+        <>
+          <MyContext.Provider value={{ controls, customData }}>
+            <ScreenOverlay planetInfo={pinfo} />
+
+            {true && (
+              <Canvas
+                camera={{
+                  position: [0, 0, 100],
+                  fov: 75,
+                  near: 0.1,
+                  far: 10000000,
+                }}
+              >
+                {true && <CustomCamera />}
+                <Skybox />
+                <ambientLight intensity={0.025} />
+                <pointLight position={[0, 0, 0]} />
+                <SharedPlanetState planetData={pinfo} linePos={linePos}/>
+              </Canvas>
+            )}
+          </MyContext.Provider>
+        </>
+      )}
+    </Suspense>
+  );
+};
+
+export default SolarSystemScene;
--- a/src/planets/omnioverlay.jsx
+++ b/src/planets/omnioverlay.jsx
@ -0,0 +1,72 @@
+import { useContext, useState } from "react";
+import { PlanetInfo } from "./planetInfo.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(3);
+  };
+
+  const handleChange1 = () => {
+    customData.current.updateSpeed(8);
+  };
+
+  const handleChange2 = () => {
+    customData.current.updateSpeed(20);
+  };
+
+  const handleReset = () => {
+    customData.current.handleReset();
+  };
+
+  const handlePlanetOverlayVisibility = () => {
+    customData.current.handleVisibility();
+  };
+
+  return (
+    <>
+      <div className="btn-toolbar slidecontainer">
+        <div className="btn-group mr-2" role="group">
+          <button onClick={handleReset} className="btn btn-primary">
+            &lt;
+          </button>
+          <button onClick={handleChange} className="btn btn-primary">
+            II
+          </button>
+          <button onClick={handleChange0} className="btn btn-primary">
+            &gt;
+          </button>
+          <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
+            onClick={handlePlanetOverlayVisibility}
+            className="btn btn-primary"
+          >
+            O
+          </button>
+        </div>
+      </div>
+      <div className="date">
+        <span className="dateSpan" style={{ color: "white" }}>
+          {date && date.toUTCString()}
+        </span>
+      </div>
+      <PlanetInfo planetInfo={props.planetInfo} />
+    </>
+  );
+};
--- a/src/planets/path.jsx
+++ b/src/planets/path.jsx
@ -0,0 +1,128 @@
+import { useFrame } from "@react-three/fiber";
+import React, { useRef, useContext, useLayoutEffect, useState } from "react";
+import * as THREE from "three";
+import { PlanetOverlayContext } from "../SharedPlanetState";
+
+export const PlanetPath = ({
+  linePos,
+  color,
+  lineLength,
+  planet,
+}) => {
+  const lineref = useRef();
+  const lineArr = useRef([]);
+  const first = useRef(true);
+  const [loading, setLoading] = useState();
+  const { speed } = useContext(PlanetOverlayContext);
+  const [linePoss, setLinePoss] = useState(null);
+  const [second, setSecond] = useState(false);
+  const asd = useContext(PlanetOverlayContext);
+
+  //from chatgpt very nice :D
+  const cutPath = (path, maxLength) => {
+    let length = getLength(path);
+    while (length > maxLength && path.length >= 2) {
+      const firstPoint = path[0];
+      const secondPoint = path[1];
+      const segmentLength = firstPoint.distanceTo(secondPoint);
+      if (segmentLength > maxLength) {
+        // If the first segment is longer than the maximum length,
+        // split it into multiple segments of the maximum length.
+        const numSegments = Math.ceil(segmentLength / maxLength);
+        const segmentDirection = secondPoint
+          .clone()
+          .sub(firstPoint)
+          .normalize();
+        const segmentLength = segmentLength / numSegments;
+        const newPoints = [firstPoint];
+        for (let i = 1; i < numSegments; i++) {
+          const newPoint = firstPoint
+            .clone()
+            .add(segmentDirection.clone().multiplyScalar(segmentLength * i));
+          newPoints.push(newPoint);
+        }
+        newPoints.push(secondPoint);
+        path.splice(0, 2, ...newPoints);
+        length = getLength(path);
+      } else {
+        path.shift();
+        length -= segmentLength;
+      }
+    }
+  };
+
+  function getLength(arrV3) {
+    let sum = 0;
+    for (var i = 0; i < arrV3.length - 1; i += 2) {
+      sum += arrV3[i].distanceTo(arrV3[i + 1]);
+    }
+    return sum;
+  }
+
+  const distanceScaleFactor = 1000000;
+
+  useLayoutEffect(() => {
+    if (second && linePoss) {
+      linePoss.forEach((element) => {
+        element.position.x = element.position.x / distanceScaleFactor;
+        element.position.y = element.position.y / distanceScaleFactor;
+        element.position.z = element.position.z / distanceScaleFactor;
+        lineArr.current.push(
+          new THREE.Vector3(
+            element.position.x,
+            element.position.y,
+            element.position.z
+          )
+        );
+      });
+      
+
+      setSecond(false);
+    }
+    if(first.current){
+      const fetchLinePos = async () => {
+        fetch(
+          `http://192.168.1.136: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>
+    </>
+  );
+};
--- a/src/planets/planet.jsx
+++ b/src/planets/planet.jsx
@ -0,0 +1,62 @@
+import { useFrame, useLoader, useThree } from "@react-three/fiber";
+import { useRef, useLayoutEffect } from "react";
+import { TextureLoader } from "three/src/loaders/TextureLoader";
+import { PlanetOverlay } from "./planetOverlay";
+import { PlanetPath } from "./path";
+import PropTypes from "prop-types";
+
+const Planet = ({ planetData, setPosition, positions, realPos, linePos }) => {
+  const lineArr = useRef([]);
+
+  const colorMap = useLoader(
+    TextureLoader,
+    `../img/${planetData.name.toLowerCase()}/color.jpg`
+  );
+
+  useFrame(() => {
+    if (positions) setPosition(group, positions, lineArr, realPos);
+  });
+
+  useLayoutEffect(() => {
+    group.current.userData.name = planetData.name;
+    group.current.userData.nearOvOp = planetData.overlayVisibilityDistance;
+    group.current.userData.scolor = planetData.color;
+  });
+
+  useThree(() => {});
+
+  const group = useRef();
+
+  return (
+    <>
+      <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;
--- a/src/planets/planetInfo.jsx
+++ b/src/planets/planetInfo.jsx
@ -0,0 +1,79 @@
+import { useState, useEffect, useContext } from "react";
+import { MyContext } from "../SolarSystemMain";
+import PropTypes from "prop-types";
+
+export const PlanetInfo = (props) => {
+  const [visibility, setVisibility] = useState("hidden");
+  const { customData } = useContext(MyContext);
+  const [planetData, setPlanetData] = useState({ name: "Default" });
+
+  useEffect(() => {
+    const showInfo = (planet) => {
+      props.planetInfo.forEach((oplanet) => {
+        if (planet.name == oplanet.name) {
+          setPlanetData(oplanet);
+        }
+      });
+      setVisibility("visible");
+    };
+    if (showInfo) customData.current["showInfo"] = showInfo;
+  }, [customData, planetData, props.planetInfo]);
+
+  function closeInfo() {
+    setVisibility("hidden");
+  }
+
+  return (
+    <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
+};
--- a/src/planets/planetOverlay.jsx
+++ b/src/planets/planetOverlay.jsx
@ -0,0 +1,90 @@
+import { useFrame, useThree } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import React, { useState, useEffect, useContext } from "react";
+import * as THREE from "three";
+import { MyContext } from "../SolarSystemMain";
+import PropTypes from "prop-types";
+import { PlanetOverlayContext } from "../SharedPlanetState";
+
+export const PlanetOverlay = ({ planet }) => {
+  let [opacity, setOpacity] = useState(0);
+  let [minDistance, setMinDistance] = useState(0);
+  const { nameVis, iconVis } = useContext(PlanetOverlayContext);
+
+  let [scolor, setSColor] = useState("white");
+  const { camera } = useThree();
+  const [name, setName] = useState("Undefined");
+  const svgStyle = { height: "20px", width: "20px", stroke: scolor };
+  const { customData } = useContext(MyContext);
+
+  const handleClick = React.useCallback(
+    (event) => {
+      // prevent context menu from opening on right-click
+      event.preventDefault();
+      // native event
+      switch (event.nativeEvent.button) {
+        case 0:
+          customData.current.showInfo(planet.current.userData);
+          customData.current.handlePosition(
+            planet.current.position,
+            planet.current
+          );
+          break;
+        case 2:
+          break;
+      }
+    },
+    [planet, customData]
+  );
+
+  useEffect(() => {
+    setName(planet.current.userData.name);
+    setMinDistance(planet.current.userData.nearOvOp);
+    setSColor(planet.current.userData.scolor);
+  }, [planet, name, minDistance, customData, iconVis, nameVis]);
+
+  useFrame(() => {
+    let worldpos = new THREE.Vector3();
+    camera.getWorldPosition(worldpos);
+    var distance = worldpos.distanceTo(planet.current.position);
+    if (distance < minDistance) {
+      setOpacity(0);
+    } else {
+      setOpacity(1);
+    }
+  });
+
+  return (
+    <>
+      <Html
+        zIndexRange={[11, 0]}
+        className="overlay"
+        style={{ opacity: opacity }}
+      >
+        <div className="wrapper">
+          <span
+            className="icon"
+            onClick={handleClick}
+            onContextMenu={handleClick}
+            style={{ visibility: iconVis }}
+          >
+            <svg
+              onMouseEnter={() => setSColor("lightgrey")}
+              onMouseLeave={() => setSColor(planet.current.userData.scolor)}
+              style={svgStyle}
+            >
+              <circle cx="10" cy="10" r="9" strokeWidth="1" fill="none" />
+            </svg>
+          </span>
+          <span className="content" style={{ visibility: nameVis }}>
+            {name}
+          </span>
+        </div>
+      </Html>
+    </>
+  );
+};
+
+PlanetOverlay.propTypes = {
+  planet: PropTypes.object,
+};
--- a/src/planets/sun.jsx
+++ b/src/planets/sun.jsx
@ -0,0 +1,390 @@
+import {
+  Canvas,
+  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 { PlanetOverlay } from "./planetOverlay";
+
+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 = 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 = 1800;
+    group.current.userData.scolor = "white";
+  }, []);
+
+  const sunMesh = useRef();
+
+  return (
+    <>
+      <group ref={group}>
+        <PlanetOverlay planet={group} />
+        <mesh ref={sunPerlinMesh} position={[0, 0, 0]}>
+          <sphereGeometry args={[32, 50, 50]} />
+          <sunPerlinMaterial ref={ref} />
+        </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;
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import glsl from "vite-plugin-glsl";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), glsl()],
+  publicDir: 'public'
+});
				`@ -0,0 +1 @@`
				`,denis,arch,06.12.2022 09:42,file:///home/denis/.config/libreoffice/4;`