3 changed files with 45 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -7,11 +7,15 @@
    <title>Space</title>
 </head>
 <body>
+    <canvas id="bg"></canvas>
    <main>
+        <header>
+            <h1>„Jedes Lebewesen ist ein Rädchen im Getriebe des Universums. Obwohl scheinbar nur seine unmittelbare Umgebung betroffen ist, erstreckt sich der Einflussbereich jedes Lebewesens über eine unendliche Distanz.“ - Nikola Tesla
+            </h1>
+        </header>
    <section>
-        <button type="button" id="steuerungOrbitalButton">Steuerung aktivieren!</button>
+        <p>Moin!</p>
        <a href="https://www.solarsystemscope.com/textures/">Texturen von https://www.solarsystemscope.com/textures/</a>
-    <canvas id="bg"></canvas>
    </section>

    </main>
--- a/main.js
+++ b/main.js
@ -1,6 +1,8 @@
 /**
 * Texturen von https://www.solarsystemscope.com/textures/
 */
+
+
 import * as THREE from '/website/node_modules/three/build/three.module.js';
 import * as EARTH from '/website/earth/earth.js';
 import * as VENUS from '/website/venus/venus.js';
@ -12,10 +14,12 @@ import * as MOON from '/website/moon/moon.js';
 import * as URANUS from '/website/uranus/uranus.js';
 import { OrbitControls } from '/website/node_modules/three/examples/jsm/controls/OrbitControls.js';

+
 // Die Szenerie erstellen
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

+
 const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
 });
@ -23,6 +27,8 @@ const renderer = new THREE.WebGLRenderer({
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);

+
+
 var cameraX = 200;
 var cameraY = 100;
 var cameraZ = 100;
@ -37,6 +43,7 @@ const material = new THREE.MeshBasicMaterial({ map: sunTexture });
 const sun = new THREE.Mesh( sunSphere, material );

 // Mittelpunkte fuer die Planeten festlegen
+// Offentsichtlicherweise um die Sonne
 const pivotEARTH = new THREE.Object3D();
 const pivotVENUS = new THREE.Object3D();
 const pivotMERKUR = new THREE.Object3D();
@ -44,9 +51,8 @@ const pivotMARS = new THREE.Object3D();
 const pivotJUPITER = new THREE.Object3D();
 const pivotSATURN = new THREE.Object3D();
 const pivotURANUS = new THREE.Object3D();
-//const pivotCamera = new THREE.Object3D();
+const pivotCamera = new THREE.Object3D();

-//Planeten der Sonne hinzufügen
 scene.add(pivotEARTH);
 scene.add(pivotVENUS);
 scene.add(pivotMERKUR);
@ -54,7 +60,7 @@ scene.add(pivotMARS);
 scene.add(pivotJUPITER);
 scene.add(pivotSATURN);
 scene.add(pivotURANUS);
-//scene.add(pivotCamera);
+scene.add(pivotCamera);

 pivotEARTH.add(EARTH.earth);
 pivotVENUS.add(VENUS.venus);
@ -63,6 +69,8 @@ pivotMARS.add(MARS.mars);
 pivotJUPITER.add(JUPITER.jupiter);
 pivotSATURN.add(SATURN.saturn);
 pivotURANUS.add(URANUS.uranus);
+pivotURANUS.add(camera);
+

 // Den Mond hinzufügen
 EARTH.pivot.add(MOON.moon);
@ -70,8 +78,9 @@ EARTH.pivot.add(MOON.moon);
 scene.add( sun );


-// Licht
+// licht
 const pointLight = new THREE.PointLight(0xffffff);
+//pointLight.position.set(5,5,5);
 const ambientLight = new THREE.PointLight(0xffffff);

 //Steuerung & Kamera
@ -104,6 +113,7 @@ scene.add(pointLight);
 //scene.add(gridHelper);
 scene.add(ambientLight);

+
 renderer.render( scene, camera );

 /**
@ -131,8 +141,15 @@ function animate() {
    pivotURANUS.rotation.y += 0.005;

   
+    cameraX += 0.000001;  
+    cameraZ += 0.000001;  
+    camera.position.setZ(cameraZ);
+    camera.position.setX(cameraX);
+    camera.position.setY(cameraY);
+
    controls.update();
    renderer.render( scene, camera );
 }

 animate();
+
--- a/style.css
+++ b/style.css
@ -1 +1,17 @@
+canvas {
+    position:fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+}

+main {
+    width: 100% !important;
+    height: 100% !important;
+    position: absolute !important;
+    z-index: 99 !important;
+    color: white !important;
+}
+
+a {
+    color:white !important;
+}