Compare commits

...

2 Commits

Author SHA1 Message Date
root a030d7816d Remove vim swp file 2 years ago
root baae1c727b Orbitalsteuerung korrigieren 2 years ago
  1. 10
      index.html
  2. 27
      main.js
  3. 16
      style.css

@ -3,19 +3,15 @@
<head>
<base href="/website/">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css">
<title>Space</title>
</head>
<body>
<canvas id="bg"></canvas>
<main>
<header>
<h1>„Jedes Lebewesen ist ein Rädchen im Getriebe des Universums. Obwohl scheinbar nur seine unmittelbare Umgebung betroffen ist, erstreckt sich der Einflussbereich jedes Lebewesens über eine unendliche Distanz.“ - Nikola Tesla
</h1>
</header>
<section>
<p>Moin!</p>
<button type="button" id="steuerungOrbitalButton">Steuerung aktivieren!</button>
<a href="https://www.solarsystemscope.com/textures/">Texturen von https://www.solarsystemscope.com/textures/</a>
<canvas id="bg"></canvas>
</section>
</main>

@ -1,8 +1,6 @@
/**
* 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';
@ -14,12 +12,10 @@ 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'),
});
@ -27,8 +23,6 @@ const renderer = new THREE.WebGLRenderer({
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var cameraX = 200;
var cameraY = 100;
var cameraZ = 100;
@ -43,7 +37,6 @@ 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();
@ -51,8 +44,9 @@ 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();
//const pivotCamera = new THREE.Object3D();
//Planeten der Sonne hinzufügen
scene.add(pivotEARTH);
scene.add(pivotVENUS);
scene.add(pivotMERKUR);
@ -60,7 +54,7 @@ scene.add(pivotMARS);
scene.add(pivotJUPITER);
scene.add(pivotSATURN);
scene.add(pivotURANUS);
scene.add(pivotCamera);
//scene.add(pivotCamera);
pivotEARTH.add(EARTH.earth);
pivotVENUS.add(VENUS.venus);
@ -69,18 +63,15 @@ 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 );
scene.add(sun);
// licht
// Licht
const pointLight = new THREE.PointLight(0xffffff);
//pointLight.position.set(5,5,5);
const ambientLight = new THREE.PointLight(0xffffff);
//Steuerung & Kamera
@ -113,7 +104,6 @@ scene.add(pointLight);
//scene.add(gridHelper);
scene.add(ambientLight);
renderer.render( scene, camera );
/**
@ -140,16 +130,9 @@ function animate() {
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();

@ -1,17 +1 @@
canvas {
position:fixed !important;
top: 0 !important;
left: 0 !important;
}
main {
width: 100% !important;
height: 100% !important;
position: absolute !important;
z-index: 99 !important;
color: white !important;
}
a {
color:white !important;
}

Loading…
Cancel
Save