murathany7/scene-3d

Tomas 3D

Three.js (capa en vivo)

• Usa threeLayer(el, { update(t), background, fov }) de /engines/three.js. Agrega un mapa de importación para three (ver examples/engines-demo/index.html).
• update(t) establece cada transformación desde t. Movimientos de cámara: keyframes con un tween de GSAP sobre un objeto plano (tl.to(cam, { x: 4, z: 8, duration: 2 }, 3)) y cópialo en camera.position dentro de update.
• Modelos: GLTFLoader de three/addons/loaders/GLTFLoader.js (agrega "three/addons/": "/core/node_modules/three/examples/jsm/" al mapa de importación). Envuelve la carga en Studio.wait(...). Coloca los archivos de modelo en assets/models/ de la marca o en composition/ de la producción.
• El estilo visual (looks/README.md) determina el modo de renderizado; el mismo modelo puede seguir cualquiera de estas vías:
  • Cartoon (looks/toon-3d): toon(color, { steps }) + outline(mesh, { thickness }). Luz dura: una DirectionalLight + AmbientLight baja.
  • Realista (looks/photoreal): await realistic(renderer, scene) (envuelto en Studio.wait: mapeo de tonos ACES, un entorno de estudio para reflejos, sombras suaves) + pbr(color, { metalness, roughness, clearcoat }). Una luz principal con castShadow, una luz de reborde fría desde atrás, un suelo con ShadowMaterial sobre un degradado CSS. Mantén la cámara por encima de ángulos rasantes (las caras brillantes se vuelven blancas), muévela lentamente, renderiza el resultado final con Studio.setup({ motionBlur: true }).
  • Neón (looks/neon-noir): emissive(color, intensity) + threeLayer(el, { post: bloom({ strength, threshold }) }), scene.fog. Mantén threshold ≥ 0.2 y emission ≤ 2 o todo se vuelve blanco por el bloom.
• Clips GLB animados: crea un AnimationMixer, luego en update llama a mixer.setTime(t - start). Nunca uses mixer.update(delta).
• Etiquetas HTML que siguen puntos 3D: en update(t), llama a camera.updateMatrixWorld() y al updateMatrixWorld() del padre antes de vector.applyMatrix4(obj.matrixWorld).project(camera). Three.js actualiza esto solo dentro de render(), por lo que sin él una etiqueta sigue el fotograma anterior. Ejemplo: productions/bike-logger/REEL-002-engines.
• Mallas CAD como JSON (vértices + índices): toNonIndexed() + computeVertexNormals() da facetas planas nítidas. Renderiza con threeLayer(..., { pixelRatio: 2 }) para bordes sobremuestreados.
• Física: hornéala (simula a paso fijo de 1/120 s en un arreglo antes del primer fotograma) y consúltala por t.
• Personaje que habla: carga /engines/lipsync.js y los .visemes.js de la línea (desde scripts/lipsync.sh) con etiquetas <script> clásicas, luego en update(t): LipSync.paramsAt(cues, t, "mouth", { offset }) → { open, wide, round } (0…1) sobre los morph targets (mesh.morphTargetInfluences) o la escala de una malla de boca. Ver engines/README.md, Lip sync.

Blender (plano)

• Un script de escena define build(ctx); copia engines/blender/example_scene.py. ctx proporciona toon(rgb), key(obj, "location", t, value), size, fps, duration, frames, scene.
• Renderiza: engines/blender/render.sh scene.py composition/plates/<name>.mp4 --size 1080x1920 --duration 4 [--engine EEVEE|CYCLES|WORKBENCH]. Borrador a --size 540x960, final a tamaño completo.
• Color de fondo: muéstralo solo a la cámara (mezcla de Light Path "Is Camera Ray", como en el ejemplo), o ilumina la escena y aplana las bandas toon.
• La gestión de color se establece en Standard para que los colores hex de la marca salgan como se escribieron. Para un plano fotorrealista, cambia a ctx["scene"].view_settings.view_transform = "AgX" en build, renderiza con --engine CYCLES, y usa luces de área y profundidad de campo de cámara.
• Física y simulaciones: hornéalas en el script de escena antes de renderizar.
• Personaje que habla: import lipsync as L en el script de escena (run.py pone engines/blender/ y la carpeta del propio script en el path), cues = L.load("productions/…/audio/vo.visemes.json"), luego L.key_shape_keys(head, cues, ctx, offset=VO_START) anima los shape keys open, wide, round en cada fotograma (names={"open": "Jaw"} para otros nombres). Cualquier otra cosa: L.params_at(cues, t, offset=…) por fotograma con ctx["key"].
• En la composición: <video src="plates/<name>.mp4"> + Studio.video(el, { start }). Los planos no tienen alfa; coloca texto y personajes encima con capas HTML.

Verificar

Renderiza los beats clave como imágenes fijas y míralos. Para Three.js, renderiza un fotograma dos veces y compara los md5. Anota los tiempos de render en el log de producción.