WHILE.CHAT·WORK · Tech & KI·8 MIN·Max Götte
Three.js ohne Framework: 3D für Vibe Coders
work · Tech & KIJuni 20268 Min. LesezeitMax Götte

Three.js ohne Framework: 3D für Vibe Coders

Jede vibe-gecodete Website sieht gleich aus: Inter Font, weisser Hintergrund, blaue Buttons. Das ist der AI-Look, und ein Three.js 3D-Hero durchbricht ihn sofort. Seit Import Maps in allen modernen Browsern funktionieren (Chrome 89+, Firefox 108+, Safari 16.4+), brauchst du weder npm noch einen Bundler. Seit Three.js r157 (September 2023) ist zudem kein es-module-shims Polyfill mehr nötig, ein wichtiger Qualitätshinweis für ältere Tutorials die es noch empfehlen.

// 01 / 03Import Maps statt CDN-Script-Tag

Die alte Methode mit Script-Tag und globalem THREE-Objekt funktioniert, hat aber Nachteile: kein Tree-Shaking, keine Addons (OrbitControls, GLTFLoader), Versionskonflikte bei Deep-Imports ab v137 auf Skypack. Die moderne Methode: Import Maps mit esm.sh als CDN.

html · importmap<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/max@while.chat/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/max@while.chat/examples/jsm/"
}
}
</script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60,
innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 4, 21);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

// Deine Szene hier
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>

Diese Datei ist sofort deploybar. Kein npm install, kein vite.config.js. Und anders als das r128-CDN-Pattern unterstützt sie OrbitControls, GLTFLoader und jedes andere Three.js Addon direkt.

// 02 / 035 Szenen-Typen die per Prompt funktionieren

1. Partikel-Galaxie. PointsMaterial mit tausenden Punkten in einer Spiralformation. Ideal für Hero-Hintergründe. Per Vibe Coding in 5 Minuten generierbar, ein vollständiges Snippet mit GLSL-Vertex-Shader erzeugt 150.000 Partikel.

2. Wireframe-Geometrien. Rotierende BoxGeometry, IcosahedronGeometry oder TorusGeometry mit wireframe: true. Drei Zeilen Code, maximaler Effekt. Ideal für Tech-Themen.

3. Netzwerk-Knoten. Points mit Verbindungslinien bei Nähe. Der Klassiker für KI- und Netzwerk-Themen. Jeder Artikel auf while.chat nutzt eine Variante davon.

4. 3D Image Carousel. Claude Code kann komplexe Carousels mit Three.js Shading Language (TSL) und WebGPU aus Screenshots rekonstruieren. Mouse-Wheel und Drag-Interaktion via PointerEvents.

5. 3D Game Environment. Ein komplettes Game-Environment lässt sich per Vibe Coding in unter 10 Minuten aufsetzen, dokumentiert auf YouTube mit Cursor und Three.js.

// 03 / 03Vibe-Coding-Workflow für Three.js

1. Szenentyp beschreiben: "floating particles", "rotating globe", "wireframe icosahedron".

2. Import Map vorgeben: Immer die eigene Import-Map-Version in den Prompt kopieren. Verhindert Versionskonflikte.

3. Isoliert iterieren: Kamera-Position, Material-Properties und Animation-Speed separat prompten. Nicht alles auf einmal ändern.

4. Performance checken: setPixelRatio(Math.min(window.devicePixelRatio, 2)) verhindert Überrendering auf Retina-Displays. Max 500 Vertices für Hero-Szenen. Lighthouse-Compliance prüfen.

5. Accessibility einbauen: Canvas-Container bekommt role="img" und aria-label. prefers-reduced-motion: Canvas ausblenden, Gradient-Fallback zeigen. Nicht optional.

Das fertige Snippet gehört in die Snippet-Bibliothek, einmal richtig gebaut, bei jedem Projekt wiederverwendet.

Häufige Fragen

Quellen

  • sbcode.net, "Using Import Maps with Three.js" (Tutorial)
  • esm.sh, ES Module CDN (esm.sh)
  • Skypack Issue #261, Deep Import Probleme ab Three.js v137
  • builder.io, "Vibe code immersive 3D effects in one prompt"
  • wawasensei.dev, "Vibe Code a 3D Carousel with Claude Code & Three.js"
  • YouTube, "I vibe coded a 3D game w/ three.js in 10 minutes"
  • jsDelivr, cdn.jsdelivr.net/npm/three (Alternative zu esm.sh)
  • jvns.ca, "Importing a frontend Javascript library without a build system"
  • Three.js Discourse, "Why does Three.js require an import map?"

// micro-journal

Welche eine 3D-Szene baust du als Erstes?

Ein Satz reicht. Das Journal bleibt lokal in deinem Browser — kein Konto, kein Server.

notierenMG

Max Götte

SEO Strategist · Founder · while.chat

Ich bin Max, SEO Strategist aus Bochum. Von Audit über Content-Strategie bis Local SEO. KMU im DACH-Raum, evidenzbasiert, ohne Hype-Versprechen.

projekt anfragen → WhatsApp mehr Artikel

FAQ

Warum Import Maps statt dem alten Script-Tag?

Import Maps ermöglichen ES-Module-Syntax (import/export), Zugriff auf alle Three.js Addons (OrbitControls, GLTFLoader etc.) und präzise Versionskontrolle. Der alte Script-Tag mit globalem THREE-Objekt unterstützt keine Addons und hat Versionskonflikte ab v137.

Welchen Performance-Impact hat Three.js?

Minimal bei korrekter Einbindung: Canvas mit fester Höhe (kein CLS), setPixelRatio begrenzen, max 500 Vertices für Heros, reduced-motion-Fallback. Lighthouse bleibt bei 95-100.

Kann ich auch GLTF-Modelle laden ohne Build-Tool?

Ja, dank Import Maps. GLTFLoader importieren.glb-Datei neben die HTML legen, fertig. Für Hero-Hintergründe sind generative Szenen (Partikel, Geometrien) fast immer leichter und schneller als 3D-Modelle.

Wie kombiniere ich Three.js mit dem restlichen Vibe-Coding-Workflow?

Three.js ist eine Komponente im Gesamt-Workflow. Erst die Seite bauen (B1), dann Performance sicherstellen (B4), dann den 3D-Hero als letztes Layer hinzufügen.

← Zurück zur Übersicht