morfeo 0.3.0 → 0.3.3

package/remotion/kit/mundo3d.tsx

@@ -0,0 +1,251 @@
+// Más piezas 3D para `Lienzo3D` (kit/tres.tsx): personas low-poly con cara y expresiones (Persona3D), ciudad, cuarto y camino.
+// `Persona` (kit/diorama.tsx) es la figura de maqueta (casco, chaleco); `Persona3D` es la de historias, con expresiones.
+// Mismo estilo que Arbol/Casa: geometría facetada y materiales mate. Todo depende de props y de `t`.
+//
+//   <Persona3D pos={[0, 0, 2]} t={t} ropa="#2F6FE0" expresion="sorpresa" pose="señalar" />
+//   <Ciudad t={t} noche />   <Cuarto3D />   <Camino largo={30} />   (el coche es `Coche` de kit/diorama.tsx)
+import React from 'react';
+import * as THREE from 'three';
+import {azarN} from './ilustrado';
+import type {Expresion, Pose} from './personas';
+import {grupo, type Pieza, type V3} from './tres';
+
+const Mate: React.FC<{c: string; r?: number; m?: number; e?: number}> = ({c, r = 0.8, m = 0, e = 0}) => (
+	<meshStandardMaterial color={c} roughness={r} metalness={m} emissive={e ? c : '#000000'} emissiveIntensity={e} flatShading />
+);
+
+/** Ángulos (grados) de brazos y piernas por pose; los brazos rotan en el plano del cuerpo (z) y hacia adelante (x). */
+function pose3d(pose: Pose, t: number, fase: number) {
+	switch (pose) {
+		case 'caminar': {
+			const p = Math.sin(t * 7 + fase);
+			return {bi: [p * 30, 8], bd: [-p * 30, 8], pi: -p * 28, pd: p * 28, sube: Math.abs(Math.cos(t * 7 + fase)) * 0.05};
+		}
+		case 'señalar':
+			return {bi: [0, 6], bd: [-80, 10], pi: 0, pd: 0, sube: 0};
+		case 'brazosArriba':
+			return {bi: [0, 160 + Math.sin(t * 6 + fase) * 10], bd: [0, 160 + Math.sin(t * 6 + fase + 1) * 10], pi: 0, pd: 0, sube: Math.abs(Math.sin(t * 6 + fase)) * 0.06};
+		case 'pensar':
+			return {bi: [-40, 12], bd: [-110, 20], pi: 0, pd: 0, sube: 0};
+		case 'cruzado':
+			return {bi: [-75, 35], bd: [-75, 35], pi: 0, pd: 0, sube: 0};
+		case 'sentado':
+			return {bi: [-45, 10], bd: [-45, 10], pi: -85, pd: -85, sube: -0.38};
+		default:
+			return {bi: [Math.sin(t * 1.5 + fase) * 3, 6], bd: [-Math.sin(t * 1.5 + fase) * 3, 6], pi: 0, pd: 0, sube: 0};
+	}
+}
+
+/**
+ * Persona low-poly de ~1.8 unidades de alto (pies en y = 0). Cara con ojos y boca según `expresion`;
+ * `habla` = intervalos [inicio, fin] en segundos en que mueve la boca.
+ */
+export const Persona3D: React.FC<
+	Pieza & {
+		t?: number;
+		piel?: string;
+		pelo?: string;
+		ropa?: string;
+		pantalon?: string;
+		expresion?: Expresion;
+		pose?: Pose;
+		estados?: {en: number; expresion?: Expresion; pose?: Pose}[];
+		habla?: [number, number][];
+		semilla?: number;
+		cabezaGrande?: boolean;
+	}
+> = ({t = 0, piel = '#E8B48F', pelo = '#2B1B12', ropa = '#2F6FE0', pantalon = '#2E3A59', expresion: e0 = 'neutral', pose: p0 = 'parado', estados = [], habla = [], semilla = 0, cabezaGrande = true, ...p}) => {
+	let expresion = e0;
+	let pose = p0;
+	for (const e of [...estados].sort((a, b) => a.en - b.en))
+		if (t >= e.en) {
+			if (e.expresion) expresion = e.expresion;
+			if (e.pose) pose = e.pose;
+		}
+	const fase = azarN(semilla + 5) * 6.28;
+	const P = pose3d(pose, t, fase);
+	const R = Math.PI / 180;
+	const hc = cabezaGrande ? 0.36 : 0.26; // radio de la cabeza
+	const parpadea = (t + azarN(semilla) * 3) % 3.4 < 0.12 || expresion === 'dormido';
+	const hablando = habla.some(([a, b]) => t >= a && t <= b);
+	const boca = hablando ? 0.03 + 0.05 * Math.abs(Math.sin(t * 13)) : expresion === 'sorpresa' || expresion === 'miedo' ? 0.06 : 0.018;
+	const ancho = expresion === 'feliz' ? 0.13 : expresion === 'triste' || expresion === 'enojado' ? 0.09 : 0.08;
+	const curva = expresion === 'feliz' ? -0.02 : expresion === 'triste' ? 0.02 : 0;
+	const ceja = expresion === 'enojado' ? 0.35 : expresion === 'triste' || expresion === 'miedo' ? -0.35 : 0;
+	const brazo = (lado: 1 | -1, [adelante, afuera]: number[]) => (
+		<group position={[lado * 0.27, 1.12, 0]} rotation={[adelante * R, 0, lado * afuera * R]}>
+			<mesh position={[0, -0.27, 0]} castShadow>
+				<capsuleGeometry args={[0.075, 0.42, 4, 8]} />
+				<Mate c={ropa} />
+			</mesh>
+			<mesh position={[0, -0.55, 0]} castShadow>
+				<sphereGeometry args={[0.08, 10, 8]} />
+				<Mate c={piel} />
+			</mesh>
+		</group>
+	);
+	const pierna = (lado: 1 | -1, ang: number) => (
+		<group position={[lado * 0.11, 0.62, 0]} rotation={[ang * R, 0, 0]}>
+			<mesh position={[0, -0.3, 0]} castShadow>
+				<capsuleGeometry args={[0.09, 0.44, 4, 8]} />
+				<Mate c={pantalon} />
+			</mesh>
+			<mesh position={[0, -0.6, 0.06]} castShadow>
+				<boxGeometry args={[0.16, 0.08, 0.26]} />
+				<Mate c="#2A2420" />
+			</mesh>
+		</group>
+	);
+	return (
+		<group {...grupo(p)}>
+			<group position={[0, P.sube, 0]}>
+				{pierna(-1, P.pi)}
+				{pierna(1, P.pd)}
+				<mesh position={[0, 0.92, 0]} castShadow>
+					<capsuleGeometry args={[0.24, 0.4, 4, 10]} />
+					<Mate c={ropa} />
+				</mesh>
+				{brazo(-1, P.bi)}
+				{brazo(1, P.bd)}
+				<group position={[0, 1.38 + hc * 0.75, 0]} rotation={[0, Math.sin(t * 0.9 + fase) * 0.12, pose === 'pensar' ? -0.12 : 0]}>
+					<mesh castShadow>
+						<icosahedronGeometry args={[hc, 1]} />
+						<Mate c={piel} />
+					</mesh>
+					{/* pelo: casquete encima */}
+					<mesh position={[0, hc * 0.28, -hc * 0.06]} scale={[1.04, 0.72, 1.04]} castShadow>
+						<icosahedronGeometry args={[hc, 1]} />
+						<Mate c={pelo} />
+					</mesh>
+					{/* ojos */}
+					{[-1, 1].map((l) => (
+						<group key={l} position={[l * hc * 0.36, hc * 0.08, hc * 0.9]}>
+							{parpadea ? (
+								<mesh scale={[1, 0.18, 0.4]}>
+									<sphereGeometry args={[hc * 0.16, 10, 8]} />
+									<Mate c="#1E1410" />
+								</mesh>
+							) : (
+								<>
+									<mesh scale={[1, 1.15, 0.45]}>
+										<sphereGeometry args={[hc * 0.19, 12, 10]} />
+										<Mate c="#FFFFFF" r={0.4} />
+									</mesh>
+									<mesh position={[0, -hc * 0.01, hc * 0.07]} scale={[1, 1, 0.5]}>
+										<sphereGeometry args={[hc * (expresion === 'sorpresa' || expresion === 'miedo' ? 0.07 : 0.1), 10, 8]} />
+										<Mate c="#1E1410" r={0.3} />
+									</mesh>
+								</>
+							)}
+							<mesh position={[0, hc * 0.27, hc * 0.03]} rotation={[0, 0, -l * ceja]}>
+								<boxGeometry args={[hc * 0.32, hc * 0.06, hc * 0.06]} />
+								<Mate c={pelo} />
+							</mesh>
+						</group>
+					))}
+					{/* boca */}
+					<mesh position={[0, -hc * 0.38 + curva, hc * 0.92]} rotation={[0, 0, 0]}>
+						<boxGeometry args={[ancho * (hc / 0.36), boca * (hc / 0.36) * 1.4, 0.03]} />
+						<Mate c="#5A1E1E" />
+					</mesh>
+				</group>
+			</group>
+		</group>
+	);
+};
+
+/** Ciudad: manzanas de edificios con ventanas (encendidas de noche), en una cuadrícula alrededor del centro. */
+export const Ciudad: React.FC<Pieza & {t?: number; noche?: boolean; filas?: number; columnas?: number; separacion?: number; semilla?: number; hueco?: number}> = ({t = 0, noche = false, filas = 4, columnas = 6, separacion = 4.2, semilla = 0, hueco = 1, ...p}) => {
+	const colores = noche ? ['#2A2F55', '#323A66', '#262B4A'] : ['#E8DCC8', '#CFD8E3', '#F2E6D0', '#D9C7B0'];
+	return (
+		<group {...grupo(p)}>
+			{Array.from({length: filas * columnas}, (_, i) => {
+				const f = Math.floor(i / columnas);
+				const c = i % columnas;
+				// deja libre la calle del centro (columna central) para la acción
+				if (Math.abs(c - (columnas - 1) / 2) < hueco * 0.5) return null;
+				const s = semilla + i * 7;
+				const alto = 2 + azarN(s) * 6;
+				const w = 2.2 + azarN(s + 1) * 1.2;
+				const x = (c - (columnas - 1) / 2) * separacion;
+				const z = -f * separacion - 2;
+				const luz = noche ? 0.5 + 0.5 * Math.sin(t * 0.4 + i) : 0;
+				return (
+					<group key={i} position={[x, 0, z]}>
+						<mesh position={[0, alto / 2, 0]} castShadow receiveShadow>
+							<boxGeometry args={[w, alto, w]} />
+							<Mate c={colores[i % colores.length]} />
+						</mesh>
+						{Array.from({length: Math.floor(alto / 0.7)}, (_, k) => (
+							<mesh key={k} position={[0, 0.5 + k * 0.7, w / 2 + 0.01]}>
+								<boxGeometry args={[w * 0.75, 0.28, 0.02]} />
+								<Mate c={noche ? (azarN(s + k) > 0.45 ? '#FFD27A' : '#1A1E36') : '#8EC5E8'} e={noche && azarN(s + k) > 0.45 ? 0.6 + luz * 0.3 : 0} r={0.3} />
+							</mesh>
+						))}
+					</group>
+				);
+			})}
+			<mesh position={[0, 0, -filas * separacion * 0.5]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+				<planeGeometry args={[columnas * separacion + 20, filas * separacion + 30]} />
+				<Mate c={noche ? '#1E2030' : '#9AA0A8'} />
+			</mesh>
+		</group>
+	);
+};
+
+/** Calle recta a lo largo de z, con líneas pintadas y banquetas. */
+export const Camino: React.FC<Pieza & {largo?: number; ancho?: number; color?: string}> = ({largo = 30, ancho = 4, color = '#3E4250', ...p}) => (
+	<group {...grupo(p)}>
+		<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, -largo / 2 + 4]} receiveShadow>
+			<planeGeometry args={[ancho, largo]} />
+			<Mate c={color} />
+		</mesh>
+		{Array.from({length: Math.floor(largo / 2.2)}, (_, i) => (
+			<mesh key={i} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.02, 3 - i * 2.2]}>
+				<planeGeometry args={[0.14, 1.1]} />
+				<Mate c="#F2D04A" />
+			</mesh>
+		))}
+		{[-1, 1].map((l) => (
+			<mesh key={l} position={[l * (ancho / 2 + 0.5), 0.08, -largo / 2 + 4]} receiveShadow castShadow>
+				<boxGeometry args={[1, 0.16, largo]} />
+				<Mate c="#C9C4BA" />
+			</mesh>
+		))}
+	</group>
+);
+
+/** Cuarto (interior abierto hacia la cámara): piso, dos paredes, ventana y lámpara de techo. */
+export const Cuarto3D: React.FC<Pieza & {ancho?: number; fondo?: number; alto?: number; pared?: string; piso?: string; noche?: boolean}> = ({ancho = 10, fondo = 8, alto = 4.5, pared = '#2E5A4C', piso = '#7A4A2A', noche = true, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+			<planeGeometry args={[ancho, fondo]} />
+			<Mate c={piso} />
+		</mesh>
+		<mesh position={[0, alto / 2, -fondo / 2]} receiveShadow>
+			<boxGeometry args={[ancho, alto, 0.2]} />
+			<Mate c={pared} />
+		</mesh>
+		<mesh position={[-ancho / 2, alto / 2, 0]} receiveShadow>
+			<boxGeometry args={[0.2, alto, fondo]} />
+			<Mate c={new THREE.Color(pared).multiplyScalar(0.85).getStyle()} />
+		</mesh>
+		<group position={[ancho * 0.2, alto * 0.55, -fondo / 2 + 0.12]}>
+			<mesh>
+				<boxGeometry args={[1.8, 1.5, 0.05]} />
+				<Mate c="#E9E1D2" />
+			</mesh>
+			<mesh position={[0, 0, 0.03]}>
+				<boxGeometry args={[1.6, 1.3, 0.02]} />
+				<Mate c={noche ? '#1A2350' : '#9FD4F5'} e={noche ? 0.1 : 0.3} />
+			</mesh>
+		</group>
+		<mesh position={[0, alto - 0.1, 0]}>
+			<cylinderGeometry args={[0.35, 0.5, 0.25, 16]} />
+			<Mate c="#F2D49B" e={0.5} />
+		</mesh>
+		<pointLight position={[0, alto - 0.5, 0]} intensity={noche ? 6 : 2} distance={12} color="#FFD9A0" castShadow />
+	</group>
+);
+
+export type {V3};