Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.5 KiB
101 lines
2.5 KiB
4 years ago
|
/**
|
||
|
|
* 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 MOON from '/website/moon/moon.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);
|
||
|
|
camera.position.setZ(30);
|
||
|
|
camera.position.setX(30);
|
||
|
|
camera.position.setY(30);
|
||
|
|
|
||
|
|
// Die Sonne
|
||
|
|
const sunTexture = new THREE.TextureLoader().load('sun.jpg')
|
||
|
|
const sunSphere = new THREE.SphereGeometry(15, 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)
|
||
|
|
|
||
|
|
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(200).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);
|
||
|
|
|
||
|
|
//Planeten hinzufuegen
|
||
|
|
//scene.add(EARTH.earth)
|
||
|
|
//scene.add(MOON.moon)
|
||
|
|
|
||
|
|
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Game Loop
|
||
|
|
*/
|
||
|
|
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;
|
||
|
|
controls.update();
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
animate();
|
||
|
|
|