morfeo 0.2.0 → 0.3.0

package/remotion/kit/diorama.tsx

@@ -0,0 +1,489 @@
+// Kit diorama: maqueta 3D low-poly flotante con corte de tierra, personajes, tráfico, rayos X y modelos .glb.
+// Va dentro de un <Lienzo3D>. Todo depende de `t` (segundos): nada corre solo.
+//
+//   <Maqueta ancho={20} fondo={14} />                       isla con estratos, pasto y flores
+//   <Modelo src={props.coche.src} pos={[0, 0, 2]} tam={2} animacion t={t} />   un .glb (o un recurso resuelto)
+//   <Persona pos={[1, 0, 3]} pose="saludar" t={t} />        trabajador low-poly
+//   <Trafico camino={[[-9, 0, 2], [9, 0, 2]]} n={8} t={t} pluma={{d: 9, cerrada: [[2, 6]]}} />
+//   <Corte k={abrir}> <Tinaco /> </Corte>                   rayos X: abre lo que envuelve
+import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import {continueRender, delayRender} from 'remotion';
+import * as THREE from 'three';
+import {clone as clonarEsqueleto} from 'three/examples/jsm/utils/SkeletonUtils.js';
+import {cargarGltf} from '../motor/modelo3d';
+import {recurso} from '../motor/util';
+import {azarN} from './ilustrado';
+import {Piedras} from './tres';
+
+type V3 = [number, number, number];
+type Pieza = {pos?: V3; rot?: V3; escala?: number};
+const RAD = Math.PI / 180;
+const grupo = (p: Pieza) => ({position: p.pos ?? ([0, 0, 0] as V3), rotation: (p.rot ?? [0, 0, 0]).map((g) => g * RAD) as V3, scale: p.escala ?? 1});
+const clamp01 = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp01(x);
+	return c * c * (3 - 2 * c);
+};
+
+/**
+ * Maqueta flotante: una isla de `ancho`×`fondo` con estratos de tierra a la vista en los cuatro lados, pasto, flores,
+ * matas y piedritas. La superficie queda en y = 0. `hueco` deja un rectángulo sin pasto (para río, calle, alberca).
+ */
+export const Maqueta: React.FC<
+	Pieza & {
+		ancho?: number;
+		fondo?: number;
+		capas?: [string, number][];
+		pasto?: string;
+		flores?: number;
+		matas?: number;
+		colores?: string[];
+		semilla?: number;
+		/** Zonas sin flores ni matas: [x, z, ancho, fondo]. */
+		libres?: [number, number, number, number][];
+	}
+> = ({ancho = 20, fondo = 14, capas = [['#79C24F', 0.4], ['#9A6A45', 1.6], ['#7D553A', 1.4], ['#8C8580', 1.2]], pasto, flores = 60, matas = 140, colores = ['#B57BE8', '#FFD23F', '#FF6B6B', '#FFFFFF'], semilla = 0, libres = [], ...p}) => {
+	const libre = (x: number, z: number) => libres.some(([lx, lz, la, lf]) => Math.abs(x - lx) < la / 2 && Math.abs(z - lz) < lf / 2);
+	const total = capas.reduce((a, [, g]) => a + g, 0);
+	const refMatas = useRef<THREE.InstancedMesh>(null);
+	const refFlores = useRef<THREE.InstancedMesh>(null);
+	const refTallos = useRef<THREE.InstancedMesh>(null);
+	const puntos = (n: number, s: number) =>
+		Array.from({length: n}, (_, i) => [(azarN(s + i * 2) - 0.5) * (ancho - 0.6), (azarN(s + i * 2 + 1) - 0.5) * (fondo - 0.6)] as [number, number]).filter(([x, z]) => !libre(x, z));
+	useLayoutEffect(() => {
+		const o = new THREE.Object3D();
+		const m = refMatas.current;
+		if (m) {
+			const lista = puntos(matas, semilla + 11);
+			lista.forEach(([x, z], i) => {
+				o.position.set(x, 0.12, z);
+				o.rotation.set(0, azarN(semilla + i * 13) * 6, 0);
+				const k = 0.6 + azarN(semilla + i * 7) * 0.8;
+				o.scale.set(k, k * (1 + azarN(semilla + i) * 0.8), k);
+				o.updateMatrix();
+				m.setMatrixAt(i, o.matrix);
+			});
+			m.count = lista.length;
+			m.instanceMatrix.needsUpdate = true;
+		}
+		const f = refFlores.current;
+		const tl = refTallos.current;
+		if (f && tl) {
+			const lista = puntos(flores, semilla + 97);
+			const c = new THREE.Color();
+			lista.forEach(([x, z], i) => {
+				const alto = 0.25 + azarN(semilla + i * 5) * 0.25;
+				o.position.set(x, alto / 2, z);
+				o.rotation.set(0, 0, 0);
+				o.scale.set(1, alto / 0.4, 1);
+				o.updateMatrix();
+				tl.setMatrixAt(i, o.matrix);
+				o.position.set(x, alto + 0.05, z);
+				o.scale.setScalar(0.8 + azarN(semilla + i * 3) * 0.6);
+				o.updateMatrix();
+				f.setMatrixAt(i, o.matrix);
+				f.setColorAt(i, c.set(colores[i % colores.length]));
+			});
+			f.count = lista.length;
+			tl.count = lista.length;
+			f.instanceMatrix.needsUpdate = true;
+			tl.instanceMatrix.needsUpdate = true;
+			if (f.instanceColor) f.instanceColor.needsUpdate = true;
+		}
+	}, [ancho, fondo, matas, flores, semilla, JSON.stringify(libres), colores.join()]);
+	let y = 0;
+	return (
+		<group {...grupo(p)}>
+			{capas.map(([color, grosor], i) => {
+				const centro = y - grosor / 2;
+				y -= grosor;
+				return (
+					<mesh key={i} position={[0, centro, 0]} receiveShadow castShadow={i === 0}>
+						<boxGeometry args={[ancho, grosor, fondo]} />
+						<meshStandardMaterial color={i === 0 && pasto ? pasto : color} roughness={0.95} />
+					</mesh>
+				);
+			})}
+			{/* piedritas en las cuatro caras */}
+			<Piedras z={fondo / 2 + 0.01} ancho={ancho} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(ancho * 2.4)} semilla={semilla + 3} />
+			<group rotation={[0, Math.PI / 2, 0]}>
+				<Piedras z={ancho / 2 + 0.01} ancho={fondo} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(fondo * 2.4)} semilla={semilla + 41} />
+			</group>
+			<group rotation={[0, -Math.PI / 2, 0]}>
+				<Piedras z={ancho / 2 + 0.01} ancho={fondo} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(fondo * 2.4)} semilla={semilla + 77} />
+			</group>
+			<instancedMesh ref={refMatas} args={[undefined as any, undefined as any, matas]} castShadow frustumCulled={false}>
+				<coneGeometry args={[0.07, 0.32, 4]} />
+				<meshStandardMaterial color={pasto ?? '#5FAE3C'} roughness={0.9} flatShading />
+			</instancedMesh>
+			<instancedMesh ref={refTallos} args={[undefined as any, undefined as any, flores]} frustumCulled={false}>
+				<cylinderGeometry args={[0.018, 0.018, 0.4, 4]} />
+				<meshStandardMaterial color="#3E8A35" roughness={0.9} />
+			</instancedMesh>
+			<instancedMesh ref={refFlores} args={[undefined as any, undefined as any, flores]} castShadow frustumCulled={false}>
+				<icosahedronGeometry args={[0.09, 0]} />
+				<meshStandardMaterial roughness={0.7} flatShading />
+			</instancedMesh>
+		</group>
+	);
+};
+
+/**
+ * Un modelo .glb dentro del lienzo: tuyo (`src: 'castor.glb'` en assets/) o un recurso de la biblioteca
+ * (`src: props.coche`, lo que deja `{tipo: 'recurso', buscar: 'coche'}` en las props del componente).
+ * Se escala para que su lado mayor mida `tam` y se apoya en y = 0. `animacion` reproduce los clips del archivo
+ * sincronizados con `t` (true = todos, o el nombre de uno).
+ */
+export const Modelo: React.FC<Pieza & {src: string | {src: string}; tam?: number; t?: number; animacion?: boolean | string; velocidad?: number; color?: string; sombras?: boolean}> = ({src, tam = 1, t = 0, animacion, velocidad = 1, color, sombras = true, ...p}) => {
+	const ruta = typeof src === 'string' ? src : src.src;
+	const url = recurso(ruta);
+	const [g, setG] = useState<{obj: THREE.Object3D; mixer: THREE.AnimationMixer | null} | null>(null);
+	const [handle] = useState(() => delayRender(`Cargando modelo ${ruta}`));
+	useEffect(() => {
+		cargarGltf(url)
+			.then((gl) => {
+				const copia = clonarEsqueleto(gl.scene) as THREE.Object3D;
+				const caja = new THREE.Box3().setFromObject(copia);
+				const t3 = caja.getSize(new THREE.Vector3());
+				const k = tam / Math.max(t3.x, t3.y, t3.z, 0.0001);
+				const centro = caja.getCenter(new THREE.Vector3());
+				const envoltura = new THREE.Group();
+				copia.position.set(-centro.x, -caja.min.y, -centro.z);
+				envoltura.add(copia);
+				envoltura.scale.setScalar(k);
+				copia.traverse((o: any) => {
+					if (o.isMesh) {
+						o.castShadow = sombras;
+						o.receiveShadow = sombras;
+						if (color) {
+							o.material = o.material.clone();
+							o.material.color = new THREE.Color(color);
+						}
+					}
+				});
+				let mixer: THREE.AnimationMixer | null = null;
+				if (animacion && gl.animations.length) {
+					mixer = new THREE.AnimationMixer(copia);
+					const clips = animacion === true ? gl.animations : gl.animations.filter((a) => a.name === animacion || a.name.toLowerCase().includes(String(animacion).toLowerCase()));
+					for (const clip of clips.length ? clips : gl.animations.slice(0, 1)) mixer.clipAction(clip).play();
+				}
+				setG({obj: envoltura, mixer});
+				continueRender(handle);
+			})
+			.catch((e) => {
+				continueRender(handle);
+				throw new Error(`No pude cargar el modelo ${ruta}: ${e.message}`);
+			});
+	}, [url, handle, tam, color, String(animacion)]);
+	useLayoutEffect(() => {
+		g?.mixer?.setTime(Math.max(0, t) * velocidad);
+	});
+	return <group {...grupo(p)}>{g ? <primitive object={g.obj} /> : null}</group>;
+};
+
+const MAT = (color: string, r = 0.8) => <meshStandardMaterial color={color} roughness={r} flatShading />;
+
+/**
+ * Persona low-poly (trabajador con casco y chaleco por defecto). Mide ~1.6 de alto con `escala` 1.
+ * `pose`: 'parado' | 'saludar' | 'caminar' | 'senalar' | 'celebrar'. `t` mueve brazos y piernas.
+ */
+export const Persona: React.FC<Pieza & {t?: number; pose?: 'parado' | 'saludar' | 'caminar' | 'senalar' | 'señalar' | 'celebrar'; piel?: string; ropa?: string; chaleco?: string | false; casco?: string | false; pantalon?: string}> = ({
+	t = 0,
+	pose = 'parado',
+	piel = '#F2C19B',
+	ropa = '#3A6EC8',
+	chaleco = '#FF7A1A',
+	casco = '#FFC928',
+	pantalon = '#2E3A59',
+	...p
+}) => {
+	const paso = pose === 'caminar' ? Math.sin(t * 9) * 0.6 : 0;
+	const respira = Math.sin(t * 2.2) * 0.015;
+	let brazoI = 0.15;
+	let brazoD = -0.15;
+	if (pose === 'saludar') brazoD = -2.6 + Math.sin(t * 10) * 0.35;
+	if (pose === 'celebrar') {
+		brazoI = 2.7 + Math.sin(t * 9) * 0.2;
+		brazoD = -2.7 - Math.sin(t * 9) * 0.2;
+	}
+	if (pose === 'senalar' || pose === 'señalar') brazoD = -1.55;
+	if (pose === 'caminar') {
+		brazoI = -paso * 0.8;
+		brazoD = paso * 0.8;
+	}
+	const salto = pose === 'celebrar' ? Math.abs(Math.sin(t * 9)) * 0.12 : pose === 'caminar' ? Math.abs(Math.sin(t * 9)) * 0.04 : 0;
+	const brazo = (lado: 1 | -1, ang: number, adelante = 0) => (
+		<group position={[0.3 * lado, 1.18, 0]} rotation={[pose === 'caminar' ? ang : adelante, 0, pose === 'caminar' ? 0 : ang]}>
+			<mesh position={[0, -0.26, 0]} castShadow>
+				<boxGeometry args={[0.14, 0.52, 0.14]} />
+				{MAT(chaleco ? ropa : ropa)}
+			</mesh>
+			<mesh position={[0, -0.56, 0]} castShadow>
+				<sphereGeometry args={[0.085, 8, 6]} />
+				{MAT(piel)}
+			</mesh>
+		</group>
+	);
+	return (
+		<group {...grupo(p)}>
+			<group position={[0, salto + respira, 0]}>
+				{/* piernas */}
+				{[-1, 1].map((l) => (
+					<group key={l} position={[0.12 * l, 0.62, 0]} rotation={[l * paso, 0, 0]}>
+						<mesh position={[0, -0.3, 0]} castShadow>
+							<boxGeometry args={[0.17, 0.6, 0.18]} />
+							{MAT(pantalon)}
+						</mesh>
+						<mesh position={[0, -0.6, 0.05]} castShadow>
+							<boxGeometry args={[0.19, 0.08, 0.28]} />
+							{MAT('#3B2A20')}
+						</mesh>
+					</group>
+				))}
+				{/* torso y chaleco */}
+				<mesh position={[0, 0.95, 0]} castShadow>
+					<boxGeometry args={[0.48, 0.62, 0.28]} />
+					{MAT(ropa)}
+				</mesh>
+				{chaleco ? (
+					<mesh position={[0, 0.93, 0]} castShadow>
+						<boxGeometry args={[0.5, 0.5, 0.3]} />
+						{MAT(chaleco)}
+					</mesh>
+				) : null}
+				{chaleco ? (
+					<mesh position={[0, 0.88, 0.152]}>
+						<boxGeometry args={[0.5, 0.06, 0.01]} />
+						<meshStandardMaterial color="#E8F2F5" roughness={0.3} emissive="#ffffff" emissiveIntensity={0.15} />
+					</mesh>
+				) : null}
+				{brazo(-1, brazoI)}
+				{brazo(1, brazoD, pose === 'senalar' || pose === 'señalar' ? -1.4 : 0)}
+				{/* cabeza */}
+				<mesh position={[0, 1.42, 0]} castShadow>
+					<sphereGeometry args={[0.22, 12, 10]} />
+					{MAT(piel, 0.7)}
+				</mesh>
+				{[-1, 1].map((l) => (
+					<mesh key={l} position={[0.08 * l, 1.45, 0.2]}>
+						<sphereGeometry args={[0.028, 6, 6]} />
+						<meshStandardMaterial color="#1B1B1F" />
+					</mesh>
+				))}
+				{casco ? (
+					<group position={[0, 1.55, 0]}>
+						<mesh castShadow>
+							<sphereGeometry args={[0.24, 12, 8, 0, Math.PI * 2, 0, Math.PI / 2]} />
+							{MAT(casco, 0.5)}
+						</mesh>
+						<mesh position={[0, 0, 0.06]}>
+							<cylinderGeometry args={[0.3, 0.3, 0.035, 14]} />
+							{MAT(casco, 0.5)}
+						</mesh>
+					</group>
+				) : null}
+			</group>
+		</group>
+	);
+};
+
+/** Coche low-poly (2 de largo). Para tráfico sin descargar nada. */
+export const Coche: React.FC<Pieza & {color?: string; techo?: string; t?: number; rueda?: number}> = ({color = '#E8533B', techo = '#1F3550', t = 0, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.38, 0]} castShadow receiveShadow>
+			<boxGeometry args={[2, 0.45, 0.95]} />
+			{MAT(color, 0.5)}
+		</mesh>
+		<mesh position={[-0.1, 0.78, 0]} castShadow>
+			<boxGeometry args={[1.1, 0.38, 0.86]} />
+			{MAT(techo, 0.4)}
+		</mesh>
+		{[
+			[0.65, 0.48],
+			[-0.65, 0.48],
+			[0.65, -0.48],
+			[-0.65, -0.48],
+		].map(([x, z], i) => (
+			<mesh key={i} position={[x, 0.18, z]} rotation={[Math.PI / 2, t * 6, 0]} castShadow>
+				<cylinderGeometry args={[0.19, 0.19, 0.14, 10]} />
+				{MAT('#1E1E22', 0.9)}
+			</mesh>
+		))}
+		{[0.2, -0.2].map((z, i) => (
+			<mesh key={i} position={[1.005, 0.42, z * 1.6]}>
+				<boxGeometry args={[0.02, 0.1, 0.16]} />
+				<meshStandardMaterial color="#FFF6C8" emissive="#FFF2B0" emissiveIntensity={0.6} />
+			</mesh>
+		))}
+	</group>
+);
+
+const COLORES_COCHE = ['#E8533B', '#2D7BFF', '#2BB673', '#F5B841', '#8E5BD9', '#FF7EB6', '#F2F2F2', '#33363D'];
+
+/**
+ * Tráfico: `n` coches (o lo que dibuje `pieza`) que avanzan por `camino` a `velocidad` (u/s) con `separacion`.
+ * `pluma`: una barrera a `d` unidades del inicio del camino; mientras está cerrada (intervalos [desde, hasta] en
+ * segundos) los coches que no la han cruzado se detienen y hacen fila. Todo se calcula de `t`: es determinista.
+ */
+export const Trafico: React.FC<{
+	camino: V3[];
+	t: number;
+	n?: number;
+	velocidad?: number;
+	separacion?: number;
+	desfase?: number;
+	pluma?: {d: number; cerrada: [number, number][]};
+	colores?: string[];
+	pieza?: (i: number, color: string, t: number) => React.ReactNode;
+	semilla?: number;
+}> = ({camino, t, n = 8, velocidad = 2.2, separacion = 2.8, desfase = 0, pluma, colores = COLORES_COCHE, pieza, semilla = 0}) => {
+	const curva = useMemo(() => new THREE.CatmullRomCurve3(camino.map((p) => new THREE.Vector3(...p)), false, 'catmullrom', 0.02), [JSON.stringify(camino)]);
+	const L = curva.getLength();
+	// posición libre de cada coche (sin pluma), sin dar la vuelta: el coche 0 va adelante
+	const libre = (i: number, tt: number) => velocidad * tt + desfase - i * separacion;
+	const filas = (pluma?.cerrada ?? []).map(() => 0); // cuántos coches hacen fila en cada cierre
+	const pos: number[] = [];
+	for (let i = 0; i < n; i++) {
+		let retraso = 0; // segundos que este coche lleva detenido
+		if (pluma)
+			pluma.cerrada.forEach(([c0, c1], k) => {
+				const enCierre = libre(i, c0) - retraso * velocidad;
+				// la siguiente pluma por delante (la pluma está en d, d + L, d + 2L... porque el camino se repite)
+				const pl = pluma.d + Math.ceil((enCierre - pluma.d) / L) * L;
+				const lugar = pl - filas[k] * separacion;
+				const llega = c0 + Math.max(0, (lugar - enCierre) / velocidad);
+				if (llega >= c1) return; // llega cuando ya abrió
+				filas[k]++;
+				if (t > llega) retraso += Math.min(t, c1) - llega;
+			});
+		let s = libre(i, t) - retraso * velocidad;
+		if (pos.length) s = Math.min(s, pos[pos.length - 1] - separacion);
+		pos.push(s);
+	}
+	return (
+		<group>
+			{pos.map((s, i) => {
+				const u = ((s % L) + L) % L / L;
+				const p = curva.getPointAt(u);
+				const d = curva.getTangentAt(u);
+				const ang = Math.atan2(-d.z, d.x);
+				const color = colores[(i + semilla) % colores.length];
+				// aparecen y desaparecen encogiéndose en los extremos del camino (no saltan de un lado a otro)
+				const borde = suave(Math.min(u * L, (1 - u) * L) / (separacion * 0.45));
+				if (borde <= 0.01) return null;
+				return (
+					<group key={i} position={p} rotation={[0, ang, 0]} scale={borde}>
+						{pieza ? pieza(i, color, t) : <Coche color={color} t={t} />}
+					</group>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Pluma (barrera) de caseta: `abierta` 0..1 la levanta. El brazo mide `largo` y apunta a +x. */
+export const Pluma: React.FC<Pieza & {abierta?: number; largo?: number}> = ({abierta = 0, largo = 3.2, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.5, 0]} castShadow>
+			<boxGeometry args={[0.4, 1, 0.4]} />
+			{MAT('#FFC928', 0.5)}
+		</mesh>
+		<group position={[0, 0.85, 0]} rotation={[0, 0, (suave(abierta) * 80 * Math.PI) / 180]}>
+			{Array.from({length: 8}, (_, i) => (
+				<mesh key={i} position={[(i + 0.5) * (largo / 8), 0, 0]} castShadow>
+					<boxGeometry args={[largo / 8, 0.12, 0.12]} />
+					{MAT(i % 2 ? '#FFFFFF' : '#E5484D', 0.5)}
+				</mesh>
+			))}
+		</group>
+	</group>
+);
+
+/**
+ * Rayos X: recorta lo que envuelve con un plano para ver adentro. `k` (0..1) abre el corte (anímalo con el tiempo).
+ * `eje`: hacia dónde se abre ('z' quita la mitad de enfrente). Lo que va adentro (agua, flotador) ponlo fuera de <Corte>.
+ */
+export const Corte: React.FC<{k: number; eje?: 'x' | 'y' | 'z'; centro?: number; tam?: number; children: React.ReactNode}> = ({k, eje = 'z', centro = 0, tam = 2, children}) => {
+	const ref = useRef<THREE.Group>(null);
+	const plano = useMemo(() => new THREE.Plane(), []);
+	useLayoutEffect(() => {
+		const n = eje === 'x' ? new THREE.Vector3(-1, 0, 0) : eje === 'y' ? new THREE.Vector3(0, -1, 0) : new THREE.Vector3(0, 0, -1);
+		// k = 0: el plano queda fuera (no recorta); k = 1: corta por `centro`
+		const d = centro + (1 - suave(k)) * tam;
+		const mundo = new THREE.Vector3();
+		ref.current?.getWorldPosition(mundo);
+		const off = eje === 'x' ? mundo.x : eje === 'y' ? mundo.y : mundo.z;
+		plano.set(n, d + off);
+		ref.current?.traverse((o: any) => {
+			if (!o.isMesh) return;
+			const mats = Array.isArray(o.material) ? o.material : [o.material];
+			for (const m of mats) {
+				m.clippingPlanes = k > 0 ? [plano] : null;
+				m.side = THREE.DoubleSide;
+			}
+		});
+	});
+	return <group ref={ref}>{children}</group>;
+};
+
+/** Gotas de agua que caen de `de` a `a` (por un tubo transparente o de una llave). */
+export const Gotas: React.FC<{de: V3; a: V3; t: number; n?: number; velocidad?: number; color?: string; tam?: number}> = ({de, a, t, n = 6, velocidad = 1.4, color = '#4FB3FF', tam = 0.09}) => (
+	<group>
+		{Array.from({length: n}, (_, i) => {
+			const k = (t * velocidad + i / n) % 1;
+			return (
+				<mesh key={i} position={[de[0] + (a[0] - de[0]) * k, de[1] + (a[1] - de[1]) * k, de[2] + (a[2] - de[2]) * k]} scale={[1, 1.4, 1]}>
+					<sphereGeometry args={[tam, 8, 6]} />
+					<meshStandardMaterial color={color} roughness={0.15} emissive={color} emissiveIntensity={0.35} transparent opacity={0.9} />
+				</mesh>
+			);
+		})}
+	</group>
+);
+
+/** Confeti 3D que estalla en `pos` cuando `t` pasa de `en`. */
+export const Confeti3D: React.FC<{pos: V3; t: number; en: number; n?: number; colores?: string[]}> = ({pos, t, en, n = 60, colores = ['#FFC400', '#FF5A8A', '#4FB3FF', '#5ADC6E', '#FFFFFF']}) => {
+	const dt = t - en;
+	if (dt < 0 || dt > 3) return null;
+	return (
+		<group position={pos}>
+			{Array.from({length: n}, (_, i) => {
+				const ang = azarN(i) * Math.PI * 2;
+				const v = 2 + azarN(i * 3) * 3;
+				const vy = 4 + azarN(i * 5) * 4;
+				const x = Math.cos(ang) * v * dt;
+				const z = Math.sin(ang) * v * dt;
+				const y = vy * dt - 4.9 * dt * dt * 0.6;
+				return (
+					<mesh key={i} position={[x, y, z]} rotation={[dt * 8 + i, dt * 6, i]}>
+						<boxGeometry args={[0.12, 0.02, 0.07]} />
+						<meshStandardMaterial color={colores[i % colores.length]} roughness={0.5} />
+					</mesh>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Linterna: un foco con su cono visible, de `pos` hacia `mirar` (escenas de noche). */
+export const Linterna: React.FC<{pos: V3; mirar: V3; color?: string; fuerza?: number; angulo?: number}> = ({pos, mirar, color = '#FFF1C2', fuerza = 6, angulo = 0.38}) => {
+	const objetivo = useMemo(() => new THREE.Object3D(), []);
+	useLayoutEffect(() => {
+		objetivo.position.set(...mirar);
+		objetivo.updateMatrixWorld();
+	});
+	const dir = new THREE.Vector3(...mirar).sub(new THREE.Vector3(...pos));
+	const largo = dir.length();
+	const q = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, -1, 0), dir.clone().normalize());
+	const medio = new THREE.Vector3(...pos).add(dir.clone().multiplyScalar(0.5));
+	return (
+		<group>
+			<primitive object={objetivo} />
+			<spotLight position={pos} target={objetivo} angle={angulo} penumbra={0.6} decay={0} intensity={fuerza} color={color} castShadow />
+			<mesh position={medio} quaternion={q}>
+				<coneGeometry args={[Math.tan(angulo) * largo, largo, 32, 1, true]} />
+				<meshBasicMaterial color={color} transparent opacity={0.09} blending={THREE.AdditiveBlending} depthWrite={false} side={THREE.DoubleSide} />
+			</mesh>
+		</group>
+	);
+};

package/remotion/kit/index.ts

@@ -4,3 +4,4 @@
 export * from './ilustrado';
 export * from './tres';
 export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';
+export * from './diorama';

package/remotion/kit/tres.tsx

@@ -26,7 +26,20 @@ const mezcla = (a: V3, b: V3, k: number): V3 => [a[0] + (b[0] - a[0]) * k, a[1]
  * escena; sin `a` se acerca un poco sola (`deriva`, 0.06 = 6 % del camino hacia lo que mira). `corte` salta sin viaje.
  */
 export type Toma3D = {pos: V3; mirar?: V3; fov?: number; a?: {pos?: V3; mirar?: V3; fov?: number}; viaje?: number; corte?: boolean; deriva?: number};
-type Estado = {pos: V3; mirar: V3; fov: number};
+export type Estado = {pos: V3; mirar: V3; fov: number};
+
+/**
+ * Dónde cae un punto 3D en la pantalla (1080×1920) con la cámara de este cuadro. Devuelve {x, y, visible}:
+ * `visible` es falso si el punto queda detrás de la cámara. Sirve para pegar etiquetas 2D a objetos 3D.
+ */
+export function proyectar(estado: Estado, punto: V3, ancho = 1080, alto = 1920): {x: number; y: number; visible: boolean} {
+	const cam = new THREE.PerspectiveCamera(estado.fov, ancho / alto, 0.1, 400);
+	cam.position.set(...estado.pos);
+	cam.lookAt(...estado.mirar);
+	cam.updateMatrixWorld(true);
+	const v = new THREE.Vector3(...punto).project(cam);
+	return {x: ((v.x + 1) / 2) * ancho, y: ((1 - v.y) / 2) * alto, visible: v.z < 1 && v.z > -1};
+}
 
 /** Cámara del cuadro actual. `tomas[i]` es la de la escena i+1; si falta, se conserva la anterior. */
 export function camara3D(tomas: (Toma3D | undefined | null)[], escena: number, tEscena: number, inicios?: number[]): Estado {
@@ -85,10 +98,104 @@ const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
 	return null;
 };
 
+/** Luz del cielo según la hora (0–24): mediodía claro, atardecer naranja, noche azul con luna. */
+type Cielo = {fondo: string; sol: string; fuerzaSol: number; arriba: string; abajo: string; fuerzaHemi: number; entorno: number; altura: number};
+const CIELOS: [number, Cielo][] = [
+	[0, {fondo: '#121A33', sol: '#9DB4FF', fuerzaSol: 0.55, arriba: '#5A6FA8', abajo: '#1A1F2E', fuerzaHemi: 0.5, entorno: 0.18, altura: 0.6}],
+	[6, {fondo: '#F6C7A0', sol: '#FFB27A', fuerzaSol: 1.4, arriba: '#FFE1C2', abajo: '#9C8A70', fuerzaHemi: 0.8, entorno: 0.4, altura: 0.25}],
+	[9, {fondo: '#BFE3FF', sol: '#FFFFFF', fuerzaSol: 2.3, arriba: '#FFFFFF', abajo: '#B9A98A', fuerzaHemi: 1.05, entorno: 0.55, altura: 1}],
+	[16, {fondo: '#BFE3FF', sol: '#FFFFFF', fuerzaSol: 2.3, arriba: '#FFFFFF', abajo: '#B9A98A', fuerzaHemi: 1.05, entorno: 0.55, altura: 1}],
+	[18.5, {fondo: '#F4A26B', sol: '#FF8A3D', fuerzaSol: 1.8, arriba: '#FFD2A8', abajo: '#8A6A55', fuerzaHemi: 0.75, entorno: 0.38, altura: 0.22}],
+	[20.5, {fondo: '#2A2F55', sol: '#8FA4FF', fuerzaSol: 0.6, arriba: '#6474B8', abajo: '#20233A', fuerzaHemi: 0.55, entorno: 0.2, altura: 0.6}],
+	[24, {fondo: '#121A33', sol: '#9DB4FF', fuerzaSol: 0.55, arriba: '#5A6FA8', abajo: '#1A1F2E', fuerzaHemi: 0.5, entorno: 0.18, altura: 0.6}],
+];
+const HORAS: Record<string, number> = {amanecer: 6.5, manana: 10, mañana: 10, dia: 12, día: 12, tarde: 16, atardecer: 18.5, noche: 22};
+const colorMezcla = (a: string, b: string, k: number) => '#' + new THREE.Color(a).lerp(new THREE.Color(b), k).getHexString();
+/** Cielo y luces para una hora (número 0–24 o 'dia', 'atardecer', 'noche'...). */
+export function cieloDeHora(hora: number | string): Cielo {
+	const h = (((typeof hora === 'string' ? HORAS[hora] ?? 12 : hora) % 24) + 24) % 24;
+	let i = CIELOS.findIndex(([x]) => x > h);
+	if (i <= 0) i = CIELOS.length - 1;
+	const [h0, a] = CIELOS[i - 1];
+	const [h1, b] = CIELOS[i];
+	const k = suave((h - h0) / (h1 - h0));
+	const n = (x: number, y: number) => x + (y - x) * k;
+	return {fondo: colorMezcla(a.fondo, b.fondo, k), sol: colorMezcla(a.sol, b.sol, k), fuerzaSol: n(a.fuerzaSol, b.fuerzaSol), arriba: colorMezcla(a.arriba, b.arriba, k), abajo: colorMezcla(a.abajo, b.abajo, k), fuerzaHemi: n(a.fuerzaHemi, b.fuerzaHemi), entorno: n(a.entorno, b.entorno), altura: n(a.altura, b.altura)};
+}
+
+/** Activa el recorte por planos (para `Corte`, la vista de rayos X). */
+const Recorte: React.FC = () => {
+	const {gl} = useThree();
+	useLayoutEffect(() => {
+		gl.localClippingEnabled = true;
+	}, [gl]);
+	return null;
+};
+
+/**
+ * Etiqueta pegada a un punto 3D: pastilla de color con una flecha que apunta al objeto. Sigue al objeto cuando la
+ * cámara se mueve. `escena` (1, 2...) la limita a esa escena; `en`/`hasta` son segundos desde que empieza.
+ */
+export type Etiqueta3D = {
+	pos: V3;
+	texto: string;
+	escena?: number | number[];
+	en?: number;
+	hasta?: number;
+	color?: string;
+	colorTexto?: string;
+	/** Hacia dónde sale la pastilla desde el objeto. */
+	lado?: 'arriba' | 'abajo' | 'izq' | 'der';
+	/** Largo de la flecha (px). */
+	largo?: number;
+	tam?: number;
+	inclinar?: number;
+};
+
+const EtiquetasPantalla: React.FC<{etiquetas: Etiqueta3D[]; estado: Estado; escena: number; tEscena: number}> = ({etiquetas, estado, escena, tEscena}) => (
+	<>
+		{etiquetas.map((e, i) => {
+			const escenas = e.escena == null ? null : ([] as number[]).concat(e.escena);
+			if (escenas && !escenas.includes(escena)) return null;
+			const t = tEscena - (e.en ?? 0.2);
+			if (t < 0 || (e.hasta != null && tEscena > e.hasta)) return null;
+			const p = proyectar(estado, e.pos);
+			if (!p.visible) return null;
+			const lado = e.lado ?? 'arriba';
+			const largo = e.largo ?? 110;
+			const tam = e.tam ?? 40;
+			const k = Math.min(1, t / 0.35);
+			const pop = 1 - Math.exp(-7 * k) * Math.cos(k * 7.5);
+			const flecha = largo * Math.min(1, t / 0.25);
+			const [dx, dy] = lado === 'arriba' ? [0, -1] : lado === 'abajo' ? [0, 1] : lado === 'izq' ? [-1, 0] : [1, 0];
+			const fx = p.x + dx * flecha;
+			const fy = p.y + dy * flecha;
+			const color = e.color ?? '#2D7BFF';
+			const ang = (Math.atan2(-dy, -dx) * 180) / Math.PI;
+			const transform = lado === 'arriba' ? 'translate(-50%, -100%)' : lado === 'abajo' ? 'translate(-50%, 0)' : lado === 'izq' ? 'translate(-100%, -50%)' : 'translate(0, -50%)';
+			return (
+				<React.Fragment key={i}>
+					<svg width={1080} height={1920} style={{position: 'absolute', left: 0, top: 0, pointerEvents: 'none'}}>
+						<line x1={fx} y1={fy} x2={p.x - dx * 6} y2={p.y - dy * 6} stroke={color} strokeWidth={9} strokeLinecap="round" />
+						<g transform={`translate(${p.x} ${p.y}) rotate(${ang})`}>
+							<path d="M 0 0 L -30 -17 L -30 17 Z" fill={color} />
+						</g>
+					</svg>
+					<div style={{position: 'absolute', left: fx, top: fy, transform: `${transform} scale(${pop}) rotate(${e.inclinar ?? -3}deg)`, transformOrigin: 'center', background: color, color: e.colorTexto ?? '#FFFFFF', fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: tam, padding: `${tam * 0.22}px ${tam * 0.5}px`, borderRadius: tam * 0.3, border: '4px solid rgba(255,255,255,0.95)', boxShadow: '0 8px 18px rgba(0,0,0,0.3)', whiteSpace: 'nowrap', letterSpacing: 0.5}}>
+						{e.texto}
+					</div>
+				</React.Fragment>
+			);
+		})}
+	</>
+);
+
 /**
  * El lienzo del mundo 3D (1080×1920). `luz`:
  *   'dia'     cielo claro, sol con sombras suaves (maquetas, cortes de terreno, low-poly)
  *   'calida'  cuarto oscuro con un foco cálido desde arriba y su cono visible (mesa, dinero, objetos)
+ * `hora` (0–24 o 'atardecer', 'noche'...) cambia el cielo y el sol de la luz 'dia'; anímala para pasar de día a noche.
+ * `etiquetas`: pastillas con flecha pegadas a puntos 3D (siguen al objeto con la cámara).
  */
 export const Lienzo3D: React.FC<{
 	tomas: (Toma3D | undefined | null)[];
@@ -96,25 +203,32 @@ export const Lienzo3D: React.FC<{
 	tEscena?: number;
 	inicios?: number[];
 	luz?: 'dia' | 'calida';
+	hora?: number | string;
 	fondo?: string;
 	niebla?: [number, number];
 	sol?: V3;
 	foco?: V3;
+	etiquetas?: Etiqueta3D[];
+	/** Encima del 3D, en coordenadas de pantalla (texto, tarjetas). */
+	encima?: React.ReactNode;
 	children: React.ReactNode;
-}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], children}) => {
+}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', hora, fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], etiquetas, encima, children}) => {
 	const estado = camara3D(tomas, escena, tEscena, inicios);
-	const color = fondo ?? (luz === 'dia' ? '#BFE3FF' : '#120A06');
+	const cielo = cieloDeHora(hora ?? 12);
+	const color = fondo ?? (luz === 'dia' ? cielo.fondo : '#120A06');
+	const posSol: V3 = [sol[0], sol[1] * cielo.altura + 1.5, sol[2]];
 	return (
-		<div style={{width: 1080, height: 1920}}>
+		<div style={{position: 'relative', width: 1080, height: 1920}}>
 			<ThreeCanvas width={1080} height={1920} shadows gl={{antialias: true}} camera={{fov: estado.fov, position: estado.pos, near: 0.1, far: 400}}>
 				<color attach="background" args={[color]} />
 				{niebla ? <fog attach="fog" args={[color, niebla[0], niebla[1]]} /> : null}
 				<Camara estado={estado} />
+				<Recorte />
 				{luz === 'dia' ? (
 					<>
-						<Entorno fuerza={0.55} />
-						<hemisphereLight args={['#ffffff', '#b9a98a', 1.05]} />
-						<directionalLight position={sol} intensity={2.3} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
+						<Entorno fuerza={cielo.entorno} />
+						<hemisphereLight args={[cielo.arriba, cielo.abajo, cielo.fuerzaHemi]} />
+						<directionalLight position={posSol} color={cielo.sol} intensity={cielo.fuerzaSol} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
 					</>
 				) : (
 					<>
@@ -130,6 +244,8 @@ export const Lienzo3D: React.FC<{
 				)}
 				{children}
 			</ThreeCanvas>
+			{etiquetas?.length ? <EtiquetasPantalla etiquetas={etiquetas} estado={estado} escena={escena} tEscena={tEscena} /> : null}
+			{encima}
 		</div>
 	);
 };