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.x -= 0.025;
    //pivot.rotation.y += 0.005;
    //pivot.rotation.z += 0.01; 
 }    
--- 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>
+    <link rel="stylesheet" href="style.css"> 
-    
+    <title>Space</title>
    <title>Threejs Demonstration</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();
+// Mittelpunkte fuer die Planeten festlegen
-sun.add(pivot);
+// Offentsichtlicherweise um die Sonne
-
+const pivotEARTH = new THREE.Object3D();
-pivot.add(EARTH.earth);
+const pivotVENUS = new THREE.Object3D();
-EARTH.pivot.add(MOON.moon)
+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.y += 0.005;
-    sun.rotation.z += 0.001;
+    //sun.rotation.z += 0.001;
-    EARTH.rotation();
+    //EARTH.rotation();
-    //MOON.rotation();
+    
-    pivot.rotation.y += 0.01;
+    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.x -= 0.01;
-    moon.rotation.z += 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;
 }