Portfolio/main.js

/**
 * 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';

const button = document.querySelector('#steuerungOrbitalButton'); 
button.addEventListener('click', function() { 
    console.log("Butten gedrückt");
    document.querySelector('.content-layer').style.display = "none";
});

// 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
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();

//Planeten der Sonne hinzufügen
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);

// Den Mond hinzufügen
EARTH.pivot.add(MOON.moon);

scene.add(sun);


// Licht
const pointLight = new THREE.PointLight(0xffffff);
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;


    controls.update();
    renderer.render( scene, camera );
}

animate();