WebGL - Interaktiver Würfel

Hallo, angehende Programmierer! Heute begeben wir uns auf eine aufregende Reise in die Welt von WebGL. Wir werden einen interaktiven Würfel erstellen, den ihr mit der Maus drehen könnt. Macht euch keine Sorgen, wenn ihr noch nie codiert habt – ich werde euch mit der Geduld einer weisen alten Schildkröte durch jeden Schritt führen. Lass uns eintauchen!

WebGL - Interactive Cube

Grundlagen verstehen

Bevor wir unseren Würfel zeichnen, lassen wir uns schnell einige grundlegende Konzepte anschauen.

Was ist WebGL?

WebGL (Web Graphics Library) ist eine JavaScript-API, die es uns ermöglicht, 3D-Grafiken in einem Webbrowser zu rendern. Es ist so, als würde man deinen Webseiten Superkräfte verleihen, um atemberaubende visuelle Effekte zu erstellen!

Was wir brauchen

Ein Texteditor (wie Notepad++ oder Visual Studio Code)
Ein Webbrowser (Chrome, Firefox oder jeden modernen Browser)
Ein Schuss Neugier und ein Hauch Ausdauer!

Beispiel – Zeichne einen interaktiven Würfel

Schritt 1: Einrichten der HTML

Zuerst erstellen wir das Gerüst unserer Webseite. Öffnet euren Texteditor und erstellt eine neue Datei namens interactive_cube.html. Kopiert und fügt den folgenden Code ein:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>WebGL Interaktiver Würfel</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Unser WebGL-Code wird hier hin
</script>
</body>
</html>

Dies richtet unsere HTML-Struktur ein und fügt die Three.js-Bibliothek hinzu, die unsere WebGL-Arbeit erheblich einfacher macht.

Schritt 2: Erstellen der Szene

Nun fügen wir etwas JavaScript hinzu, um unsere 3D-Szene zu erstellen. Ersetzt den Kommentar im Script-Tag mit diesem Code:

// Szene, Kamera und Renderer einrichten
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.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// Erstellen eines Würfels
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

Lassen wir das auseinanderbrechen:

Wir erstellen eine Szene, die wie eine Bühne für unsere 3D-Objekte ist.
Die Kamera definiert unseren Blickwinkel.
Der Renderer ist verantwortlich für das Zeichnen unserer Szene.
Wir erstellen einen Würfel mit BoxGeometry und geben ihm eine grüne Farbe.
Schließlich platzieren wir die Kamera 5 Einheiten vom Zentrum entfernt.

Schritt 3: Den Würfel animieren

Um unseren Würfel zu drehen, müssen wir eine Animationsloop hinzufügen. Fügt diesen Code nach dem vorherigen Block ein:

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}
animate();

Diese Funktion wird wiederholt aufgerufen, dreht den Würfel leicht jede Frame und rendert die Szene neu.

Schritt 4: Interaktivität hinzufügen

Nun fügen wir Interaktivität hinzu, damit wir den Würfel mit der Maus drehen können. Fügt diesen Code vor der animate()-Funktion ein:

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

Dieser Code fügt Ereignislistener für Mausaktionen hinzu, allowing uns den Würfel durch Klicken und Ziehen zu drehen.

Schritt 5: Ein wenig Glanz hinzufügen

Machen wir unseren Würfel ein wenig interessanter, indem wir ihm verschiedene Farben auf jeder Seite geben. Ersetzt die Materialerstellungszinie mit dieser:

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Rot
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // Grün
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // Blau
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Gelb
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // Magenta
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // Zyan
];
const cube = new THREE.Mesh(geometry, materials);

Jetzt hat jede Seite unseres Würfels eine andere Farbe!

Fazit

Glückwunsch! Ihr habt gerade einen interaktiven 3D-Würfel mit WebGL erstellt. Dies ist nur die Spitze des Eisbergs, wenn es um 3D-Grafikprogrammierung geht. Bei eurer Weiterreise werdet ihr noch erstaunlichere Dinge entdecken.

Denkt daran, das Lernen zu programmieren ist wie das Fahrradfahren zu lernen. Es mag am Anfang wackelig sein, aber mit Übung werdet ihr schnell davonfliegen!

Hier ist eine Tabelle, die die Hauptmethoden zusammenfasst, die wir verwendet haben:

Methode	Beschreibung
`THREE.Scene()`	Erstellt eine neue 3D-Szene
`THREE.PerspectiveCamera()`	Riccht die Kameraansicht ein
`THREE.WebGLRenderer()`	Verwalten das Rendern der Szene
`THREE.BoxGeometry()`	Erstellt eine Würfelgeometrie
`THREE.MeshBasicMaterial()`	Definiert das Material für den Würfel
`THREE.Mesh()`	Kombiniert Geometrie und Material
`requestAnimationFrame()`	Ruft die Animationsloop auf

Weiters experimentieren, weiter lernen und vor allem: Spaß haben! Die Welt von WebGL ist dein Muschel und du bist jetzt gerüstet, um zu erkunden. Frohes Coden!

Credits: Image by storyset

Vorheriges Tutorial:

WebGL - Würfelrotation