Three.js mit Claude Code: 3D im Browser 2026

WebGL macht echte 3D-Grafiken im Browser möglich — aber rohes WebGL ist komplex und verbose. Three.js abstrahiert die Low-Level-Details und liefert eine saubere API für Szenen, Geometrien, Materialien und Animationen. Mit Claude Code generierst du in Minuten funktionsfähige 3D-Szenen, die in jedem modernen Browser laufen.

Dieser Guide zeigt, wie Claude Code Three.js-Projekte strukturiert — von der minimalen Szene bis zu React Three Fiber mit GLTF-Modellen und physikbasiertem Rendering.

1. Three.js Setup — Scene, PerspectiveCamera, WebGLRenderer

Jede Three.js-Anwendung besteht aus drei Kernkomponenten: Scene (der Behälter für alle 3D-Objekte), Camera (der Blickwinkel) und Renderer (die Rendering-Engine). Claude Code generiert dieses Grundgerüst vollständig:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 1. Szene erstellen
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f1117);

// 2. Kamera — FOV, Aspect, Near, Far
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 2, 5);

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

// 4. OrbitControls — Maus-Navigation
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// 5. Render Loop
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

// 6. Resize Handler
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Kamera-Typen im Vergleich

Three.js bietet zwei Hauptkamera-Typen: PerspectiveCamera simuliert menschliche Wahrnehmung mit perspektivischer Verzerrung — ideal für 3D-Szenen. OrthographicCamera projiziert ohne Tiefenverzerrung und eignet sich für 2D-Layouts, technische Zeichnungen oder isometrische Spiele.

// Orthographic — links, rechts, oben, unten, near, far
const aspect = window.innerWidth / window.innerHeight;
const frustum = 5;
const orthoCamera = new THREE.OrthographicCamera(
  -frustum * aspect, frustum * aspect,
  frustum, -frustum,
  0.1, 100
);

2. Geometrien und Materialien

Three.js trennt Geometrie (Form/Vertices) und Material (Aussehen/Shading) sauber. Ein Mesh kombiniert beides zu einem renderbaren Objekt. Claude Code kennt alle Built-in-Geometrien und wählt das passende Material für den Use Case:

// BoxGeometry — Breite, Höhe, Tiefe, Segmente
const boxGeo = new THREE.BoxGeometry(1, 1, 1);

// SphereGeometry — Radius, WidthSegments, HeightSegments
const sphereGeo = new THREE.SphereGeometry(0.5, 32, 32);

// TorusKnot — für komplexe organische Formen
const knotGeo = new THREE.TorusKnotGeometry(0.8, 0.3, 128, 16);

// MeshStandardMaterial — PBR (Physically Based Rendering)
const material = new THREE.MeshStandardMaterial({
  color: 0x049ef4,
  metalness: 0.3,
  roughness: 0.4,
  wireframe: false,
});

// Mesh = Geometrie + Material
const cube = new THREE.Mesh(boxGeo, material);
cube.castShadow = true;
scene.add(cube);

Textures laden

Für realistische Oberflächen kombiniert Three.js mehrere Texture-Maps. Claude Code generiert vollständige PBR-Setups mit Color-, Normal- und Roughness-Maps:

const loader = new THREE.TextureLoader();

const colorMap   = loader.load('/textures/rock_color.jpg');
const normalMap  = loader.load('/textures/rock_normal.jpg');
const roughMap   = loader.load('/textures/rock_roughness.jpg');

// Repeat für Tiling
[colorMap, normalMap, roughMap].forEach(t => {
  t.wrapS = t.wrapT = THREE.RepeatWrapping;
  t.repeat.set(4, 4);
});

const rockMat = new THREE.MeshStandardMaterial({
  map: colorMap,
  normalMap,
  roughnessMap: roughMap,
  normalScale: new THREE.Vector2(1, 1),
});

3. Lights und Shadows

