diff --git a/earth/earth.js b/earth/earth.js index bf86db6..a99b5f5 100644 --- 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; } diff --git a/index.html b/index.html index 5970503..994734c 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,11 @@ - - - Threejs Demonstration + + Space + diff --git a/jupiter/.mars.js.swp b/jupiter/.mars.js.swp new file mode 100644 index 0000000..982d7a4 Binary files /dev/null and b/jupiter/.mars.js.swp differ diff --git a/jupiter/jupiter.jpg b/jupiter/jupiter.jpg new file mode 100644 index 0000000..21f1951 Binary files /dev/null and b/jupiter/jupiter.jpg differ diff --git a/jupiter/jupiter.js b/jupiter/jupiter.js new file mode 100644 index 0000000..2c9c832 --- /dev/null +++ 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; +} diff --git a/main.js b/main.js index 5b8e5d4..70530e5 100644 --- 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(); diff --git a/mars/mars.jpg b/mars/mars.jpg new file mode 100644 index 0000000..b3654a9 Binary files /dev/null and b/mars/mars.jpg differ diff --git a/mars/mars.js b/mars/mars.js new file mode 100644 index 0000000..cdb4c4e --- /dev/null +++ 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; +} diff --git a/merkur/merkur.jpg b/merkur/merkur.jpg new file mode 100644 index 0000000..eebaed9 Binary files /dev/null and b/merkur/merkur.jpg differ diff --git a/merkur/merkur.js b/merkur/merkur.js new file mode 100644 index 0000000..9a72ab6 --- /dev/null +++ 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; +} diff --git a/moon/moon.js b/moon/moon.js index 9c6683a..da71003 100644 --- 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(){ diff --git a/saturn/.mars.js.swp b/saturn/.mars.js.swp new file mode 100644 index 0000000..982d7a4 Binary files /dev/null and b/saturn/.mars.js.swp differ diff --git a/saturn/saturn.jpg b/saturn/saturn.jpg new file mode 100644 index 0000000..d8b23df Binary files /dev/null and b/saturn/saturn.jpg differ diff --git a/saturn/saturn.js b/saturn/saturn.js new file mode 100644 index 0000000..27c6f27 --- /dev/null +++ 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; +} diff --git a/saturn/saturnring.jpg b/saturn/saturnring.jpg new file mode 100644 index 0000000..ce82586 Binary files /dev/null and b/saturn/saturnring.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..ac6a59c --- /dev/null +++ b/style.css @@ -0,0 +1,5 @@ +canvas { + position:fixed; + top: 0; + left: 0; +} diff --git a/venus/venus.jpg b/venus/venus.jpg new file mode 100644 index 0000000..a26a410 Binary files /dev/null and b/venus/venus.jpg differ diff --git a/venus/venus.js b/venus/venus.js new file mode 100644 index 0000000..117254a --- /dev/null +++ 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; +}