{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "spielbare-3d-welt",
 "name": "Spielbare 3D-Welt als Navigation",
 "name_en": "Playable 3D world / game-like portfolio",
 "kurz": "Die Kieler Förde als kleine Spielwelt: Mit dem Vereinsboot fährt man fünf Projektorte an, jede Boje öffnet eine Wirkungskarte, und alle Inhalte gibt es auch als 2D-Liste.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "verspielt",
  "laut",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "warm",
  "persönlich",
  "laut"
 ],
 "technik": [
  "three",
  "r3f",
  "rapier",
  "webgl-shader"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Die Seite ist eine kleine 3D-Welt, etwa eine Insel, ein Planet, ein Raum oder eine Stadt. Man steuert ein Fahrzeug oder eine Figur mit Tastatur oder Touch, oder klickt Orte an. Einfache Physik sorgt für Kollisionen und Spielzeug-Gefühl. Die Inhalte sind Orte in der Welt. Ein klassisches Menü oder eine Liste führt als Abkürzung direkt dorthin. Stilisiertes Rendering mit Toon-Shading, Matcaps oder gebackenem Licht spart Leistung und gibt Charme. Ton ist optional.",
  "warum_es_wirkt": "Besucher bleiben länger und erzählen davon weiter. Die Welt zeigt Persönlichkeit und Können und macht das Erkunden selbst zum Erlebnis.",
  "wann_einsetzen": "Für persönliche Portfolios von Kreativen und Entwickler:innen, Kampagnenseiten, Spielzeug- und Gaming-Marken und Projekte für Kinder.",
  "wann_nicht": "Für Kund:innen, die schnell Informationen brauchen, wenn es keine Abkürzung zu den Inhalten gibt. Nicht als einzige Startseite, wenn Besucher etwas erledigen sollen.",
  "varianten": [
   "Fahrbares Fahrzeug durch die Welt (wie das Auto-Portfolio von Bruno Simon)",
   "Kleine Planetenwelt (Messenger von Abeto)",
   "Spielzeug-Eisenbahnwelt (Choo Choo World von Lusion)",
   "Physik-Charakter-Controller mit Rapier in React Three Fiber",
   "Retro-Konsolen-Konzept mit Boot-Sequenz (Goodgrowth)"
  ],
  "umsetzung": "Licht in Blender backen, Matcaps oder Toon-Shading statt PBR, wenige Draw Calls durch Zusammenfassen und Instancing. Bei längerer Ladezeit einen Ladebildschirm mit Fortschritt zeigen. Immer eine 2D-Abkürzung zu allen Inhalten anbieten, am besten als echte HTML-Liste, die auch die Inhalte der Orte trägt.",
  "mobil": "Touch-Joystick oder Tippen zum Hinfahren, dazu eine vereinfachte Welt.",
  "reduzierte_bewegung": "Kamera ohne Schwenks und ohne Wackeln. Eine 2D-Ansicht anbieten.",
  "barrierefreiheit": "Alle Inhalte zusätzlich als vollständiges HTML. Tastatursteuerung sichtbar erklären. Ton nur nach Zustimmung per Klick. Die Spielfläche bekommt Fokus und eine Beschriftung."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Draw Calls < 100–200; Gesamt-Assets idealerweise < 10 MB",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Bruno Simon – Portfolio",
   "url": "https://bruno-simon.com",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Three.js r183 mit new WebGPURenderer (TSL), InstancedMesh für Szenenobjekte, GSAP-Eases back.out(2), elastic.out(1.3, 0.4).",
   "art": "website"
  },
  {
   "seite": "Messenger (Abeto)",
   "url": "https://messenger.abeto.co",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Three.js r180, instanzierte Gras- und Schmetterlings-Patches aus Draco-Dateien (grass.drc, butterflies.drc), Tweens elastic.out(1, 0.75).",
   "art": "website"
  },
  {
   "seite": "Choo Choo World (Lusion)",
   "url": "https://choochooworld.com/",
   "auszeichnung": "",
   "beobachtung": "Lusion-Projekt mit Tags Konzept, Web, Game Design, 3D.",
   "art": "website"
  },
  {
   "seite": "Goodgrowth (Codrops Case Study)",
   "url": "https://tympanus.net/codrops/2026/08/27/goodgrowth-boot-sequences-spinning-discs-and-the-art-of-the-portfolio/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: konsoleninspiriertes Portfolio-Konzept mit 3D, Motion und Sound (Boot-Sequenzen, rotierende Discs).",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Goodgrowth: Boot Sequences, Spinning Discs, and the Art of the Portfolio",
   "url": "https://tympanus.net/codrops/2026/08/27/goodgrowth-boot-sequences-spinning-discs-and-the-art-of-the-portfolio/"
  },
  {
   "titel": "Sixty Frames for the Record: A Three.js Game, Seven Fly-Throughs, and a Wall of CRTs",
   "url": "https://tympanus.net/codrops/2026/08/22/sixty-frames-for-the-record-a-three-js-game-seven-fly-throughs-and-a-wall-of-crts/"
  }
 ],
 "kombinierbar_mit": [
  "audio-reaktiv-3d",
  "interaktives-3d-hero"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/spielbare-3d-welt/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/spielbare-3d-welt/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/spielbare-3d-welt/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Beide bisher website-ungeprueft (gleiche URLs) – jetzt verifiziert."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Kieler Förde als kleine Spielwelt: Mit dem Vereinsboot fährt man fünf Projektorte an, jede Boje öffnet eine Wirkungskarte, und alle Inhalte gibt es auch als 2D-Liste.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "boot": "max. 9 m/s vorwärts, 3 m/s rückwärts, Beschleunigung 7, Wasserwiderstand 1.1 × v, Drehen 1.9 rad/s (bei Stillstand 35 %), Krängung 0.05 × Lenkung × v",
   "kollision": "Ufer als Ellipsen + 1.3 Einheiten Bootsbreite; Boot wird auf den Rand geschoben, Abprall −0.3 × v, Kamera-Stoß 0.35 klingt mit 0.9 je Bild ab",
   "kamera_fahren": "folgt mit Lerp 0.06 je Bild (60 Bilder/s), Abstand 36 hoch / 34 zurück, fov 36, Boot 12 Einheiten rechts der Mitte (Platz für Text), Blick 2 Einheiten voraus; Hochformat 1.35-facher Abstand, Blick 17 Einheiten voraus, Start 14 statt 4 Einheiten vor Möltenort",
   "kamera_karte": "Überblick aus 112 Höhe, 52 zurück, Mitte x −30, fov 40, ohne Schwenk",
   "orte": "Boje löst bei 6 Einheiten aus, Karte schließt ab 10 Einheiten",
   "ortskarte": "opacity und 8 px translate 600 ms cubic-bezier(0.645, 0.045, 0.355, 1)",
   "odometer": "1400 ms cubic-bezier(0.645, 0.045, 0.355, 1), einmal je Ort, de-DE Tausenderpunkt",
   "ui": "Knöpfe und Chips 150 ms linear (Farbe)",
   "kielwasser": "36 Scheiben, alle 90 ms ab 1.2 m/s, Lebensdauer 1600 ms, Größe (0.5 + 1.8a)(1 − a²)",
   "welt": "Wasser-Shader mit Flachwasser, Uferschaum und drei Seegrasflecken; 5 Land-Plateaus, 150 Bäume und 34 Häuser als InstancedMesh, rund 40 Draw Calls, keine Schatten (Blob-Schatten), Nebel 95–190 bzw. 170–320 im Überblick",
   "ton": "aus, nach Klick: braunes Rauschen über Tiefpass 520 Hz (Pegel 0.05, LFO 0.12 Hz) als Wellen, Glocke 784/1176/1568 Hz 1.4 s beim Fund, 180/120 Hz 0.25 s beim Anstoßen",
   "vorfuehrung": "Autopilot: startet angelegt an Möltenort (3,2 s Karte), dann Friedrichsort, Schilksee, Kiellinie, Hörn, je 1,8 s Halt; gedachter Zeiger zeigt auf das Ziel"
  },
  "ausloeser": "klick",
  "touch": "Tap-to-move: Tippen ins Wasser fährt dorthin, Tippen auf eine Boje oder einen Chip fährt zum Ort. Senkrechtes Wischen scrollt die Seite (touch-action: pan-y). Chips zeigen nur Nummern, der Name bleibt für Screenreader.",
  "reduziert": "Kamera steht im Überblick ohne Schwenk und ohne Stoß. Keine schaukelnden Bojen, kein Kielwasser, keine Krängung. Chips und Bojen setzen das Boot direkt an den Ort, Zahlen stehen sofort. Die 2D-Liste ist einen Klick entfernt.",
  "korrekturen": {
   "beschreibung": "Die Seite ist eine kleine 3D-Welt, etwa eine Insel, ein Planet, ein Raum oder eine Stadt. Man steuert ein Fahrzeug oder eine Figur mit Tastatur oder Touch, oder klickt Orte an. Einfache Physik sorgt für Kollisionen und Spielzeug-Gefühl. Die Inhalte sind Orte in der Welt. Ein klassisches Menü oder eine Liste führt als Abkürzung direkt dorthin. Stilisiertes Rendering mit Toon-Shading, Matcaps oder gebackenem Licht spart Leistung und gibt Charme. Ton ist optional.",
   "warum_es_wirkt": "Besucher bleiben länger und erzählen davon weiter. Die Welt zeigt Persönlichkeit und Können und macht das Erkunden selbst zum Erlebnis.",
   "wann_einsetzen": "Für persönliche Portfolios von Kreativen und Entwickler:innen, Kampagnenseiten, Spielzeug- und Gaming-Marken und Projekte für Kinder.",
   "wann_nicht": "Für Kund:innen, die schnell Informationen brauchen, wenn es keine Abkürzung zu den Inhalten gibt. Nicht als einzige Startseite, wenn Besucher etwas erledigen sollen.",
   "varianten": [
    "Fahrbares Fahrzeug durch die Welt (wie das Auto-Portfolio von Bruno Simon)",
    "Kleine Planetenwelt (Messenger von Abeto)",
    "Spielzeug-Eisenbahnwelt (Choo Choo World von Lusion)",
    "Physik-Charakter-Controller mit Rapier in React Three Fiber",
    "Retro-Konsolen-Konzept mit Boot-Sequenz (Goodgrowth)"
   ],
   "umsetzung": "Licht in Blender backen, Matcaps oder Toon-Shading statt PBR, wenige Draw Calls durch Zusammenfassen und Instancing. Bei längerer Ladezeit einen Ladebildschirm mit Fortschritt zeigen. Immer eine 2D-Abkürzung zu allen Inhalten anbieten, am besten als echte HTML-Liste, die auch die Inhalte der Orte trägt.",
   "mobil": "Touch-Joystick oder Tippen zum Hinfahren, dazu eine vereinfachte Welt.",
   "reduzierte_bewegung": "Kamera ohne Schwenks und ohne Wackeln. Eine 2D-Ansicht anbieten.",
   "barrierefreiheit": "Alle Inhalte zusätzlich als vollständiges HTML. Tastatursteuerung sichtbar erklären. Ton nur nach Zustimmung per Klick. Die Spielfläche bekommt Fokus und eine Beschriftung."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein „Fördegrün e.V.“ aus Kiel (Seegras-Wiederansiedlung): Big Shoulders 800 versal, Archivo, Navy #002e6d, helle Fläche #edf5fa, warmes Grau #dfdfd7 als Land, Gelb #ffca0a nur am Spenden-Knopf. Das Rezept schließt 3D-Hero auf der Startseite aus; hier ist es bewusst eine Kampagnen-Unterseite („Mitmach-Karte“) mit wenigen Draw Calls, ohne Preloader, mit Spenden-Knopf im Kopf und der 2D-Liste als gleichwertiger Abkürzung. Fünf echte Orte an der Förde, Wirkungszahlen mit Stand. Varianten: Fahren, Karte (Orte anklicken), 2D. Eigene Physik ohne Rapier. Referenzen: bruno-simon.com, messenger.abeto.co, david-hckh.com, field.io, sea-watch.org. AD-Review 01.11.2026: Note 4. Nachgebessert: Im Hochformat startet das Boot 14 statt 4 Einheiten vor Möltenort und die Kamera blickt 17 statt 6 Einheiten voraus, damit Boje 3 nicht mehr in der Headline steht; Überblick 8 Einheiten nach Westen versetzt, damit Land und Bäume die Headline frei lassen; Tastenhinweis mit ↓/S, „Steuere“. Zugang 02.11.2026: Pause-Knopf „Bewegung anhalten“ an der Orte-Zeile (button, aria-pressed): friert Wasser, Bojen und Wellengang ein wie bei reduzierter Bewegung, Steuern bleibt möglich; am Telefon über dem Zähler, in Vorschau und bei reduzierter Bewegung ausgeblendet. „Lieber als Liste“ mit 3 px padding-block (Ziel ≥ 24 px). Knopfrahmen im Kontrastmodus."
 }
}