murathany7/scene-3d

3D-Einstellungen

Three.js (Live-Ebene)

• Verwende threeLayer(el, { update(t), background, fov }) aus /engines/three.js. Füge eine Import-Map für three hinzu (siehe examples/engines-demo/index.html).
• update(t) setzt jede Transformation basierend auf t. Kamerafahrten: Keyframes mit einem GSAP-Tween auf einem einfachen Objekt (tl.to(cam, { x: 4, z: 8, duration: 2 }, 3)) und kopiere sie in camera.position innerhalb von update.
• Modelle: GLTFLoader aus three/addons/loaders/GLTFLoader.js (füge "three/addons/": "/core/node_modules/three/examples/jsm/" zur Import-Map hinzu). Wickle den Ladevorgang in Studio.wait(...) ein. Lege Modelldateien im Ordner assets/models/ der Marke oder im composition/-Ordner der Produktion ab.
• Der Look (looks/README.md) bestimmt den Rendering-Stil; dasselbe Modell kann auf jede dieser Arten gestaltet werden:
  • Cartoon (looks/toon-3d): toon(color, { steps }) + outline(mesh, { thickness }). Hartes Licht: ein DirectionalLight + schwaches AmbientLight.
  • Realistisch (looks/photoreal): await realistic(renderer, scene) (wickle in Studio.wait ein: ACES Tone Mapping, eine Studio-Umgebung für Reflexionen, weiche Schatten) + pbr(color, { metalness, roughness, clearcoat }). Ein Schlüssellicht mit castShadow, ein kühles Randlicht von hinten, ein ShadowMaterial-Boden über einem CSS-Verlauf. Halte die Kamera oberhalb flacher Einfallswinkel (glänzende Flächen werden sonst weiß), bewege sie langsam, rendere das Finale mit Studio.setup({ motionBlur: true }).
  • Neon (looks/neon-noir): emissive(color, intensity) + threeLayer(el, { post: bloom({ strength, threshold }) }), scene.fog. Halte threshold ≥ 0,2 und emissiv ≤ 2, da sonst alles weiß aufblüht.
• Animierte GLB-Clips: Erstelle einen AnimationMixer, rufe dann in update mixer.setTime(t - start) auf. Verwende niemals mixer.update(delta).
• HTML-Tags, die 3D-Punkten folgen: Rufe in update(t) zuerst camera.updateMatrixWorld() und updateMatrixWorld() des Elternobjekts auf, bevor du vector.applyMatrix4(obj.matrixWorld).project(camera) ausführst. Three.js aktualisiert diese nur innerhalb von render(), daher folgt ein Tag ohne diesen Aufruf dem vorherigen Frame. Beispiel: productions/bike-logger/REEL-002-engines.
• CAD-Meshes als JSON (Vertices + Indizes): toNonIndexed() + computeVertexNormals() erzeugen scharfe, flache Facetten. Rendere mit threeLayer(..., { pixelRatio: 2 }) für überabgetastete Kanten.
• Physik: Vorberechnung (simuliere mit einer festen Schrittweite von 1/120 s in ein Array vor dem ersten Frame) und suche nach t.
• Sprechender Charakter: Lade /engines/lipsync.js und die .visemes.js der Zeile (von scripts/lipsync.sh) mit klassischen <script>-Tags, dann in update(t): LipSync.paramsAt(cues, t, "mouth", { offset }) → { open, wide, round } (0…1) auf Morph-Targets (mesh.morphTargetInfluences) oder die Skalierung eines Mund-Meshes. Siehe engines/README.md, Lip sync.

Blender (Platte)

• Ein Szenen-Skript definiert build(ctx); kopiere engines/blender/example_scene.py. ctx bietet toon(rgb), key(obj, "location", t, value), size, fps, duration, frames, scene.
• Rendern: engines/blender/render.sh scene.py composition/plates/<name>.mp4 --size 1080x1920 --duration 4 [--engine EEVEE|CYCLES|WORKBENCH]. Entwurf mit --size 540x960, Finale in voller Größe.
• Hintergrundfarbe: Zeige sie nur der Kamera an (Light Path "Is Camera Ray"-Mix, wie im Beispiel), oder sie beleuchtet die Szene und glättet Toon-Bänder.
• Die Farbverwaltung ist auf Standard gesetzt, damit Marken-Hex-Farben exakt so ausgegeben werden. Für eine fotorealistische Platte wechsle zu ctx["scene"].view_settings.view_transform = "AgX" in build, rendere mit --engine CYCLES und verwende Flächenleuchten sowie Kamera-Tiefenschärfe.
• Physik und Simulationen: Berechne sie im Szenen-Skript vor dem Rendern vor.
• Sprechender Charakter: import lipsync as L im Szenen-Skript (run.py fügt engines/blender/ und das eigene Skriptverzeichnis zum Pfad hinzu), cues = L.load("productions/…/audio/vo.visemes.json"), dann L.key_shape_keys(head, cues, ctx, offset=VO_START) keyt die Shape-Keys open, wide, round auf jedem Frame (names={"open": "Jaw"} für andere Namen). Alles andere: L.params_at(cues, t, offset=…) pro Frame mit ctx["key"].
• In der Komposition: <video src="plates/<name>.mp4"> + Studio.video(el, { start }). Platten haben kein Alpha; setze Text und Charaktere mit HTML-Ebenen darüber.

Überprüfung

Rendere die wichtigsten Beats als Standbilder und betrachte sie. Für Three.js rendere einen Frame zweimal und vergleiche die MD5-Prüfsummen. Notiere die Renderzeiten im Produktions-Log.