Weitere Planeten hinzugefügt

4 years ago · d42fef0c99
parent 519a5d7afc
commit d42fef0c99
18 changed files with 172 additions and 25 deletions
--- a/earth/earth.js
+++ b/earth/earth.js
@ -6,23 +6,20 @@
 import * as THREE from '/website/node_modules/three/build/three.module.js';


-const pi = 3;

 const earthTexture = new THREE.TextureLoader().load('/website/earth/earth.jpg');
-const earthSphere = new THREE.SphereGeometry(7, 32, 16);
+const earthSphere = new THREE.SphereGeometry(10, 32, 16);
 const material = new THREE.MeshStandardMaterial({ map: earthTexture });
 export const earth = new THREE.Mesh( earthSphere, material );
 export const pivot = new THREE.Object3D();

 earth.add(pivot);

-earth.position.x = -60;
+earth.position.x = 100;

 var forward = true;

 export function rotation(){
    earth.rotation.y += 0.01;
-    pivot.rotation.x += 0.01;
-    //pivot.rotation.y += 0.005;
-    //pivot.rotation.z += 0.01; 
+    pivot.rotation.x -= 0.025;
 }    
--- a/index.html
+++ b/index.html
@ -3,11 +3,11 @@
 <head>
    <base href="/website/">
    <meta charset="UTF-8">
-    <script type="module" src="main.js"></script>
-    
-    <title>Threejs Demonstration</title>
+    <link rel="stylesheet" href="style.css"> 
+    <title>Space</title>
 </head>
 <body>
 <canvas id="bg"></canvas>
+<script type="module" src="main.js"></script>
 </body>
 </html>
--- a/jupiter/.mars.js.swp
+++ b/jupiter/.mars.js.swp
--- a/jupiter/jupiter.jpg
+++ b/jupiter/jupiter.jpg
--- a/jupiter/jupiter.js
+++ b/jupiter/jupiter.js
@ -0,0 +1,20 @@
+/**
+ * Implentation of the jupiter.
+ * Texture from https://www.solarsystemscope.com/textures/1
+ */
+
+import * as THREE from '/website/node_modules/three/build/three.module.js';
+
+
+const jupiterTexture = new THREE.TextureLoader().load('/website/jupiter/jupiter.jpg');
+const jupiterSphere = new THREE.SphereGeometry(15, 32, 16);
+const material = new THREE.MeshStandardMaterial({ map: jupiterTexture });
+export const jupiter = new THREE.Mesh( jupiterSphere, material );
+
+jupiter.position.x = 170;
+
+export function rotation(){
+    jupiter.rotation.x -= 0.01;
+    jupiter.rotation.y -= 0.01;
+    jupiter.rotation.z -= 0.01;
+}
--- a/main.js
+++ b/main.js
@ -2,8 +2,14 @@
 * 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';
+import * as MERKUR from '/website/merkur/merkur.js';
+import * as MARS from '/website/mars/mars.js';
+import * as JUPITER from '/website/jupiter/jupiter.js';
+import * as SATURN from '/website/saturn/saturn.js';
 import * as MOON from '/website/moon/moon.js';
 import { OrbitControls } from '/website/node_modules/three/examples/jsm/controls/OrbitControls.js';

@ -12,6 +18,7 @@ import { OrbitControls } from '/website/node_modules/three/examples/jsm/controls
 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'),
 });
