Mit Three.js das Sonnensystem visualisieren

Stell dir vor, du bist ein Kind, das mit ungläubigem Staunen in den Nachthimmel blickt. Die funkelnden Sterne entfachen deine Fantasie und du träumst davon, durch die unendlichen Weiten des Weltraums zu gleiten, die himmlischen Körper zu erforschen, die im Dunkel tanzen. Genau auf diese Reise begeben wir uns heute, indem wir die Macht der Programmierung nutzen, um deinen Kindheitstraum zum Leben zu erwecken!

Einführung in Three.js

Three.js ist eine JavaScript-Bibliothek, die es einfach macht, 3D-Grafiken in einem Webbrowser zu erstellen und anzuzeigen. Sie bietet eine Reihe von Werkzeugen und Dienstprogrammen zum Erstellen und Manipulieren von 3D-Objekten, Texturen, Lichtern und Kameras und ermöglicht es Entwicklern, immersive und interaktive 3D-Erfahrungen im Web zu erstellen.

Einrichten der Umgebung

Um zu beginnen, müssen wir unsere Entwicklungs-Umgebung einrichten. Wir werden eine einfache HTML-Datei verwenden, um unsere Three.js-Szene zu hosten, und eine JavaScript-Datei, um unseren Code zu schreiben.

Zuerst werden wir die Three.js-Bibliothek in unsere HTML-Datei einfügen:

<script src="<https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js>"></script>

Als Nächstes erstellen wir eine JavaScript-Datei und importieren die erforderlichen Module:

import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { Pane } from "tweakpane";

Erschaffen des Sonnensystems

const scene = new THREE.Scene(); 
const textureLoader = new THREE.TextureLoader(); 
const sunTexture = textureLoader.load("/textures/2k_sun.jpg"); 
const earthTexture = textureLoader.load("/textures/2k_earth_daymap.jpg"); 
const backgroundTexture = textureLoader.load("/textures/2k_stars_milky_way.jpg");

Außerdem erstellen wir mithilfe der geladenen Texturen Materialien für jeden Planeten und definieren deren Eigenschaften wie Radius, Entfernung von der Sonne und Umlaufgeschwindigkeit:

const mercuryMaterial = new THREE.MeshStandardMaterial({
  map: mercuryTexture,
});
// Define materials for other planets...

const planets = [
  {
    name: "Mercury",
    radius: 0.5,
    distance: 10,
    speed: 0.01,
    material: mercuryMaterial,
    moons: [],
  },
  // Define properties for other planets...
];

Als Nächstes erstellen wir Funktionen zum Generieren von Planetennetzen und fügen sie der Szene hinzu:

const createPlanet = (planet) => {
  const planetMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), planet.material);
  planetMesh.scale.setScalar(planet.radius);
  planetMesh.position.x = planet.distance;
  return planetMesh;
};

const planetMeshes = planets.map((planet) => {
  const planetMesh = createPlanet(planet);
  scene.add(planetMesh);
  return planetMesh;
});

Wir werden unserer Szene auch Lichter und eine Kamera hinzufügen:

const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 2);
scene.add(pointLight);

const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 400);
camera.position.z = 100;
camera.position.y = 5;

Umlaufende Animation

const renderloop = () => {
  const elapsedTime = clock.getElapsedTime();

  planetMeshes.forEach((planet, planetIndex) => {
    planet.rotation.y += planets[planetIndex].speed;
    planet.position.x = Math.sin(planet.rotation.y) * planets[planetIndex].distance;
    planet.position.z = Math.cos(planet.rotation.y) * planets[planetIndex].distance;
  });

  renderer.render(scene, camera);
  window.requestAnimationFrame(renderloop);
};

renderloop();

Schlussfolgerung

In diesem Tutorial haben wir gelernt, wie man mit Three.js eine einfache Visualisierung des Sonnensystems erstellt. Wir haben das Laden von Texturen, das Erstellen von Materialien, das Erzeugen von Planetennetzen, das Einrichten von Lichtern und Kameras sowie das Animieren der Szene behandelt. Auf dieser Grundlage können Sie die Szene weiter aufwerten, indem Sie weitere Planeten, Monde, Texturen und interaktive Elemente hinzufügen. Experimentieren Sie mit verschiedenen Parametern und sehen Sie, welche interessanten Sonnensysteme Sie erstellen können!