morfeo 0.5.1 → 0.6.0

package/remotion/kit/ambientes.tsx

@@ -0,0 +1,635 @@
+// Ambientes 3D listos: sets completos con utilería, luz propia, vida de fondo (tele que parpadea, LED que cambia,
+// lluvia en la ventana, polvo en la luz, gato que respira) y planos de cámara con nombre. Sirven como `mundo` de
+// cualquier video (también 2D): así ninguna escena queda con un fondo vacío.
+//
+//   <Ambiente nombre="cuarto-gamer" t={t} escena={escena} tEscena={tEscena} inicios={inicios} persona />
+//   capa del motor:  {tipo: 'ambiente', nombre: 'cuarto-gamer'}   ·   escena: {plano: 'tele'}
+//
+// Sin `plano`, cada escena toma el siguiente de `orden` (otro ángulo en cada escena). Nada usa useFrame.
+import React from 'react';
+import * as THREE from 'three';
+import {azarN} from './ilustrado';
+import {Persona3D} from './mundo3d';
+import type {Expresion, Pose} from './personas';
+import {Bloque, Lienzo3D, type Etiqueta3D, type Post3D, type Toma3D, type V3} from './tres';
+
+export type NombreAmbiente = 'cuarto-gamer' | 'sala' | 'arcade';
+export type Reaccion = {en: number; expresion?: Expresion; pose?: Pose};
+
+type Def = {
+	luz: 'noche' | 'calida' | 'dia';
+	fondo: string;
+	niebla: [number, number];
+	post: Post3D;
+	/** Planos con nombre (la toma de cada escena). */
+	planos: Record<string, Toma3D>;
+	/** Orden de planos cuando la escena no dice ninguno. */
+	orden: string[];
+	/** Orden para escenas con capas 2D al centro: planos abiertos (sin la cara de la persona tapando la capa). */
+	ordenFondo: string[];
+	/** Puntos con nombre (para etiquetas y para apuntar): tele, consola, persona… */
+	anclas: Record<string, V3>;
+	/** Dónde y cómo va la persona. */
+	persona: {pos: V3; rot: V3; pose: Pose};
+	Set: React.FC<{t: number}>;
+};
+
+const hsl = (h: number, s: number, l: number) => '#' + new THREE.Color().setHSL(((h % 1) + 1) % 1, s, l).getHexString();
+const Emisivo: React.FC<{pos: V3; tam: V3; color: string; fuerza?: number; rot?: V3}> = ({pos, tam, color, fuerza = 1, rot}) => (
+	<mesh position={pos} rotation={rot}>
+		<boxGeometry args={tam} />
+		<meshStandardMaterial color={color} emissive={color} emissiveIntensity={fuerza} toneMapped={false} />
+	</mesh>
+);
+
+/** Cuarto: piso, pared del fondo, pared izquierda y techo bajo (abierto hacia la cámara). */
+const Cuarto: React.FC<{ancho: number; fondo: number; alto: number; pared: string; lateral?: string; piso: string; techo?: boolean}> = ({ancho, fondo, alto, pared, lateral, piso, techo = true}) => (
+	<group>
+		<mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+			<planeGeometry args={[ancho, fondo]} />
+			<meshStandardMaterial color={piso} roughness={0.85} />
+		</mesh>
+		<Bloque pos={[0, alto / 2, -fondo / 2]} tam={[ancho, alto, 0.2]} color={pared} rugosidad={0.95} />
+		<Bloque pos={[-ancho / 2, alto / 2, 0]} tam={[0.2, alto, fondo]} color={lateral ?? pared} rugosidad={0.95} />
+		<Bloque pos={[ancho / 2, alto / 2, 0]} tam={[0.2, alto, fondo]} color={lateral ?? pared} rugosidad={0.95} />
+		{techo ? <Bloque pos={[0, alto + 0.1, 0]} tam={[ancho, 0.2, fondo]} color="#1A1C26" /> : null}
+		{/* zoclo */}
+		<Bloque pos={[0, 0.06, -fondo / 2 + 0.12]} tam={[ancho, 0.12, 0.04]} color="#E9E1D2" />
+	</group>
+);
+
+/** Ventana de noche con lluvia: marco, vidrio oscuro con edificios lejanos y gotas que bajan. */
+const VentanaLluvia: React.FC<{pos: V3; ancho?: number; alto?: number; t: number; semilla?: number}> = ({pos, ancho = 1.8, alto = 1.5, t, semilla = 0}) => (
+	<group position={pos}>
+		<Bloque pos={[0, 0, 0]} tam={[ancho + 0.14, alto + 0.14, 0.06]} color="#E9E1D2" />
+		<mesh position={[0, 0, 0.035]}>
+			<planeGeometry args={[ancho, alto]} />
+			<meshStandardMaterial color="#141C3A" emissive="#1B2550" emissiveIntensity={0.5} />
+		</mesh>
+		{/* edificios lejanos con ventanas encendidas */}
+		{Array.from({length: 7}, (_, i) => {
+			const h = 0.3 + azarN(semilla + i * 3.1) * 0.7;
+			const x = -ancho / 2 + 0.13 + i * ((ancho - 0.26) / 6);
+			return (
+				<group key={i}>
+					<mesh position={[x, -alto / 2 + h / 2, 0.04]}>
+						<planeGeometry args={[0.22, h]} />
+						<meshStandardMaterial color="#0A0F22" />
+					</mesh>
+					{Array.from({length: 3}, (_, j) =>
+						azarN(semilla + i * 7 + j) > 0.45 ? <Emisivo key={j} pos={[x + (j - 1) * 0.06, -alto / 2 + 0.08 + azarN(i + j * 5) * (h - 0.12), 0.045]} tam={[0.03, 0.04, 0.001]} color="#FFD27A" fuerza={1.4} /> : null,
+					)}
+				</group>
+			);
+		})}
+		{/* gotas de lluvia bajando por el vidrio */}
+		{Array.from({length: 22}, (_, i) => {
+			const v = 0.25 + azarN(semilla + i * 2.3) * 0.35;
+			const f = (t * v + azarN(semilla + i * 9.7)) % 1;
+			return <Emisivo key={`g${i}`} pos={[-ancho / 2 + 0.05 + azarN(semilla + i * 4.4) * (ancho - 0.1), alto / 2 - 0.05 - f * (alto - 0.1), 0.05]} tam={[0.008, 0.07, 0.002]} color="#9FC3FF" fuerza={0.6} />;
+		})}
+		{/* cortinas */}
+		<Bloque pos={[-ancho / 2 - 0.15, -0.05, 0.12]} tam={[0.3, alto + 0.4, 0.05]} color="#3B2F55" />
+		<Bloque pos={[ancho / 2 + 0.15, -0.05, 0.12]} tam={[0.3, alto + 0.4, 0.05]} color="#3B2F55" />
+	</group>
+);
+
+/** Polvo flotando en el aire (se ve en la luz): puntitos que suben y bajan despacio. */
+const Polvo: React.FC<{centro: V3; tam: V3; t: number; n?: number; color?: string}> = ({centro, tam, t, n = 40, color = '#FFE6B8'}) => (
+	<group>
+		{Array.from({length: n}, (_, i) => {
+			const x = centro[0] + (azarN(i * 3.7) - 0.5) * tam[0] + Math.sin(t * 0.3 + i) * 0.08;
+			const y = centro[1] + (((azarN(i * 5.3) + t * 0.02 * (0.5 + azarN(i))) % 1) - 0.5) * tam[1];
+			const z = centro[2] + (azarN(i * 7.1) - 0.5) * tam[2] + Math.cos(t * 0.25 + i) * 0.08;
+			return (
+				<mesh key={i} position={[x, y, z]}>
+					<sphereGeometry args={[0.008 + azarN(i * 1.9) * 0.008, 5, 4]} />
+					<meshBasicMaterial color={color} transparent opacity={0.55} toneMapped={false} />
+				</mesh>
+			);
+		})}
+	</group>
+);
+
+/** Tele o monitor encendido: la pantalla cambia de color como un juego y alumbra lo que tiene enfrente. */
+export const Tele3D: React.FC<{pos: V3; ancho?: number; t: number; fase?: number; luz?: number; rot?: V3}> = ({pos, ancho = 1.5, t, fase = 0, luz = 2.2, rot}) => {
+	const alto = ancho * 0.58;
+	// "juego": un cielo que cambia lento, un piso, un personaje que brinca y destellos de vez en cuando
+	const cielo = hsl(0.58 + Math.sin(t * 0.25 + fase) * 0.08, 0.7, 0.45);
+	const destello = Math.max(0, Math.sin(t * 2.3 + fase)) ** 12;
+	const brinco = Math.abs(Math.sin(t * 3 + fase)) * alto * 0.18;
+	return (
+		<group position={pos} rotation={rot}>
+			<Bloque pos={[0, 0, 0]} tam={[ancho + 0.08, alto + 0.08, 0.07]} color="#15161B" radio={0.02} />
+			<mesh position={[0, 0, 0.037]}>
+				<planeGeometry args={[ancho, alto]} />
+				<meshStandardMaterial color={cielo} emissive={cielo} emissiveIntensity={0.6 + 0.6 * destello} />
+			</mesh>
+			<Emisivo pos={[0, -alto * 0.36, 0.04]} tam={[ancho, alto * 0.28, 0.001]} color="#3CB371" fuerza={0.9} />
+			<Emisivo pos={[-ancho * 0.2, -alto * 0.14 + brinco, 0.042]} tam={[alto * 0.12, alto * 0.16, 0.001]} color="#FF4D4D" fuerza={1.2} />
+			<Emisivo pos={[ancho * 0.25, alto * 0.25, 0.042]} tam={[alto * 0.14, alto * 0.08, 0.001]} color="#FFFFFF" fuerza={0.9} />
+			<pointLight position={[0, 0, 0.6]} color={cielo} intensity={luz * (0.85 + 0.15 * Math.sin(t * 9 + fase) + destello)} distance={5} decay={1.5} />
+		</group>
+	);
+};
+
+/** Consola blanca con su luz encendida y un control encima de la mesa. */
+const ConsolaYControl: React.FC<{pos: V3; t: number}> = ({pos, t}) => (
+	<group position={pos}>
+		<Bloque pos={[0, 0.06, 0]} tam={[0.5, 0.12, 0.36]} color="#E9ECF1" radio={0.02} />
+		<Emisivo pos={[-0.18, 0.07, 0.182]} tam={[0.05, 0.015, 0.004]} color="#3DDC84" fuerza={1 + 0.5 * Math.sin(t * 2)} />
+		<group position={[0.55, 0.03, 0.25]} rotation={[0, -0.4, 0]}>
+			<Bloque pos={[0, 0, 0]} tam={[0.32, 0.06, 0.16]} color="#2A2A30" radio={0.03} />
+			<Bloque pos={[-0.13, -0.005, 0.04]} tam={[0.1, 0.06, 0.12]} color="#2A2A30" radio={0.03} />
+			<Bloque pos={[0.13, -0.005, 0.04]} tam={[0.1, 0.06, 0.12]} color="#2A2A30" radio={0.03} />
+			<Emisivo pos={[0.08, 0.035, -0.02]} tam={[0.03, 0.01, 0.03]} color="#E5484D" fuerza={0.6} />
+			<Emisivo pos={[0.12, 0.035, 0.01]} tam={[0.03, 0.01, 0.03]} color="#3D7BFF" fuerza={0.6} />
+		</group>
+	</group>
+);
+
+/** Silla gamer (respaldo alto) mirando hacia −z. */
+const SillaGamer: React.FC<{pos: V3; color?: string}> = ({pos, color = '#C62E3A'}) => (
+	<group position={pos}>
+		<Bloque pos={[0, 0.42, 0.05]} tam={[0.62, 0.1, 0.58]} color="#1E1F26" radio={0.04} />
+		<Bloque pos={[0, 0.98, 0.34]} tam={[0.6, 1.05, 0.1]} color="#1E1F26" radio={0.05} />
+		<Bloque pos={[0, 1.0, 0.285]} tam={[0.3, 0.9, 0.02]} color={color} />
+		<Bloque pos={[0, 0.2, 0.05]} tam={[0.06, 0.36, 0.06]} color="#2A2A30" metal={0.6} />
+		{[0, 1, 2, 3, 4].map((k) => (
+			<Bloque key={k} pos={[Math.cos((k * Math.PI * 2) / 5) * 0.28, 0.03, 0.05 + Math.sin((k * Math.PI * 2) / 5) * 0.28]} rot={[0, (-k * 360) / 5, 0]} tam={[0.3, 0.04, 0.05]} color="#2A2A30" />
+		))}
+	</group>
+);
+
+/** Estante de pared con cajas de juegos de colores, una planta y una figura. */
+const Estante: React.FC<{pos: V3; rot?: V3; semilla?: number}> = ({pos, rot, semilla = 0}) => {
+	const colores = ['#E5484D', '#3D7BFF', '#F2B632', '#30A46C', '#8B5BD6', '#EDEDED', '#FF8A3D'];
+	return (
+		<group position={pos} rotation={rot}>
+			{[0, 0.62].map((y, f) => (
+				<group key={f} position={[0, y, 0]}>
+					<Bloque pos={[0, 0, 0]} tam={[1.5, 0.05, 0.32]} color="#8A6A48" />
+					{Array.from({length: 9}, (_, i) =>
+						f === 1 && i > 5 ? null : <Bloque key={i} pos={[-0.66 + i * 0.075, 0.2, 0]} rot={[0, 0, i === 8 ? -12 : 0]} tam={[0.06, 0.34 + azarN(semilla + i + f * 9) * 0.04, 0.24]} color={colores[Math.floor(azarN(semilla + i * 3 + f) * colores.length)]} />,
+					)}
+				</group>
+			))}
+			{/* planta y figura */}
+			<group position={[0.45, 0.65, 0]}>
+				<Bloque pos={[0, 0.08, 0]} tam={[0.16, 0.16, 0.16]} color="#C47A4A" />
+				{[0, 1, 2, 3].map((k) => (
+					<mesh key={k} position={[Math.cos(k * 1.6) * 0.05, 0.26 + k * 0.02, Math.sin(k * 1.6) * 0.05]} rotation={[0.3 * Math.cos(k), k, 0.4]}>
+						<coneGeometry args={[0.06, 0.24, 4]} />
+						<meshStandardMaterial color="#3E9B5A" flatShading />
+					</mesh>
+				))}
+			</group>
+			<group position={[0.28, 0.66, 0]}>
+				<mesh position={[0, 0.12, 0]}>
+					<octahedronGeometry args={[0.1, 0]} />
+					<meshStandardMaterial color="#F2B632" metalness={0.6} roughness={0.3} flatShading />
+				</mesh>
+			</group>
+		</group>
+	);
+};
+
+/** Póster genérico (formas, sin marcas): planeta con anillo o nave. */
+const Poster: React.FC<{pos: V3; tipo?: 'planeta' | 'nave' | 'pixel'; rot?: V3}> = ({pos, tipo = 'planeta', rot}) => (
+	<group position={pos} rotation={rot}>
+		<Bloque pos={[0, 0, 0]} tam={[0.7, 1.0, 0.02]} color={tipo === 'nave' ? '#1E2340' : tipo === 'pixel' ? '#2B1640' : '#2A1F3D'} />
+		{tipo === 'planeta' ? (
+			<group position={[0, 0.08, 0.02]}>
+				<mesh>
+					<circleGeometry args={[0.2, 20]} />
+					<meshStandardMaterial color="#FF8A3D" />
+				</mesh>
+				<mesh rotation={[0, 0, 0.3]}>
+					<ringGeometry args={[0.26, 0.3, 28]} />
+					<meshStandardMaterial color="#FFD34D" side={THREE.DoubleSide} />
+				</mesh>
+			</group>
+		) : tipo === 'nave' ? (
+			<group position={[0, 0.05, 0.02]}>
+				<mesh rotation={[0, 0, Math.PI]}>
+					<circleGeometry args={[0.2, 3]} />
+					<meshStandardMaterial color="#5FD4FF" />
+				</mesh>
+				<Bloque pos={[0, -0.28, 0]} tam={[0.08, 0.14, 0.005]} color="#FF5A3D" />
+			</group>
+		) : (
+			<group position={[0, 0.05, 0.02]}>
+				{[
+					[0, 2],
+					[1, 1],
+					[1, 2],
+					[1, 3],
+					[2, 0],
+					[2, 1],
+					[2, 2],
+					[2, 3],
+					[2, 4],
+					[3, 1],
+					[3, 3],
+				].map(([f, c], i) => (
+					<Bloque key={i} pos={[(c - 2) * 0.09, (1.5 - f) * 0.09, 0]} tam={[0.085, 0.085, 0.005]} color="#5ADC6E" />
+				))}
+			</group>
+		)}
+		<Bloque pos={[0, -0.4, 0.015]} tam={[0.5, 0.06, 0.005]} color="#E9E1D2" />
+	</group>
+);
+
+/** Tira de LED que cambia de color despacio (y alumbra la pared). */
+const TiraLED: React.FC<{pos: V3; largo: number; t: number; fase?: number; luz?: number}> = ({pos, largo, t, fase = 0, luz = 1.6}) => {
+	const c = hsl(0.75 + t * 0.03 + fase, 0.9, 0.55);
+	return (
+		<group position={pos}>
+			<Emisivo pos={[0, 0, 0]} tam={[largo, 0.03, 0.03]} color={c} fuerza={2} />
+			<pointLight position={[0, -0.1, 0.3]} color={c} intensity={luz} distance={3.5} decay={1.5} />
+		</group>
+	);
+};
+
+/** Gato low-poly echado: respira y mueve la cola. */
+export const Gato3D: React.FC<{pos: V3; rot?: V3; t: number; color?: string; escala?: number}> = ({pos, rot = [0, 0, 0], t, color = '#E8A55C', escala = 1}) => {
+	const resp = 1 + Math.sin(t * 2.2) * 0.03;
+	const cola = Math.sin(t * 1.6) * 0.5;
+	return (
+		<group position={pos} rotation={rot.map((g) => (g * Math.PI) / 180) as V3} scale={escala}>
+			<mesh position={[0, 0.13, 0]} scale={[1.35, 0.75 * resp, 0.85]}>
+				<icosahedronGeometry args={[0.16, 0]} />
+				<meshStandardMaterial color={color} flatShading />
+			</mesh>
+			<mesh position={[0.22, 0.2, 0]}>
+				<icosahedronGeometry args={[0.1, 0]} />
+				<meshStandardMaterial color={color} flatShading />
+			</mesh>
+			{[-1, 1].map((l) => (
+				<mesh key={l} position={[0.25, 0.3, l * 0.05]} rotation={[0, 0, -0.2]}>
+					<coneGeometry args={[0.035, 0.08, 4]} />
+					<meshStandardMaterial color={color} flatShading />
+				</mesh>
+			))}
+			<group position={[-0.22, 0.1, 0]} rotation={[cola, 0, 0.6]}>
+				<mesh position={[0, 0.12, 0]}>
+					<cylinderGeometry args={[0.025, 0.035, 0.26, 5]} />
+					<meshStandardMaterial color={color} flatShading />
+				</mesh>
+			</group>
+		</group>
+	);
+};
+
+// ── Sets ────────────────────────────────────────────────────────────────────────────────
+
+const SetCuartoGamer: React.FC<{t: number}> = ({t}) => (
+	<group>
+		<Cuarto ancho={8} fondo={6} alto={3.6} pared="#2C3550" lateral="#26304A" piso="#5A3E2B" />
+		{/* tapete */}
+		<mesh position={[-0.9, 0.006, -0.9]} rotation={[-Math.PI / 2, 0, 0]}>
+			<circleGeometry args={[1.3, 28]} />
+			<meshStandardMaterial color="#3B2F55" roughness={1} />
+		</mesh>
+		{/* escritorio, tele, consola */}
+		<Bloque pos={[-1.0, 0.76, -2.4]} tam={[2.4, 0.07, 0.9]} color="#C49A6C" rugosidad={0.8} />
+		{[-2.1, 0.1].map((x) => (
+			<Bloque key={x} pos={[x, 0.37, -2.4]} tam={[0.07, 0.74, 0.8]} color="#8A6A48" />
+		))}
+		<Bloque pos={[-1.0, 0.86, -2.68]} tam={[0.35, 0.12, 0.2]} color="#222228" />
+		<Tele3D pos={[-1.0, 1.42, -2.72]} ancho={1.55} t={t} />
+		<ConsolaYControl pos={[-0.45, 0.8, -2.35]} t={t} />
+		{/* cables que bajan del escritorio */}
+		<Bloque pos={[-1.15, 0.4, -2.82]} tam={[0.025, 0.8, 0.025]} color="#111" />
+		<Bloque pos={[-0.95, 0.4, -2.8]} tam={[0.025, 0.8, 0.025]} color="#111" />
+		{/* LED detrás del escritorio y en el techo */}
+		<TiraLED pos={[-1.0, 0.72, -2.84]} largo={2.2} t={t} />
+		<TiraLED pos={[0, 3.52, -2.86]} largo={7.6} t={t} fase={0.3} luz={1.2} />
+		{/* silla */}
+		<SillaGamer pos={[-1.0, 0, -0.95]} />
+		{/* pósters y estante */}
+		<Poster pos={[-2.9, 2.3, -2.88]} tipo="planeta" />
+		<Poster pos={[0.65, 2.45, -2.88]} tipo="pixel" />
+		<Estante pos={[-3.82, 1.25, -1.2]} rot={[0, 90, 0].map((g) => (g * Math.PI) / 180) as V3} />
+		{/* ventana con lluvia y cama */}
+		<VentanaLluvia pos={[2.3, 2.1, -2.88]} t={t} />
+		<Bloque pos={[2.75, 0.25, -1.6]} tam={[1.7, 0.5, 2.4]} color="#4A3A2A" />
+		<Bloque pos={[2.75, 0.56, -1.4]} tam={[1.6, 0.14, 2.0]} color="#3D7BFF" />
+		<Bloque pos={[2.75, 0.62, -2.6]} tam={[1.0, 0.16, 0.35]} color="#EDEDED" radio={0.06} />
+		{/* lámpara de techo cálida */}
+		<mesh position={[0.4, 3.45, -0.6]}>
+			<cylinderGeometry args={[0.28, 0.38, 0.16, 16]} />
+			<meshStandardMaterial color="#F2D49B" emissive="#F2D49B" emissiveIntensity={0.6} />
+		</mesh>
+		<pointLight position={[0.4, 3.1, -0.6]} intensity={5} distance={9} decay={1.6} color="#FFD9A0" castShadow shadow-mapSize={[1024, 1024]} shadow-bias={-0.0005} />
+		<Polvo centro={[-0.6, 1.8, -1.4]} tam={[2.6, 2.4, 2]} t={t} />
+	</group>
+);
+
+const SetSala: React.FC<{t: number}> = ({t}) => (
+	<group>
+		<Cuarto ancho={9} fondo={7} alto={3.6} pared="#4A3B5C" lateral="#40334F" piso="#6E4A30" />
+		<mesh position={[0, 0.006, -1.0]} rotation={[-Math.PI / 2, 0, 0]}>
+			<planeGeometry args={[3.6, 2.6]} />
+			<meshStandardMaterial color="#8A3B3B" roughness={1} />
+		</mesh>
+		{/* mueble y tele */}
+		<Bloque pos={[0, 0.3, -3.1]} tam={[2.6, 0.6, 0.5]} color="#3A2A20" />
+		<Tele3D pos={[0, 1.25, -3.2]} ancho={1.9} t={t} fase={1.3} luz={2.6} />
+		<ConsolaYControl pos={[0.75, 0.6, -3.05]} t={t} />
+		<TiraLED pos={[0, 0.58, -3.32]} largo={2.4} t={t} fase={0.5} />
+		{/* sillón mirando a la tele */}
+		<group position={[0, 0, 0.9]}>
+			<Bloque pos={[0, 0.25, 0]} tam={[2.4, 0.5, 0.9]} color="#2F6FA0" radio={0.08} />
+			<Bloque pos={[0, 0.75, 0.38]} tam={[2.4, 0.7, 0.2]} color="#2F6FA0" radio={0.08} />
+			{[-1.25, 1.25].map((x) => (
+				<Bloque key={x} pos={[x, 0.45, 0]} tam={[0.22, 0.6, 0.9]} color="#285E88" radio={0.06} />
+			))}
+			<Bloque pos={[-0.7, 0.6, 0.05]} tam={[0.5, 0.18, 0.5]} color="#F2B632" radio={0.08} />
+		</group>
+		{/* mesa de centro con tazas */}
+		<Bloque pos={[0, 0.38, -1.0]} tam={[1.4, 0.06, 0.7]} color="#C49A6C" />
+		{[-0.6, 0.6].map((x) => (
+			<Bloque key={x} pos={[x, 0.18, -1.0]} tam={[0.06, 0.36, 0.6]} color="#8A6A48" />
+		))}
+		<mesh position={[0.3, 0.47, -0.95]}>
+			<cylinderGeometry args={[0.06, 0.05, 0.12, 12]} />
+			<meshStandardMaterial color="#EDEDED" />
+		</mesh>
+		{/* lámpara de pie, planta, cuadros, ventana */}
+		<group position={[-3.4, 0, -2.4]}>
+			<Bloque pos={[0, 0.8, 0]} tam={[0.05, 1.6, 0.05]} color="#2A2A30" />
+			<mesh position={[0, 1.7, 0]}>
+				<cylinderGeometry args={[0.2, 0.3, 0.32, 14, 1, true]} />
+				<meshStandardMaterial color="#F2D49B" emissive="#F2D49B" emissiveIntensity={0.8} side={THREE.DoubleSide} />
+			</mesh>
+			<pointLight position={[0, 1.6, 0.2]} intensity={3.2} distance={6} decay={1.5} color="#FFC88A" castShadow shadow-mapSize={[1024, 1024]} shadow-bias={-0.0005} />
+		</group>
+		<group position={[3.6, 0, -2.6]}>
+			<Bloque pos={[0, 0.2, 0]} tam={[0.4, 0.4, 0.4]} color="#C47A4A" />
+			{[0, 1, 2, 3, 4].map((k) => (
+				<mesh key={k} position={[Math.cos(k * 1.3) * 0.12, 0.65 + k * 0.08, Math.sin(k * 1.3) * 0.12]} rotation={[0.3 * Math.cos(k), k, 0.5]}>
+					<coneGeometry args={[0.14, 0.6, 4]} />
+					<meshStandardMaterial color="#3E9B5A" flatShading />
+				</mesh>
+			))}
+		</group>
+		<Poster pos={[-2.0, 2.2, -3.38]} tipo="nave" />
+		<Poster pos={[2.0, 2.2, -3.38]} tipo="planeta" />
+		<VentanaLluvia pos={[-4.38, 1.9, -0.6]} t={t} semilla={4} />
+		<Gato3D pos={[1.25, 0.75, 0.95]} rot={[0, -30, 0]} t={t} escala={0.9} />
+		<pointLight position={[0, 3.2, 0]} intensity={1.6} distance={9} decay={1.6} color="#FFD9A0" />
+		<Polvo centro={[-2.4, 1.6, -1.8]} tam={[2.2, 2.2, 2]} t={t} />
+	</group>
+);
+
+const COLORES_ARCADE = ['#FF3B6B', '#3DB8FF', '#FFD23D', '#5ADC6E', '#B25BFF'];
+const Maquinita: React.FC<{pos: V3; rot?: number; t: number; i: number}> = ({pos, rot = 0, t, i}) => {
+	const c = COLORES_ARCADE[i % COLORES_ARCADE.length];
+	const pant = hsl(0.1 * i + t * 0.05, 0.75, 0.5);
+	return (
+		<group position={pos} rotation={[0, rot, 0]}>
+			<Bloque pos={[0, 0.9, 0]} tam={[0.8, 1.8, 0.8]} color="#1C1C26" />
+			<Bloque pos={[-0.41, 0.9, 0]} tam={[0.03, 1.82, 0.82]} color={c} />
+			<Bloque pos={[0.41, 0.9, 0]} tam={[0.03, 1.82, 0.82]} color={c} />
+			<Emisivo pos={[0, 1.95, 0.32]} tam={[0.76, 0.22, 0.04]} color={c} fuerza={1.8} />
+			<mesh position={[0, 1.42, 0.37]} rotation={[-0.25, 0, 0]}>
+				<planeGeometry args={[0.6, 0.48]} />
+				<meshStandardMaterial color={pant} emissive={pant} emissiveIntensity={1.1 + 0.3 * Math.sin(t * 7 + i)} toneMapped={false} />
+			</mesh>
+			<Emisivo pos={[(Math.sin(t * 2 + i) * 0.2), 1.42 + Math.cos(t * 3 + i) * 0.1, 0.4]} tam={[0.06, 0.06, 0.005]} color="#FFFFFF" fuerza={1.5} rot={[-0.25, 0, 0]} />
+			<Bloque pos={[0, 1.02, 0.5]} tam={[0.78, 0.08, 0.3]} color="#2A2A36" />
+			<Emisivo pos={[-0.18, 1.08, 0.52]} tam={[0.05, 0.05, 0.05]} color="#FF3B30" fuerza={1} />
+			<Emisivo pos={[0.12, 1.08, 0.55]} tam={[0.05, 0.05, 0.05]} color="#3DB8FF" fuerza={1} />
+			<Emisivo pos={[0.22, 1.08, 0.5]} tam={[0.05, 0.05, 0.05]} color="#FFD23D" fuerza={1} />
+			<pointLight position={[0, 1.4, 0.9]} color={pant} intensity={1.4} distance={2.6} decay={1.5} />
+		</group>
+	);
+};
+
+const SetArcade: React.FC<{t: number}> = ({t}) => (
+	<group>
+		<Cuarto ancho={10} fondo={8} alto={3.8} pared="#1A1030" lateral="#160D2A" piso="#1E1A3A" />
+		{/* alfombra con figuras que brillan */}
+		{Array.from({length: 60}, (_, i) => (
+			<Emisivo key={i} pos={[(azarN(i * 2.1) - 0.5) * 9, 0.004, (azarN(i * 3.3) - 0.5) * 7]} tam={[0.12, 0.002, 0.12]} rot={[0, azarN(i) * 3, 0]} color={COLORES_ARCADE[i % 5]} fuerza={0.35} />
+		))}
+		{[-3, -1.8, -0.6, 0.6, 1.8, 3].map((x, i) => (
+			<Maquinita key={x} pos={[x, 0, -3.4]} t={t} i={i} />
+		))}
+		{[-2, -0.6, 0.8].map((z, i) => (
+			<Maquinita key={z} pos={[-4.4, 0, z]} rot={Math.PI / 2} t={t} i={i + 6} />
+		))}
+		{/* letreros de neón: rayo y estrella */}
+		<group position={[2.6, 2.9, -3.88]}>
+			{[
+				[0, 0.3, 0.5, -30],
+				[0.05, 0, 0.3, 60],
+				[0.1, -0.3, 0.5, -30],
+			].map(([x, y, l, r], i) => (
+				<Emisivo key={i} pos={[x, y, 0]} tam={[l, 0.06, 0.04]} rot={[0, 0, (r * Math.PI) / 180]} color="#FFD23D" fuerza={2.2 * (0.75 + 0.25 * (Math.sin(t * 13) > -0.8 ? 1 : 0))} />
+			))}
+			<pointLight position={[0, 0, 0.6]} color="#FFD23D" intensity={2} distance={4} />
+		</group>
+		<group position={[-2.4, 2.9, -3.88]}>
+			{[0, 1, 2, 3, 4].map((k) => (
+				<Emisivo key={k} pos={[Math.cos((k * Math.PI * 2) / 5 + Math.PI / 2) * 0.22, Math.sin((k * Math.PI * 2) / 5 + Math.PI / 2) * 0.22, 0]} tam={[0.42, 0.05, 0.04]} rot={[0, 0, (k * 72 + 90 + 54) * (Math.PI / 180)]} color="#FF3B6B" fuerza={2.2} />
+			))}
+			<pointLight position={[0, 0, 0.6]} color="#FF3B6B" intensity={2} distance={4} />
+		</group>
+		{/* focos del techo */}
+		{[-3, 0, 3].map((x) => (
+			<group key={x} position={[x, 3.7, -1]}>
+				<Emisivo pos={[0, 0, 0]} tam={[1.2, 0.04, 0.12]} color="#B9A8FF" fuerza={1.2} />
+				<pointLight position={[0, -0.3, 0]} intensity={1.3} distance={6} decay={1.6} color="#B9A8FF" />
+			</group>
+		))}
+		<Polvo centro={[0, 1.8, -1.5]} tam={[6, 2.5, 3]} t={t} color="#D8C8FF" />
+	</group>
+);
+
+const AMBIENTES: Record<NombreAmbiente, Def> = {
+	'cuarto-gamer': {
+		luz: 'noche',
+		fondo: '#0B0E1A',
+		niebla: [10, 26],
+		post: 'cine',
+		planos: {
+			general: {pos: [2.6, 2.6, 3.4], mirar: [-0.7, 1.15, -1.6], fov: 50, a: {pos: [2.1, 2.4, 2.8]}},
+			persona: {pos: [0.7, 1.55, -2.15], mirar: [-1.0, 1.2, -0.95], fov: 44, a: {pos: [0.55, 1.5, -2.05]}},
+			escritorio: {pos: [0.2, 1.8, 0.5], mirar: [-1.0, 1.25, -2.5], fov: 42, a: {pos: [0.05, 1.7, 0.2]}},
+			tele: {pos: [0.5, 1.75, 0.3], mirar: [-1.0, 1.25, -2.72], fov: 42, a: {pos: [0.35, 1.7, 0.0]}},
+			consola: {pos: [1.0, 1.9, -0.5], mirar: [-0.5, 0.95, -2.35], fov: 42, a: {pos: [0.85, 1.82, -0.75]}},
+			estante: {pos: [-1.9, 1.75, 0.8], mirar: [-3.8, 1.55, -1.2], fov: 42, a: {pos: [-2.1, 1.7, 0.5]}},
+			ventana: {pos: [0.9, 1.75, 0.8], mirar: [2.3, 1.9, -2.88], fov: 44, a: {pos: [1.05, 1.75, 0.5]}},
+			contrapicado: {pos: [0.9, 0.45, -2.2], mirar: [-1.0, 1.35, -0.95], fov: 50},
+			cenital: {pos: [-0.9, 3.4, 0.4], mirar: [-1.0, 0.7, -1.5], fov: 52, a: {pos: [-0.9, 3.3, 0.1]}},
+		},
+		orden: ['general', 'persona', 'escritorio', 'tele', 'contrapicado', 'consola', 'estante', 'ventana', 'cenital'],
+		ordenFondo: ['general', 'escritorio', 'estante', 'ventana', 'cenital', 'consola'],
+		anclas: {tele: [-1.0, 1.42, -2.72], consola: [-0.45, 0.92, -2.35], control: [0.1, 0.86, -2.1], escritorio: [-1.0, 0.8, -2.4], persona: [-1.0, 1.3, -0.95], estante: [-3.8, 1.5, -1.2], ventana: [2.3, 2.1, -2.88], cama: [2.75, 0.6, -1.6], silla: [-1.0, 0.9, -0.95]},
+		persona: {pos: [-1.0, 0, -0.98], rot: [0, 180, 0], pose: 'sentado'},
+		Set: SetCuartoGamer,
+	},
+	sala: {
+		luz: 'noche',
+		fondo: '#0E0B16',
+		niebla: [11, 28],
+		post: 'cine',
+		planos: {
+			general: {pos: [3.0, 2.7, 4.2], mirar: [0, 0.9, -1.2], fov: 50, a: {pos: [2.5, 2.5, 3.6]}},
+			persona: {pos: [0.5, 1.3, -1.6], mirar: [0, 1.15, 0.9], fov: 44, a: {pos: [0.4, 1.28, -1.4]}},
+			tele: {pos: [0.7, 1.6, -0.3], mirar: [0, 1.15, -3.2], fov: 42, a: {pos: [0.6, 1.55, -0.6]}},
+			sillon: {pos: [2.6, 1.6, -0.6], mirar: [0, 0.8, 0.9], fov: 42, a: {pos: [2.3, 1.5, -0.4]}},
+			gato: {pos: [2.4, 1.45, -0.5], mirar: [1.2, 0.9, 0.95], fov: 40, a: {pos: [2.25, 1.4, -0.35]}},
+			espalda: {pos: [0.6, 1.9, 3.0], mirar: [0, 1.1, -2.6], fov: 44, a: {pos: [0.5, 1.8, 2.6]}},
+			lampara: {pos: [-1.6, 1.6, 0.4], mirar: [-3.4, 1.4, -2.4], fov: 44},
+			ventana: {pos: [-1.8, 1.7, 1.6], mirar: [-4.38, 1.9, -0.6], fov: 44, a: {pos: [-2.0, 1.7, 1.3]}},
+		},
+		orden: ['general', 'persona', 'espalda', 'tele', 'sillon', 'gato', 'ventana', 'lampara'],
+		ordenFondo: ['general', 'espalda', 'ventana', 'gato', 'lampara', 'sillon'],
+		anclas: {tele: [0, 1.25, -3.2], consola: [0.75, 0.68, -3.05], persona: [0, 1.2, 0.9], sillon: [0, 0.6, 0.9], gato: [1.25, 0.95, 0.95], mesa: [0, 0.45, -1.0], ventana: [-4.38, 1.9, -0.6], lampara: [-3.4, 1.6, -2.4]},
+		persona: {pos: [0, 0.05, 0.88], rot: [0, 180, 0], pose: 'sentado'},
+		Set: SetSala,
+	},
+	arcade: {
+		luz: 'noche',
+		fondo: '#08061A',
+		niebla: [9, 24],
+		post: 'cine',
+		planos: {
+			general: {pos: [3.2, 2.6, 3.6], mirar: [-0.4, 1.3, -2.2], fov: 50, a: {pos: [2.6, 2.4, 3.0]}},
+			persona: {pos: [1.7, 1.6, -2.7], mirar: [0.6, 1.4, -0.95], fov: 44, a: {pos: [1.6, 1.58, -2.55]}},
+			maquina: {pos: [1.3, 1.75, -1.2], mirar: [0.6, 1.35, -3.4], fov: 42, a: {pos: [1.2, 1.7, -1.45]}},
+			pasillo: {pos: [-3.6, 1.6, 2.6], mirar: [-4.0, 1.2, -2.2], fov: 46, a: {pos: [-3.5, 1.6, 2.1]}},
+			neon: {pos: [1.4, 2.4, -1.2], mirar: [2.6, 2.9, -3.88], fov: 42},
+			contrapicado: {pos: [1.8, 0.5, 0.4], mirar: [0.4, 1.3, -3.0], fov: 52},
+			espalda: {pos: [2.3, 1.9, 1.3], mirar: [-0.2, 1.35, -3.4], fov: 46, a: {pos: [2.15, 1.85, 1.0]}},
+		},
+		orden: ['general', 'persona', 'maquina', 'espalda', 'pasillo', 'contrapicado'],
+		ordenFondo: ['general', 'espalda', 'pasillo', 'maquina'],
+		anclas: {maquina: [0.6, 1.42, -3.0], persona: [0.6, 1.6, -0.9], neon: [2.6, 2.9, -3.88], pasillo: [-4.4, 1.4, -0.6]},
+		persona: {pos: [0.6, 0, -0.95], rot: [0, 180, 0], pose: 'parado'},
+		Set: SetArcade,
+	},
+};
+
+export const NOMBRES_AMBIENTES = Object.keys(AMBIENTES) as NombreAmbiente[];
+export const planosDe = (nombre: NombreAmbiente) => Object.keys(AMBIENTES[nombre]?.planos ?? {});
+export const anclaDe = (nombre: NombreAmbiente, ancla: string): V3 | undefined => AMBIENTES[nombre]?.anclas[ancla];
+
+/**
+ * El plano de cada escena: el que dice (nombre o toma propia) o el siguiente de `orden` sin repetir el anterior.
+ * Las escenas con capas 2D al centro (`conCapas[i]`) usan `ordenFondo`: planos abiertos, sin la cara tapando la capa.
+ */
+export function tomasAmbiente(nombre: NombreAmbiente, planos: (string | Toma3D | null | undefined)[], n: number, conCapas: boolean[] = []): Toma3D[] {
+	const def = AMBIENTES[nombre];
+	const out: Toma3D[] = [];
+	const k = {orden: 0, ordenFondo: 0};
+	for (let i = 0; i < n; i++) {
+		const p = planos[i];
+		if (p && typeof p === 'object') out.push(p);
+		else if (typeof p === 'string' && def.planos[p]) out.push(def.planos[p]);
+		else {
+			const lista = conCapas[i] ? 'ordenFondo' : 'orden';
+			let toma = def.planos[def[lista][k[lista]++ % def[lista].length]];
+			// no repetir el mismo plano que la escena anterior
+			if (i > 0 && out[i - 1] === toma) toma = def.planos[def[lista][k[lista]++ % def[lista].length]];
+			out.push(toma);
+		}
+	}
+	return out;
+}
+
+/**
+ * Reacciones de la persona según lo que dice cada escena: pregunta → pensativa, exclamación o cifra → sorpresa,
+ * "felicidades"/"ganaste" → brazos arriba y feliz. `escenas` = [{say}] e `inicios` = segundo en que empieza cada una.
+ */
+export function reaccionesAuto(escenas: {say?: string}[], inicios: number[]): Reaccion[] {
+	const out: Reaccion[] = [];
+	escenas.forEach((e, i) => {
+		const s = (e.say ?? '').toLowerCase();
+		const en = (inicios[i] ?? 0) + 0.3;
+		if (/felicidades|ganaste|lo lograste|victoria|récord|record/.test(s)) out.push({en, expresion: 'feliz', pose: 'brazosArriba'});
+		else if (/[¡!]/.test(s) || /\d/.test(s)) out.push({en, expresion: 'sorpresa'});
+		else if (/[¿?]/.test(s)) out.push({en, expresion: 'pensativo'});
+		else out.push({en, expresion: 'neutral'});
+	});
+	return out;
+}
+
+export type PropsAmbiente = {
+	nombre: NombreAmbiente;
+	t: number;
+	escena?: number;
+	tEscena?: number;
+	inicios?: number[];
+	/** Plano por escena (nombre o toma propia); los que falten se eligen solos. */
+	planos?: (string | Toma3D | null | undefined)[];
+	/** Por escena: ¿lleva capas 2D al centro? (esas usan planos abiertos). */
+	conCapas?: boolean[];
+	/** La persona del set: true, o su ropa/pelo/piel. */
+	persona?: boolean | {ropa?: string; pelo?: string; piel?: string; semilla?: number};
+	reacciones?: Reaccion[];
+	post?: Post3D;
+	/** Etiquetas 3D; `ancla` en vez de `pos` apunta a un objeto del set por nombre ('tele', 'consola'...). */
+	etiquetas?: (Omit<Etiqueta3D, 'pos'> & {pos?: V3; ancla?: string})[];
+	encima?: React.ReactNode;
+	/** El `cuando` del motor: deja usar palabras en `en` de las etiquetas. */
+	cuando?: (en: unknown) => number;
+	children?: React.ReactNode;
+};
+
+/**
+ * Tramos de cámara: cada escena empieza con su plano y, en cada `corte` (segundos dentro de la escena, normalmente la
+ * palabra clave), salta en seco a otro ángulo del mismo set. Así una escena larga no se queda en una sola toma.
+ */
+function tramos(nombre: NombreAmbiente, base: Toma3D[], inicios: number[], cortes: number[][], conCapas: boolean[]) {
+	const def = AMBIENTES[nombre];
+	const out: {ini: number; toma: Toma3D; escena: number}[] = [];
+	base.forEach((toma, i) => {
+		const ini = inicios[i] ?? (out.length ? out[out.length - 1].ini + 3 : 0);
+		out.push({ini, toma, escena: i + 1});
+		const lista = (conCapas[i] ? def.ordenFondo : def.orden).map((n) => def.planos[n]);
+		let j = Math.max(0, lista.indexOf(toma));
+		for (const c of cortes[i] ?? []) {
+			j = (j + 2) % lista.length;
+			if (lista[j] === toma || lista[j] === base[i + 1]) j = (j + 1) % lista.length;
+			out.push({ini: ini + c, toma: {...lista[j], corte: true}, escena: i + 1});
+		}
+	});
+	return out;
+}
+
+/** Un ambiente completo dentro de su propio Lienzo3D (un solo contexto WebGL). `children` va dentro del set. */
+export const Ambiente: React.FC<PropsAmbiente & {cortes?: number[][]}> = ({nombre, t, escena = 1, tEscena = 0, inicios = [0], planos = [], conCapas = [], cortes = [], persona = false, reacciones = [], post, etiquetas = [], encima, cuando, children}) => {
+	const def = AMBIENTES[nombre];
+	if (!def) throw new Error(`No hay un ambiente "${nombre}". Opciones: ${NOMBRES_AMBIENTES.join(', ')}`);
+	const base = tomasAmbiente(nombre, planos, Math.max(inicios.length, escena), conCapas);
+	const tr = tramos(nombre, base, inicios, cortes, conCapas);
+	const T = (inicios[escena - 1] ?? 0) + tEscena;
+	let k = 0;
+	for (let i = 0; i < tr.length; i++) if (tr[i].ini <= T + 1e-6) k = i;
+	const p = typeof persona === 'object' ? persona : {};
+	// etiquetas: su `escena`/`en` son de la escena; se reparten en sus tramos con el tiempo corrido
+	const etq: Etiqueta3D[] = etiquetas.flatMap((e) => {
+		const pos = e.pos ?? (e.ancla ? def.anclas[e.ancla] : undefined);
+		if (!pos) return [];
+		const escenas = e.escena == null ? null : ([] as number[]).concat(e.escena);
+		return tr.flatMap((s, i) => {
+			if (escenas && !escenas.includes(s.escena)) return [];
+			const corrido = s.ini - (inicios[s.escena - 1] ?? 0);
+			return [{...e, pos, escena: i + 1, en: typeof e.en === 'string' ? e.en : Math.max(0, (e.en ?? 0.2) - corrido), hasta: e.hasta != null ? e.hasta - corrido : undefined}];
+		});
+	});
+	const Set = def.Set;
+	return (
+		<Lienzo3D tomas={tr.map((s) => s.toma)} escena={k + 1} tEscena={T - tr[k].ini} inicios={tr.map((s) => s.ini)} luz={def.luz} fondo={def.fondo} niebla={def.niebla} post={post ?? def.post} etiquetas={etq} encima={encima} despejado cuando={cuando}>
+			<Set t={t} />
+			{persona ? (
+				<Persona3D pos={def.persona.pos} rot={def.persona.rot} t={t} pose={def.persona.pose} ropa={p.ropa ?? '#2F6FE0'} pelo={p.pelo} piel={p.piel} semilla={p.semilla ?? 2} estados={reacciones} />
+			) : null}
+			{children}
+		</Lienzo3D>
+	);
+};