@ -19,20 +26,41 @@ const renderer = new THREE.WebGLRenderer({
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
 camera.position.setZ(30);
-camera.position.setX(30);
+camera.position.setX(-200);
 camera.position.setY(30);

 // Die Sonne
 const sunTexture = new THREE.TextureLoader().load('sun.jpg')
-const sunSphere = new THREE.SphereGeometry(15, 32, 16);
+const sunSphere = new THREE.SphereGeometry(20, 32, 16);
 const material = new THREE.MeshBasicMaterial({ map: sunTexture });
 const sun = new THREE.Mesh( sunSphere, material );

-const pivot = new THREE.Object3D();
-sun.add(pivot);
-
-pivot.add(EARTH.earth);
-EARTH.pivot.add(MOON.moon)
+// Mittelpunkte fuer die Planeten festlegen
+// Offentsichtlicherweise um die Sonne
+const pivotEARTH = new THREE.Object3D();
+const pivotVENUS = new THREE.Object3D();
+const pivotMERKUR = new THREE.Object3D();
+const pivotMARS = new THREE.Object3D();
+const pivotJUPITER = new THREE.Object3D();
+const pivotSATURN = new THREE.Object3D();
+
+sun.add(pivotEARTH);
+sun.add(pivotVENUS);
+sun.add(pivotMERKUR);
+sun.add(pivotMARS);
+sun.add(pivotJUPITER);
+sun.add(pivotSATURN);
+
+pivotEARTH.add(EARTH.earth);
+pivotVENUS.add(VENUS.venus);
+pivotMERKUR.add(MERKUR.merkur);
+pivotMARS.add(MARS.mars);
+pivotJUPITER.add(JUPITER.jupiter);
+pivotSATURN.add(SATURN.saturn);
+
+
+// Der Mond dreht sich sich um die erde.
+EARTH.pivot.add(MOON.moon);

 scene.add( sun );

@ -56,7 +84,7 @@ function addStar(){
    scene.add(star);
 }

-Array(200).fill().forEach(addStar);
+Array(400).fill().forEach(addStar);

 //Skybox
 const spaceTexture = new THREE.TextureLoader().load('spacebackground.jpg');
@ -86,14 +114,23 @@ function animate() {
    requestAnimationFrame( animate );
    
    sun.rotation.x += 0.001;
-    sun.rotation.y += 0.005;
-    sun.rotation.z += 0.001;
-    EARTH.rotation();
-    //MOON.rotation();
-    pivot.rotation.y += 0.01;
+    //sun.rotation.y += 0.005;
+    //sun.rotation.z += 0.001;
+    //EARTH.rotation();
+    
+    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;
+
    controls.update();
    renderer.render( scene, camera );
-
 }

 animate();
--- a/mars/mars.jpg
+++ b/mars/mars.jpg
--- a/mars/mars.js
+++ b/mars/mars.js
@ -0,0 +1,20 @@
+/**
+ * Implentation of the mars.
+ * Texture from https://www.solarsystemscope.com/textures/1
+ */
+
+import * as THREE from '/website/node_modules/three/build/three.module.js';
+
+
+const marsTexture = new THREE.TextureLoader().load('/website/mars/mars.jpg');
+const marsSphere = new THREE.SphereGeometry(10, 32, 16);
+const material = new THREE.MeshStandardMaterial({ map: marsTexture });
+export const mars = new THREE.Mesh( marsSphere, material );
+
+mars.position.x = 130;
+
+export function rotation(){
+    mars.rotation.x -= 0.01;
+    mars.rotation.y -= 0.01;
+    mars.rotation.z -= 0.01;
+}
--- a/merkur/merkur.jpg
+++ b/merkur/merkur.jpg
--- a/merkur/merkur.js
+++ b/merkur/merkur.js
@ -0,0 +1,20 @@
+/**
+ * Implentation of the merkur.
+ * Texture from https://www.solarsystemscope.com/textures/1
+ */
+
+import * as THREE from '/website/node_modules/three/build/three.module.js';
+
+
+const merkurTexture = new THREE.TextureLoader().load('/website/merkur/merkur.jpg');
+const merkurSphere = new THREE.SphereGeometry(10, 32, 16);
+const material = new THREE.MeshStandardMaterial({ map: merkurTexture });
+export const merkur = new THREE.Mesh( merkurSphere, material );
+
+merkur.position.x = 40;
+
+export function rotation(){
+    merkur.rotation.x -= 0.01;
+    merkur.rotation.y -= 0.01;
+    merkur.rotation.z -= 0.01;
+}
--- a/moon/moon.js
+++ b/moon/moon.js
@ -17,8 +17,9 @@ moon.position.x = -15;
 moon.position.z = 10;

 export function rotation(){
-    moon.rotation.y += 0.01;
-    moon.rotation.z += 0.01;
+    moon.rotation.x -= 0.01;
+    moon.rotation.y -= 0.01;
+    moon.rotation.z -= 0.01;
 }

 function forward(){
--- a/saturn/.mars.js.swp
+++ b/saturn/.mars.js.swp
--- a/saturn/saturn.jpg
+++ b/saturn/saturn.jpg
--- a/saturn/saturn.js
+++ b/saturn/saturn.js
@ -0,0 +1,27 @@
+/**
+ * Implentation of the saturn.
+ * Texture from https://www.solarsystemscope.com/textures/1
+ */
+
+import * as THREE from '/website/node_modules/three/build/three.module.js';
+
+
+const saturnRingTexture = new THREE.TextureLoader().load('/website/saturn/saturnring.jpg');
+const saturnRing = new THREE.TorusGeometry(12, 1, 16, 60);
+const materialRing = new THREE.MeshStandardMaterial({ map: saturnRingTexture });
+export const saturn = new THREE.Mesh( saturnRing, materialRing );
+
+// Den Saturnplaneten hinzufuegen
+const saturnTexture = new THREE.TextureLoader().load('/website/saturn/saturn.jpg');
+const saturnPlanet = new THREE.SphereGeometry( 10, 32, 16 );
+const materialSaturn = new THREE.MeshStandardMaterial( { map: saturnTexture } );
+const saturnSphere = new THREE.Mesh( saturnPlanet, materialSaturn );
+saturn.add(saturnSphere)
+
+saturn.position.x = 210;
+
+export function rotation(){
+    saturn.rotation.x -= 0.01;
+    saturn.rotation.y -= 0.01;
+    saturn.rotation.z -= 0.01;
+}
--- a/saturn/saturnring.jpg
+++ b/saturn/saturnring.jpg
--- a/style.css
+++ b/style.css
@ -0,0 +1,5 @@
+canvas {
+    position:fixed;
+    top: 0;
+    left: 0;
+}
--- a/venus/venus.jpg
+++ b/venus/venus.jpg
--- a/venus/venus.js
+++ b/venus/venus.js
@ -0,0 +1,20 @@
+/**
+ * Implentation of the venus.
+ * Texture from https://www.solarsystemscope.com/textures/
+ */
+
+import * as THREE from '/website/node_modules/three/build/three.module.js';
+
+
+const venusTexture = new THREE.TextureLoader().load('/website/venus/venus.jpg');
+const venusSphere = new THREE.SphereGeometry(10, 32, 16);
+const material = new THREE.MeshStandardMaterial({ map: venusTexture });
+export const venus = new THREE.Mesh( venusSphere, material );
+
+venus.position.x = 70;
+
+export function rotation(){
+    venus.rotation.x -= 0.01;
+    venus.rotation.y -= 0.01;
+    venus.rotation.z -= 0.01;
+}