Camera bewegung eingefügt

index.html

@@ -13,6 +13,11 @@
             <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>
+        <p>Moin!</p>
+        <a href="https://www.solarsystemscope.com/textures/">Texturen von https://www.solarsystemscope.com/textures/</a>
+    </section>
+
     </main>
     <script type="module" src="main.js"></script>
 </body>

main.js

@@ -26,9 +26,15 @@ const renderer = new THREE.WebGLRenderer({
 
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
-camera.position.setZ(30);
-camera.position.setX(-200);
-camera.position.setY(30);
+
+
+
+var cameraX = 200;
+var cameraY = 100;
+var cameraZ = 100;
+camera.position.setZ(cameraZ);
+camera.position.setX(cameraX);
+camera.position.setY(cameraY);
 
 // Die Sonne
 const sunTexture = new THREE.TextureLoader().load('sun.jpg')
@@ -45,6 +51,7 @@ 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();
 
 scene.add(pivotEARTH);
 scene.add(pivotVENUS);
@@ -53,6 +60,7 @@ scene.add(pivotMARS);
 scene.add(pivotJUPITER);
 scene.add(pivotSATURN);
 scene.add(pivotURANUS);
+scene.add(pivotCamera);
 
 pivotEARTH.add(EARTH.earth);
 pivotVENUS.add(VENUS.venus);
@@ -61,9 +69,10 @@ pivotMARS.add(MARS.mars);
 pivotJUPITER.add(JUPITER.jupiter);
 pivotSATURN.add(SATURN.saturn);
 pivotURANUS.add(URANUS.uranus);
+pivotURANUS.add(camera);
 
 
-// Der Mond dreht sich sich um die erde.
+// Den Mond hinzufügen
 EARTH.pivot.add(MOON.moon);
 
 scene.add( sun );
@@ -104,10 +113,6 @@ scene.add(pointLight);
 //scene.add(gridHelper);
 scene.add(ambientLight);
 
-//Planeten hinzufuegen
-//scene.add(EARTH.earth)
-//scene.add(MOON.moon)
-
 
 renderer.render( scene, camera );
 
@@ -118,8 +123,6 @@ function animate() {
     requestAnimationFrame( animate );
     
     sun.rotation.x += 0.001;
-    //sun.rotation.y += 0.005;
-    //sun.rotation.z += 0.001;
     EARTH.rotation();
     MERKUR.rotation();
     VENUS.rotation();
@@ -131,15 +134,18 @@ function animate() {
     
     pivotEARTH.rotation.y += 0.005;
     pivotMERKUR.rotation.y -= 0.005;
-    pivotVENUS.rotation.x += 0.005;
-    pivotVENUS.rotation.y += 0.005;
     pivotVENUS.rotation.z += 0.005;
-    pivotMARS.rotation.x -= 0.005;
     pivotMARS.rotation.y -= 0.005;
-    pivotMARS.rotation.z -= 0.005;
     pivotJUPITER.rotation.z += 0.005;
-    pivotSATURN.rotation.z -= 0.005;
-    pivotURANUS.rotation.x += 0.005;
+    pivotSATURN.rotation.y -= 0.005;
+    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 );

saturn/saturn.js

@@ -19,9 +19,10 @@ const saturnSphere = new THREE.Mesh( saturnPlanet, materialSaturn );
 saturn.add(saturnSphere)
 
 saturn.position.x = 210;
+saturn.rotation.x = 90;
 
 export function rotation(){
-    saturn.rotation.x -= 0.01;
+    //saturn.rotation.x -= 0.01;
     saturn.rotation.y -= 0.01;
-    saturn.rotation.z -= 0.01;
+    //saturn.rotation.z -= 0.01;
 }

style.css

@@ -1,5 +1,17 @@
 canvas {
-    position:fixed;
-    top: 0;
-    left: 0;
+    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;
 }