Kreativtechnik

3D · Echtzeit · Interaktion

Der Lernpfad verbindet räumliche Gestaltung mit Programmierung: vom Objekt und Licht bis zur interaktiven Szene im Browser.

GESTALTUNGObjekt, Material, Licht und Kamera

Vier Entscheidungen formen das Bild

Geometrie bestimmt die Form, Material die Oberflächenreaktion, Licht die Lesbarkeit und Kamera den Ausschnitt. Blender eignet sich zum Modellieren und Exportieren; TouchDesigner ergänzt node-basierte Echtzeitprozesse.

Silhouette mit einfachen Grundkörpern bauen.
Materialwerte bewusst begrenzen.
Hauptlicht und weiches Fülllicht setzen.
Kamera nach Aussage statt Zufall wählen.

Export: Für Webprojekte ist glTF/GLB meist ein guter Übergabepunkt, weil Geometrie, Materialien und Szenendaten kompakt bleiben.

SELBSTTEST 01

Lesbarkeit verbessern

Welcher Parameter ändert den Bildausschnitt direkt: Material, Kamera oder Geometrie?

Die Kamera bestimmt Perspektive und Bildausschnitt.

WEBGLThree.js und React Three Fiber

Eine Szene im Browser strukturieren

Three.js stellt Szenen, Kameras, Geometrien, Materialien und Renderer bereit. React Three Fiber bildet dieselben Konzepte als React-Komponenten ab und eignet sich für deklarative, zustandsabhängige Interfaces.

const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100); const renderer = new THREE.WebGLRenderer({ antialias: true });