Three.js – 3D im Browser

Three.js ist eine auf WebGL aufbauende JavaScript-Bibliothek, die die komplexe WebGL-API in ein zugängliches Szenegraph-System abstrahiert und so 3D-Grafik, Animationen und interaktive Erlebnisse für das Web zugänglich macht.

Was ist Three.js?

Three.js wurde 2010 von Ricardo Cabello (Mr.doob) veröffentlicht und ist heute die mit Abstand populärste 3D-Bibliothek für das Web mit über 100.000 GitHub-Sterne und einer riesigen Community.

Die Bibliothek abstrahiert WebGL auf ein Szenegraph-Modell, das Entwickler und Designer kennen: Szenen, Kameras, Lichter, Objekte mit Materialien. Statt Buffer und Shader schreibt man new THREE.Mesh(geometry, material).

Three.js wird von Studios und Produktionsfirmen weltweit für:

• Interaktive Produktvisualisierungen
• Kreative Portfolio-Websites
• Daten-Visualisierungen in 3D
• Digitale Kunstinstallationen (web-basiert)
• Spielprototypen und interaktive Erlebnisse

Erklärung

Die fünf Grundelemente

Jede Three.js-Anwendung besteht aus:

1. Scene – Container für alle 3D-Objekte
2. Camera – Blickwinkel in die Szene
3. Renderer – Rendert Szene + Kamera auf Canvas
4. Geometry – Form eines 3D-Objekts
5. Material – Aussehen (Farbe, Textur, Shader)

```javascript import * as THREE from 'three';

// 1. Scene const scene = new THREE.Scene(); scene.background = new THREE.Color('#0a0a0f');

// 2. Camera (PerspectiveCamera: FOV, Aspect, Near, Far) const camera = new THREE.PerspectiveCamera( 75, // Field of View window.innerWidth / window.innerHeight, // Aspect Ratio 0.1, // Near Clipping 1000 // Far Clipping ); camera.position.z = 5;

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

// 4. Geometry + 5. Material → Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: '#0078ff' }); const wuerfel = new THREE.Mesh(geometry, material); scene.add(wuerfel);

// Licht (MeshStandardMaterial braucht Licht) const licht = new THREE.DirectionalLight('#ffffff', 1); licht.position.set(2, 3, 4); scene.add(licht); scene.add(new THREE.AmbientLight('#ffffff', 0.4));

// Animations-Loop function animate() { wuerfel.rotation.x += 0.01; wuerfel.rotation.y += 0.01;

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

animate(); ```

Geometrien

```javascript // Grundformen new THREE.BoxGeometry(1, 1, 1) new THREE.SphereGeometry(0.5, 32, 32) // radius, widthSegments, heightSegments new THREE.PlaneGeometry(10, 10) new THREE.CylinderGeometry(0.5, 0.5, 2) new THREE.TorusGeometry(1, 0.3, 16, 100) // Donut

// Benutzerdefinierte Geometry const geo = new THREE.BufferGeometry(); const vertices = new Float32Array([ 0, 1, 0, // oben -1, 0, 0, // links 1, 0, 0 // rechts ]); geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); ```

Materialien

```javascript // Nicht von Licht abhängig new THREE.MeshBasicMaterial({ color: '#0078ff' })

// Standardmäßig – PBR-Material (Physical Based Rendering) new THREE.MeshStandardMaterial({ color: '#0078ff', roughness: 0.3, // 0 = spiegelglatt, 1 = rau metalness: 0.8, // 0 = nichtmetallisch, 1 = metallisch map: textur, // Farbtextur normalMap: normalMap, // Oberflächendetails envMap: envMap // Umgebungsreflexionen })

// Custom Shader new THREE.ShaderMaterial({ uniforms: { u_time: { value: 0 } }, vertexShader: ...GLSL..., fragmentShader: ...GLSL... })

// Transparent new THREE.MeshStandardMaterial({ transparent: true, opacity: 0.6, side: THREE.DoubleSide // Vorder- und Rückseite }) ```

GSAP + Three.js