Ohne Beleuchtung sind PBR-Materialien sinnlos — eine dunkle Szene zeigt nur schwarze Objekte. Three.js bietet mehrere Lichttypen. Claude Code kombiniert sie für realistische Beleuchtung:

// Ambient — gleichmäßiges Grundlicht, keine Schatten
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

// DirectionalLight — parallele Strahlen, wie Sonne
const sun = new THREE.DirectionalLight(0xfff5e0, 1.2);
sun.position.set(10, 20, 10);
sun.castShadow = true;

// Shadow-Kamera konfigurieren
sun.shadow.camera.near = 0.5;
sun.shadow.camera.far  = 60;
sun.shadow.camera.left = -15;
sun.shadow.camera.right = 15;
sun.shadow.camera.top   = 15;
sun.shadow.camera.bottom = -15;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.bias = -0.001;
scene.add(sun);

// PointLight — Punktlichtquelle, 360°
const point = new THREE.PointLight(0x049ef4, 2, 10);
point.position.set(-3, 2, 2);
point.castShadow = true;
scene.add(point);

// Boden — receiveShadow
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(20, 20),
  new THREE.MeshStandardMaterial({ color: 0x1a2233 })
);
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);

Environment Maps für IBL

Image-Based Lighting (IBL) über RGBELoader oder PMREMGenerator liefert realistischeres Umgebungslicht als einzelne Lichtquellen. Claude Code lädt HDR-Environments direkt:

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

const pmrem = new THREE.PMREMGenerator(renderer);
pmrem.compileEquirectangularShader();

new RGBELoader().load('/env/studio.hdr', (hdr) => {
  const envMap = pmrem.fromEquirectangular(hdr).texture;
  scene.environment = envMap;
  scene.background  = envMap;
  hdr.dispose();
  pmrem.dispose();
});

4. Animationen — Mixer, Clock, Tweening

Three.js bietet mehrere Animations-Schichten: einfache Property-Animationen im Render-Loop, den AnimationMixer für Skelett-Animationen aus GLTF-Dateien und externe Tweening-Libraries wie GSAP für komplexe Übergänge.

Render Loop Animationen

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const delta = clock.getDelta(); // Zeit seit letztem Frame in Sekunden
  const elapsed = clock.getElapsedTime();

  // Rotation — delta-basiert, frame-rate unabhängig
  cube.rotation.y += 0.5 * delta;
  cube.rotation.x += 0.3 * delta;

  // Floating-Animation mit Sinus
  sphere.position.y = Math.sin(elapsed * 2) * 0.5 + 1;

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

AnimationMixer für GLTF-Animationen

let mixer;

const gltfLoader = new GLTFLoader();
gltfLoader.load('/models/character.glb', (gltf) => {
  scene.add(gltf.scene);

  // Mixer für alle Animationen des Modells
  mixer = new THREE.AnimationMixer(gltf.scene);

  // Erste Animation abspielen
  const action = mixer.clipAction(gltf.animations[0]);
  action.play();
});

// Im Render Loop updaten
function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  if (mixer) mixer.update(delta);
  renderer.render(scene, camera);
}

GSAP Tweening

GSAP (GreenSock Animation Platform) integriert sich nahtlos in Three.js und ermöglicht komplexe Tweens mit Easing, Timelines und ScrollTrigger:

import { gsap } from 'gsap';

// Objekt bewegen mit Easing
gsap.to(cube.position, {
  x: 3,
  y: 2,
  duration: 1.5,
  ease: 'power2.out',
  yoyo: true,
  repeat: -1,
});

// Kamera-Flug auf Klick
function flyToObject(target) {
  gsap.to(camera.position, {
    x: target.x + 2,
    y: target.y + 1,
    z: target.z + 4,
    duration: 2,
    ease: 'power3.inOut',
    onUpdate: () => camera.lookAt(target),
  });
}

5. GLTF-Modelle — GLTFLoader und Draco-Kompression

