SJbuilds04/vybe-cinematic-3d

VYBE Cinematic 3D

3D in einem HyperFrames-Video ist ein <canvas>, dessen jedes Einzelbild eine reine Funktion der Zeit ist. Der three-Adapter von HyperFrames veröffentlicht die Zeit; du renderst sie. Autorität: /hyperframes-animation → adapters/three.md nach der Installation.

Vertrag (nicht verhandelbar)

• Import festgelegt: import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"; (oder eine Importkarte, die dieselbe Version für Addons festlegt).
• Szene, Kamera, Renderer, Materialien synchron beim Laden aufbauen; Modelle/Texturen vor dem rendern kritischer Positionen laden (Three's DefaultLoadingManager wird automatisch abgewartet). Für aufwändige CPU-Einrichtung registriere window.__hf.buildReady["<name>"] = promise.
• Nur aus der Zeit rendern: window.addEventListener("hf-seek", e => renderAt(e.detail.time)); renderAt(window.__hfThreeTime || 0);
• Keine requestAnimationFrame-Schleifen, Uhren, Deltas oder ungesäte Math.random().
• renderer.setPixelRatio(1); renderer.setSize(W, H, false) mit W/H aus den data-width/height des Wurzelelements. Das Wurzelelement muss data-duration haben.
• Das randlose Canvas mit data-layout-allow-overflow markieren.

Grundgerüst

<canvas id="gl" width="1920" height="1080" data-layout-allow-overflow></canvas>
<script type="module">
  import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
  const root = document.getElementById("vybe-root");
  const W = +root.dataset.width, H = +root.dataset.height, D = +root.dataset.duration;
  const css = getComputedStyle(document.documentElement);
  const tok = (n, f) => css.getPropertyValue(n).trim() || f;           // VYBE-Tokens lesen
  const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true });
  renderer.setPixelRatio(1); renderer.setSize(W, H, false);
  renderer.setClearColor(new THREE.Color(tok("--vy-bg", "#000")), 1);
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(W > H ? 40 : 60, W / H, 0.1, 200); // größeres Sichtfeld im Hochformat
  // … aufbauen …
  function renderAt(t) { const p = t / D; /* Kamera + Objekte aus t */ renderer.render(scene, camera); }
  window.addEventListener("hf-seek", (e) => renderAt(e.detail.time));
  renderAt(window.__hfThreeTime || 0);
</script>

Setze das Canvas in den Host (index.html), wenn sich die 3D-Welt über mehrere Szenen erstreckt (Kamerafahrt durch den Film); setze es nur in eine Szenendatei, wenn es in einer einzigen Szene lebt. Überlagere HTML-Typen darüber; rendere niemals Text in WebGL, wenn DOM-Text ausreicht.

Rezepte

• Partikel/Staub/Sterne: THREE.Points mit einer gesäten PRNG für Positionen, Scheitelpunktfarben aus der Palette, einem runden Sprite (CanvasTexture radialer Verlauf als map) – Standardpunkte sind quadratisch – AdditiveBlending, depthWrite: false. Halte jedes Partikel jenseits des nächsten z der Kamera, sonst bläht es sich zu einem riesigen Sprite auf, wenn die Kamera es passiert (ein echter VYBE-Fehler).
• Helden-Orb/Planet: SphereGeometry(r, 96, 64) + MeshStandardMaterial (Metallic/Rauheit) + emittierender Halo TorusGeometry-Ring; beleuchte ihn über die Zeit.
• Schwarzes Loch: dunkle Kugel + Akkretionsscheibe = RingGeometry mit einer Canvas-Verlaufstextur, um 70–80° geneigt, rotierend; Linsenring = zweiter dünner Torus, der zur Kamera zeigt; Sternbeugung = Skalierung einer Hintergrundpunktwolke radial zur Mitte hin.
• Molekül: Kugeln an Atompositionen (InstancedMesh für viele), Zylinder dazwischen (ausrichten mit quaternion.setFromUnitVectors); Kamera umkreist.
• Produktdrehteller: GLTF via GLTFLoader (Importkarte), AnimationMixer.setTime(t) für erstellte Clips; Studio-Lichtsetup darunter; langsame Drehung 20–35° über die Einstellung.
• Datenskulptur: InstancedMesh-Boxen, deren Höhen aus Daten stammen, wachsen mit smoothstep über die Zeit.
• Prozedurales Gelände/Wellen: Verschiebe eine PlaneGeometry in JS aus t (Positionen pro Frame für ≤40k Scheitelpunkte neu berechnen) oder in einem ShaderMaterial mit einem uTime-Uniform, das in renderAt gesetzt wird.

Beleuchtung

Lade references/lighting.md. Mindestsetup: Key-Licht (Punkt-/Direktional), Rand-/Gegenlicht in einer kontrastierenden Farbe und ein HemisphereLight-Fülllicht – ein beleuchtetes Netz mit nur einem Licht erscheint auf seiner dunklen Seite als schwarzer Ausschnitt. Steuere Lichtintensitäten aus derselben Zeitfunktion mit festen Verhältnissen.

Kamera

Leite die Position aus dem normalisierten Fortschritt p = t / D mit Smoothstep-Segmenten pro Akt ab (siehe die renderAt des kinematografischen Templates). Für Schnitte deklariere const CUT_B = 23 einmal und verwende es sowohl für den Kameraeinstellungs-Wähler als auch für die Objektsichtbarkeit; überprüfe die Einzelbilder kurz vor und nach dem Schnitt (snapshot --at 22.9667,23).

Leistung (Headless Chrome kann Software-GL sein)

• ≤ 100k Dreiecke, ≤ 20k Partikel, keine Nachbearbeitungspässe, die eine Frame- Historie benötigen. Bloom: mit additiven Sprites/Halos vortäuschen.
• Vermeide antialias + große Canvases bei 4K auf Rechnern mit wenig RAM; testen mit einem Entwurfs-Render.
• Wenn WebGL in der Renderumgebung fehlschlägt, ist das Canvas schwarz: Qualitätskontrolle erkennt es als schwarze Frames; falle auf ein 2D-Canvas oder eine CSS-3D-Version der Szene zurück.