```javascript import { gsap } from 'gsap';

// Kamera-Reise gsap.to(camera.position, { z: 2, duration: 2, ease: 'power3.inOut' });

// Objekt rotieren gsap.to(wuerfel.rotation, { y: Math.PI * 2, duration: 2, ease: 'power2.inOut' });

// Timeline const tl = gsap.timeline(); tl.to(wuerfel.position, { y: 2, duration: 1 }) .to(wuerfel.scale, { x: 2, y: 2, z: 2, duration: 0.5 }, '-=0.3'); ```

Textur und Umgebung

```javascript const textureLoader = new THREE.TextureLoader(); const textur = textureLoader.load('/texturen/holz.jpg');

// Auf Material anwenden material.map = textur; material.needsUpdate = true;

// HDRI Umgebung für realistische Reflexionen import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

new RGBELoader().load('/env/studio.hdr', (envMap) => { envMap.mapping = THREE.EquirectangularReflectionMapping; scene.environment = envMap; // Reflexionen für alle Materialien scene.background = envMap; // Auch als Hintergrund }); ```

3D-Modelle laden (GLTF)

GLTF ist das Standard-3D-Format für das Web:

```javascript import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader(); loader.load( '/modelle/produkt.gltf', (gltf) => { scene.add(gltf.scene);

// Animationen aus dem Modell abspielen const mixer = new THREE.AnimationMixer(gltf.scene); const action = mixer.clipAction(gltf.animations[0]); action.play();

// Mixer in Animations-Loop aktualisieren const clock = new THREE.Clock(); function animate() { mixer.update(clock.getDelta()); renderer.render(scene, camera); requestAnimationFrame(animate); } animate(); }, (progress) => console.log(${(progress.loaded / progress.total * 100).toFixed(0)}%), (fehler) => console.error(fehler) ); ```

Beispiele

Responsive Three.js

``javascript window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); }); ``

OrbitControls für interaktive Navigation

```javascript import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Trägheit beim Drehen controls.dampingFactor = 0.05; controls.autoRotate = true; // Automatisch rotieren controls.autoRotateSpeed = 0.5;

function animate() { controls.update(); // Muss in Loop aufgerufen werden renderer.render(scene, camera); requestAnimationFrame(animate); } ```

In der Praxis

Ecosystem: Das Three.js Ökosystem ist enorm:

• drei/fiber (react-three-fiber) – Three.js für React
• drei – Helfer und vorgefertigte Komponenten für react-three-fiber
• Rapier – Physik-Engine für Three.js
• Theatre.js – Animations-Timeline für Three.js-Szenen

Performance-Tipps:

• geometry.dispose() und material.dispose() für nicht mehr benötigte Objekte
• LOD (Level of Detail) für komplexe Szenen
• renderer.shadowMap.enabled nur aktivieren wenn nötig (kostspielig)
• renderer.info für Debug-Informationen

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Muss ich WebGL verstehen um Three.js zu nutzen? Für den Einstieg nein. Für Custom Shader und fortgeschrittene Optimierungen: ja, WebGL – Grundlagen für Kreative lohnt sich.

Wie exportiere ich 3D-Modelle aus Blender für Three.js? Als GLTF/GLB exportieren (Blender hat nativen GLTF-Export). GLB ist das komprimierte Binary-Format, GLTF das JSON-Format mit separaten Asset-Dateien.

Kann ich Three.js mit React nutzen? Ja, mit react-three-fiber (R3F) und der Ergänzungsbibliothek drei. Diese erlauben deklaratives Three.js als React-Komponenten.

Verwandte Einträge

• WebGL – Grundlagen für Kreative – Die Low-Level-API unter Three.js
• HTML Canvas API für Animationen – Canvas 2D für weniger komplexe Visualisierungen
• GSAP (GreenSock) – Grundlagen – GSAP für Three.js-Objekt-Animationen
• Performance-Optimierung bei Web-Animationen – 3D-Performance-Optimierung

Weiterführend

• Three.js Dokumentation: threejs.org/docs (2024)
• Three.js Fundamentals: threejsfundamentals.org (Gregg Tavares)
• Bruno Simon: Three.js Journey (2021–2024) – threejs-journey.com (Videokurs)
• Maxime Heckel: R3F / React Three Fiber – blog.maximeheckel.com
• Awwwards: Three.js Showcase – awwwards.com