/** * 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 * 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'), }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); 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') const sunSphere = new THREE.SphereGeometry(20, 32, 16); 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(); 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); scene.add(pivotMERKUR); scene.add(pivotMARS); scene.add(pivotJUPITER); scene.add(pivotSATURN); scene.add(pivotURANUS); scene.add(pivotCamera); pivotEARTH.add(EARTH.earth); pivotVENUS.add(VENUS.venus); pivotMERKUR.add(MERKUR.merkur); 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); scene.add( sun ); // licht const pointLight = new THREE.PointLight(0xffffff); //pointLight.position.set(5,5,5); const ambientLight = new THREE.PointLight(0xffffff); //Steuerung & Kamera const controls = new OrbitControls( camera, renderer.domElement ); //Sterne function addStar(){ const starSphere = new THREE.SphereGeometry(0.25,4,4) const material = new THREE.MeshStandardMaterial( { color: 0xffffff } ) const star = new THREE.Mesh( starSphere, material); const [x,y,z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(400)); star.position.set(x,y,z); scene.add(star); } Array(400).fill().forEach(addStar); //Skybox const spaceTexture = new THREE.TextureLoader().load('spacebackground.jpg'); scene.background = spaceTexture; //helper const lightHelper = new THREE.PointLightHelper(pointLight); const gridHelper = new THREE.GridHelper(200,50) // Die Objekte in der scene hinzufügen scene.add(pointLight); //scene.add(lightHelper); //scene.add(gridHelper); scene.add(ambientLight); renderer.render( scene, camera ); /** * Game Loop */ function animate() { requestAnimationFrame( animate ); sun.rotation.x += 0.001; EARTH.rotation(); MERKUR.rotation(); VENUS.rotation(); MARS.rotation(); JUPITER.rotation(); SATURN.rotation(); URANUS.rotation(); pivotEARTH.rotation.y += 0.005; pivotMERKUR.rotation.y -= 0.005; pivotVENUS.rotation.z += 0.005; pivotMARS.rotation.y -= 0.005; pivotJUPITER.rotation.z += 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 ); } animate();