{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "interaktives-3d-hero",
 "name": "Interaktives 3D-Objekt im Hero",
 "name_en": "Interactive 3D hero object (Three.js / R3F)",
 "kurz": "Ein gedrechselter Holzkreisel als Hero-Objekt: neigt sich zum Zeiger, lässt sich mit Nachlauf drehen und läuft angeworfen mit Präzession aus.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "luxuriös",
  "verspielt"
 ],
 "stimmung_roh": [
  "verspielt",
  "hochwertig",
  "technisch"
 ],
 "technik": [
  "three",
  "r3f",
  "drei",
  "gsap"
 ],
 "technik_gruppen": [
  "gsap",
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein einzelnes 3D-Objekt mit inhaltlichem Bezug steht im Hero: ein Produkt, ein Logo-Körper, ein Maskottchen oder eine Metapher. Es reagiert auf den Zeiger (gelerpte Neigung), auf Ziehen (begrenzte Drehung mit Nachlauf) und auf Scroll. Studio-Licht aus einer Environment-Map und ein weicher Kontaktschatten machen es greifbar. Im Ruhezustand schwebt es leicht und dreht sich langsam. Das Material trägt die Wirkung: Holz, Glas, Chrom, Kork, Stoff oder Toon-Shading.",
  "warum_es_wirkt": "Die Interaktion ist sofort greifbar. Das Objekt zeigt Handwerk und lädt zum Spielen ein, ohne die Seite zu übernehmen.",
  "wann_einsetzen": "Für Produkte, für Marken mit einem ikonischen Objekt und für Studio-Portfolios.",
  "wann_nicht": "Wenn das Objekt austauschbare Deko ohne Bezug ist, etwa ein Torus oder eine Low-Poly-Kugel. Dieser Stil klingt 2026 deutlich ab.",
  "varianten": [
   "Neigen: Das Objekt kippt gelerpt zum Zeiger, dazu Schweben und langsames Eigendrehen.",
   "Ziehen: Drehen per Drag mit Nachlauf, senkrecht begrenzt, federt beim Loslassen zurück (PresentationControls).",
   "Physik-Spielzeug: Das Objekt wird angeworfen und läuft physikalisch aus (eigene Formel oder Rapier).",
   "Ziehbarer Logo-Körper, auch im ASCII-Look.",
   "Blob mit verformbarem Material (14islands Blobmixer).",
   "Retro-Computer mit funktionierendem Bildschirm (Henry Heffernan)."
  ],
  "umsetzung": "Three.js direkt oder React Three Fiber mit drei (Environment, ContactShadows, Float, PresentationControls). Das Modell bleibt komprimiert unter 1 bis 2 MB. Ein Poster-Bild steht da, bis das erste Bild gerendert ist, und bleibt ohne WebGL stehen. Die Canvas ist nur so groß wie nötig. Ruht das Objekt, wird nicht weiter gerendert (in R3F frameloop=\"demand\"). Die Neigung wird bildratenunabhängig gelerpt: 1 − (1 − lerp)^(dt · 60).",
  "mobil": "Neigen per Antippen und Ziehen oder per Gyroskop (auf iOS nur nach Erlaubnis). Waagerechtes Ziehen dreht, senkrecht scrollt die Seite weiter (touch-action: pan-y). Pixelratio begrenzen. Alternativ ein statisches Rendering.",
  "reduzierte_bewegung": "Kein Schweben, keine Eigendrehung, kein Nachlauf. Das Objekt steht still und dreht sich nur, wenn jemand es bewegt.",
  "barrierefreiheit": "Die Canvas ist aria-hidden. Ein fokussierbares Element mit role=\"img\" und aria-label beschreibt das Objekt. Ziehen ist nicht das einzige Bedienmittel: Pfeiltasten drehen und neigen, die Leertaste wirft an. Der Bedienhinweis steht als Text daneben."
 },
 "messwerte": {
  "easing": "Lerp 0.05–0.1; Float speed 1–2, floatIntensity 0.5–1",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Neigung max. 10–20°",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Blobmixer (14islands)",
   "url": "https://blobmixer.14islands.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): React-Three-Fiber-App (main.538afb65.js) mit Three.js, troika-Text, Postprocessing und AudioAnalyser; interaktiver Blob als Vollbild-Einstieg.",
   "art": "website"
  },
  {
   "seite": "Henry Heffernan – Portfolio",
   "url": "https://henryheffernan.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Three.js-Bundle (bundle.cf64568055686c74.js) rendert den begehbaren 3D-Computer als Einstieg; Lade-Punkte per steps(1, end).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Oryzo AI (Lusion)",
   "url": "http://oryzo.ai",
   "auszeichnung": "Awwwards und FWA Site of the Month",
   "beobachtung": "Alltagsobjekt (Korkuntersetzer) als Hero-Produkt inszeniert.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Interactive 3D models in Webflow using Three.js (Codrops-Tutorial-Liste)",
   "url": "https://tympanus.net/codrops/category/tutorials/"
  }
 ],
 "kombinierbar_mit": [
  "glas-transmission-3d",
  "ascii-dither-pixel-stil",
  "fluessigmetall-chrom"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/interaktives-3d-hero/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/interaktives-3d-hero/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/interaktives-3d-hero/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Beide bisher website-ungeprueft (gleiche URLs) – jetzt verifiziert, beim Merge zusammenführen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein gedrechselter Holzkreisel als Hero-Objekt: neigt sich zum Zeiger, lässt sich mit Nachlauf drehen und läuft angeworfen mit Präzession aus.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "lerp": "0.08 je Bild bei 60 Bildern/s, umgerechnet: 1 − (1 − 0.08)^(dt·60)",
   "neigung_max": "15° zum Zeiger (Zeigerabstand ±35 % der Bühne = volle Neigung)",
   "float": "wie drei <Float>: speed 1.5, floatIntensity 0.8, rotationIntensity 0.5; y = sin(t/4 · 1.5)/10 · 0.8",
   "schwebehoehe": "0.22 Objekthöhen über dem Boden",
   "idle_drehung": "0.2 rad/s",
   "ziehen": "0.006 rad je Pixel, Nachlauf ×0.95 je Bild, senkrecht begrenzt auf ±20°",
   "zurueckfedern": "Feder masse 1, spannung 170, reibung 26 (wie drei PresentationControls snap)",
   "anwerfen": "Startdrehzahl 18 rad/s, Reibung dω/dt = −(0.15·ω + 0.3) → rund 15 s Laufzeit, Präzession 6/ω rad/s, Schräglage bis 17° beim Auslaufen, Anwurf-Taumeln 7° und +5 rad/s, klingt mit e^(−t/1 s) ab",
   "scroll": "halbe Umdrehung und Anstieg über eine Bühnenhöhe",
   "einblenden": "Poster-SVG → Canvas, opacity 1200 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "ui": "Umschalter 150 ms linear",
   "kamera": "PerspectiveCamera fov 26, Position (0, 2.2, 9.5), Blick auf (0, 0.55, 0)",
   "licht": "eigene Studio-Umgebung (4 Softboxen) über PMREM, dazu DirectionalLight 1.6; ACES-Tonemapping",
   "material": "MeshPhysicalMaterial roughness 0.42, clearcoat 0.7, clearcoatRoughness 0.18, sheen 0.2; Holz und Lackringe als Canvas-Textur",
   "geometrie": "LatheGeometry, 91 Profilpunkte × 96 Segmente",
   "pixelratio": "max. 2, Touch max. 1.5"
  },
  "ausloeser": "hover",
  "touch": "Neigen per Antippen und Ziehen, beim Loslassen zurück in die Ruhe. Ziehen dreht nur waagerecht (touch-action: pan-y, senkrecht scrollt die Seite). Anwerfen per Wischen. Pixelratio auf 1.5 begrenzt.",
  "reduziert": "Kein Schweben, keine Eigendrehung, kein Nachlauf, keine Neigung. Der Kreisel steht still und lässt sich nur per Hand (Ziehen 1:1 oder Pfeiltasten in 15°-Schritten) drehen. Gerendert wird nur bei Eingabe.",
  "korrekturen": {
   "beschreibung": "Ein einzelnes 3D-Objekt mit inhaltlichem Bezug steht im Hero: ein Produkt, ein Logo-Körper, ein Maskottchen oder eine Metapher. Es reagiert auf den Zeiger (gelerpte Neigung), auf Ziehen (begrenzte Drehung mit Nachlauf) und auf Scroll. Studio-Licht aus einer Environment-Map und ein weicher Kontaktschatten machen es greifbar. Im Ruhezustand schwebt es leicht und dreht sich langsam. Das Material trägt die Wirkung: Holz, Glas, Chrom, Kork, Stoff oder Toon-Shading.",
   "warum_es_wirkt": "Die Interaktion ist sofort greifbar. Das Objekt zeigt Handwerk und lädt zum Spielen ein, ohne die Seite zu übernehmen.",
   "wann_einsetzen": "Für Produkte, für Marken mit einem ikonischen Objekt und für Studio-Portfolios.",
   "wann_nicht": "Wenn das Objekt austauschbare Deko ohne Bezug ist, etwa ein Torus oder eine Low-Poly-Kugel. Dieser Stil klingt 2026 deutlich ab.",
   "varianten": [
    "Neigen: Das Objekt kippt gelerpt zum Zeiger, dazu Schweben und langsames Eigendrehen.",
    "Ziehen: Drehen per Drag mit Nachlauf, senkrecht begrenzt, federt beim Loslassen zurück (PresentationControls).",
    "Physik-Spielzeug: Das Objekt wird angeworfen und läuft physikalisch aus (eigene Formel oder Rapier).",
    "Ziehbarer Logo-Körper, auch im ASCII-Look.",
    "Blob mit verformbarem Material (14islands Blobmixer).",
    "Retro-Computer mit funktionierendem Bildschirm (Henry Heffernan)."
   ],
   "umsetzung": "Three.js direkt oder React Three Fiber mit drei (Environment, ContactShadows, Float, PresentationControls). Das Modell bleibt komprimiert unter 1 bis 2 MB. Ein Poster-Bild steht da, bis das erste Bild gerendert ist, und bleibt ohne WebGL stehen. Die Canvas ist nur so groß wie nötig. Ruht das Objekt, wird nicht weiter gerendert (in R3F frameloop=\"demand\"). Die Neigung wird bildratenunabhängig gelerpt: 1 − (1 − lerp)^(dt · 60).",
   "mobil": "Neigen per Antippen und Ziehen oder per Gyroskop (auf iOS nur nach Erlaubnis). Waagerechtes Ziehen dreht, senkrecht scrollt die Seite weiter (touch-action: pan-y). Pixelratio begrenzen. Alternativ ein statisches Rendering.",
   "reduzierte_bewegung": "Kein Schweben, keine Eigendrehung, kein Nachlauf. Das Objekt steht still und dreht sich nur, wenn jemand es bewegt.",
   "barrierefreiheit": "Die Canvas ist aria-hidden. Ein fokussierbares Element mit role=\"img\" und aria-label beschreibt das Objekt. Ziehen ist nicht das einzige Bedienmittel: Pfeiltasten drehen und neigen, die Leertaste wirft an. Der Bedienhinweis steht als Text daneben."
  },
  "geprueft": "31.10.2026",
  "notiz": "Erfundene Drechslerei Kranich in Seiffen mit Holzkreisel Nr. 7 als Hero-Objekt. Der Kreisel ist ein LatheGeometry-Drehkörper, Holzmaserung und Lackringe sind in eine Canvas-Textur gemalt; kein Modell-Download. Umschalter für drei Interaktionen: Neigen (Lerp, Float), Ziehen (Nachlauf, Feder) und Anwerfen (Reibung, Präzession, Laufzeit-Anzeige). Studio-Licht per PMREM aus eigener Softbox-Szene statt HDRI-Datei, Kontaktschatten als Verlaufsfleck. Ohne WebGL bleibt das SVG-Poster stehen. Die Vorführung zeigt alle drei Interaktionen mit gedachtem Zeiger. Zugang 02.11.2026: --leise Alpha .58 → .66 (5,1:1 auf #ebe5da). Knopf „Anhalten/Abspielen“ (button, aria-pressed, aria-label „Bewegung anhalten“) neben den Modi, ruft dieselbe pause()/weiter() wie FUNDUS_DEMO, in der Vorschau ausgeblendet (WCAG 2.2.2: der Kreisel schwebt ohne Zutun weiter). Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}