← Zurück zur Übersicht 3D im Browser: Dein Einstieg in WebGL mit Three.js

3D im Browser: Dein Einstieg in WebGL mit Three.js

3. Februar 2026 um 11:49 · Eckelsoft · ☕ 3 Min. Lesezeit
0
0
Three.js WebGL 3D Frontend JavaScript Vite
[WERBUNG: CONTENT OBEN]

3D ist die Zukunft des Webs

Immer mehr Webseiten nutzen immersive 3D-Erlebnisse, um Nutzer zu begeistern. Was früher nur mit spezialisierter Software möglich war, erledigt heute Three.js direkt in deinem Browser. Es macht die komplexe WebGL-Programmierung (Grafikkarten-Zugriff) so einfach wie das Setzen von HTML-Tags.

In diesem Guide bauen wir deine erste 3D-Szene mit einem modernen Tool-Setup.

Vorbereitung: Deine 3D-Werkstatt

Wir nutzen Vite als Build-Tool, da es extrem schnell ist und uns direkt einen lokalen Server zum Testen bereitstellt.

mkdir mein-erstes-threejs
cd mein-erstes-threejs
# Wir initialisieren ein leeres npm Projekt
npm init -y
# Wir installieren Three.js und Vite
npm install three vite

Schritt 1: Das Grundgerüst (HTML)

Wir brauchen nur eine einfache Datei, die unseren 3D-Canvas (die Leinwand) hält.

mein-erstes-threejs/index.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Three.js 3D Welt</title>
    <style>body { margin: 0; overflow: hidden; }</style>
</head>
<body>
    <script type="module" src="./main.js"></script>
</body>
</html>

Schritt 2: Die Magie (JavaScript)

Jetzt kommt der spannende Teil. Wir erstellen eine Szene, eine Kamera und einen Renderer.

mein-erstes-threejs/main.js:

import * as THREE from 'three';

// 1. Die Szene (Der Raum)
const scene = new THREE.Scene();

// 2. Die Kamera (Dein Blickwinkel)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 3. Der Renderer (Die Malmaschine)
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. Ein Objekt (Ein Würfel)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial(); // Coole Regenbogenfarben!
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 5. Die Animation (Der Game Loop)
function animate() {
    requestAnimationFrame(animate);
    
    // Rotations-Bewegung
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}

animate();

Schritt 3: Den Würfel zum Leben erwecken

Starte den Vite-Development-Server:

npx vite

Klicke auf den Link in deinem Terminal (meist http://localhost:5173).

⚠️ 📸 SCREENSHOT ANFRAGE: Hier einen Screenshot vom Browser-Fenster einfügen, der den bunten, rotierenden 3D-Würfel auf schwarzem Hintergrund zeigt.

Warum Three.js?

Three.js abstrahiert den mathematischen Horror von Matrizen und Vertices. Du musst kein Mathe-Genie sein, um 3D-Welten zu bauen. Mit dem MeshNormalMaterial aus unserem Beispiel siehst du sofort Ergebnisse: Die Farben des Würfels ändern sich je nach Blickwinkel der Flächen – perfekt für einen ersten Test!

Fazit

Glückwunsch! Du hast gerade deine eigene 3D-Grafik-Engine im Browser gestartet. Das ist erst der Anfang: Three.js erlaubt dir den Import von komplexen 3D-Modellen (Blender), Schatten, Reflexionen und sogar VR/AR-Erlebnisse. Tauch ein in die dritte Dimension!

[WERBUNG: CONTENT UNTEN]