GLTF (GL Transmission Format) ist das Standard-Format für 3D-Modelle im Web — kompakt, effizient und unterstützt Materialien, Animationen und Skelette in einer Datei. Claude Code generiert vollständige Loader-Setups inklusive Fehlerbehandlung und Draco-Dekompression:

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

// Draco-Decoder — komprimierte Geometrien
const draco = new DRACOLoader();
draco.setDecoderPath('/draco/'); // Decoder-WASM aus node_modules kopieren

const loader = new GLTFLoader();
loader.setDRACOLoader(draco);

// Laden mit Progress + Error Handling
loader.load(
  '/models/scene.glb',
  (gltf) => {
    const model = gltf.scene;

    // Alle Meshes Shadow-ready machen
    model.traverse((child) => {
      if (child.isMesh) {
        child.castShadow    = true;
        child.receiveShadow = true;
      }
    });

    // Modell zentrieren und skalieren
    const box = new THREE.Box3().setFromObject(model);
    const center = box.getCenter(new THREE.Vector3());
    model.position.sub(center);

    scene.add(model);
  },
  (progress) => {
    const pct = (progress.loaded / progress.total * 100).toFixed(0);
    console.log(`Laden: ${pct}%`);
  },
  (error) => console.error('GLTF-Fehler:', error)
);

Modell-Optimierung für Web

// LoadingManager für mehrere Assets gleichzeitig
const manager = new THREE.LoadingManager(
  () => { // onLoad — alle Assets fertig
    document.getElementById('loading').style.display = 'none';
    animate();
  },
  (url, loaded, total) => { // onProgress
    updateProgressBar(loaded / total * 100);
  }
);

const textureLoader = new THREE.TextureLoader(manager);
const gltfLoaderManaged = new GLTFLoader(manager);

6. React Three Fiber — Canvas, mesh, useFrame

React Three Fiber (R3F) ist ein React-Renderer für Three.js — es mappt Three.js-Objekte auf JSX-Komponenten. Statt imperativem Code mit scene.add() schreibst du deklarative Komponenten. Claude Code erstellt vollständige R3F-Setups mit TypeScript:

// npm install @react-three/fiber @react-three/drei three
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { OrbitControls, Environment, useGLTF } from '@react-three/drei';
import { useRef, useState } from 'react';
import * as THREE from 'three';

// Rotierende Box-Komponente
function RotatingBox() {
  const meshRef = useRef<THREE.Mesh>(null);
  const [hovered, setHovered] = useState(false);

  // useFrame — läuft jeden Frame im Render Loop
  useFrame((state, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.y += delta * 0.5;
      meshRef.current.rotation.x += delta * 0.2;
    }
  });

  return (
    <mesh
      ref={meshRef}
      castShadow
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial
        color={hovered ? '#ff6b6b' : '#049ef4'}
        metalness={0.3}
        roughness={0.4}
      />
    </mesh>
  );
}

// GLTF-Modell mit useGLTF (drei)
function Model({ url }: { url: string }) {
  const { scene, animations } = useGLTF(url);
  const mixer = useRef<THREE.AnimationMixer>();

  useFrame((_, delta) => {
    mixer.current?.update(delta);
  });

  return <primitive object={scene} />;
}

// Preload für bessere Performance
useGLTF.preload('/models/scene.glb');

// App — Canvas als Root
export default function App() {
  return (
    <Canvas
      shadows
      camera={{ position: [0, 2, 5], fov: 75 }}
      gl={{ antialias: true, toneMapping: THREE.ACESFilmicToneMapping }}
    >
      <ambientLight intensity={0.4} />
      <directionalLight position={[10, 20, 10]} castShadow intensity={1.2} />
      <Environment preset="studio" />
      <RotatingBox />
      <Model url="/models/scene.glb" />
      <OrbitControls enableDamping />
    </Canvas>
  );
}

drei Helpers — Das React Three Fiber Ökosystem