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. Seit Three.js r157 (September 2023) ist auch es-module-shims überflüssig — moderne Browser unterstützen Import Maps nativ.

I

Import 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.

<script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/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.

Kernerkenntnis

CDN-Wahl: esm.sh (stabil, wandelt CommonJS zu ESM, Deep Imports funktionieren) oder jsDelivr (sehr schnell, git-Tag-Support) als Alternative. unpkg funktioniert, hat aber gelegentlich Rate-Limiting. Skypack ist ab v137 kaputt für Deep-Imports und wird nicht mehr empfohlen. esm.sh ist stabiler, schneller und wird aktiv maintained. Die Import Map mit esm.sh ist der empfohlene Standard für Vibe Coders.

II

5 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.

III

Vibe-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

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.

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?"

Weiterlesen

Web Dev for Vibe Coders: Der komplette Guide 2026 Websites bauen mit Vibe Coding: Vom Prompt über Vanilla JS und Three.js bis zum Vercel-Deploy. Der Komplett-Guide mit W... Vibe Coding: Website erstellen von der Idee bis zum Deploy Website mit Vibe Coding bauen: Prompt strukturieren, HTML generieren, auf Vercel deployen. Komplettanleitung mit 4-Phase... Code Snippets für Vibe Coders: Context Engineering auf GitHub — geprägt von Shopify-CEO Tobi Lütke Snippet-Repo als Vibe-Coding-Turbo: CLAUDE.md, Context Engineering und die besten GitHub-Repos für Vibe Coders. Mit Ord...