Dirección de escena
Cuando se pide "un sitio 3D inmersivo", un modelo construye el promedio de todos los demos 3D que ha visto: un orbe que respira en una noche púrpura, un globo punteado con arcos, un producto gris sobre un suelo gris, o el mismo diseño dividido y ordenado en cada sección. Los sitios que ganan premios hacen algo diferente: una idea del sujeto, un mundo alrededor de su propio objeto, una cámara que cambia de plano con cada latido de la historia, luz con una fuente y un acabado graduado, tipografía con voz, algo con lo que jugar, y el chrome de un sitio real. Y funcionan sin problemas en un teléfono.
Esta habilidad te da una dirección repartida, una biblioteca de activos, un iniciador con el pipeline de acabado completo, y una verificación que renderiza tu página como la ven un visitante y un jurado. Es dueña de la dirección 3D. Si las habilidades de diseño de página (taste-skill, impeccable, hallmark), las habilidades de API de three.js (cloudai-x/threejs-skills) o las habilidades oficiales de GSAP están instaladas, úsalas para esas partes.
<skill> a continuación es la carpeta de esta habilidad. Ejecuta los scripts desde la carpeta del proyecto.
La ejecución
- Inventario. Enumera lo que es real: el nombre del sujeto, qué hace o vende, su lugar, sus números, sus artefactos, y cualquier modelo o imagen proporcionada. Un modelo proporcionado es el héroe (references/object.md).
- Reparte la dirección. Si te dejan solo, elegirás el valor predeterminado de la categoría, así que deja que el script reparta:
node <skill>/scripts/draw.mjs --kind <persona|creador|producto|lugar|marca|evento|...> --brief "<una línea>" node <skill>/scripts/draw.mjs --direction <id elegida> --brief "<una línea>" --scenes <n>.scene-direction/sheet.mden el proyecto: el estado de ánimo, el mundo, la luz, el acabado, los activos a buscar, los suelos, las fuentes, y una colocación de plano y copia para cada escena. Adóptalo. Vuelve a repartir solo por una razón que puedas enunciar, y dilo en el informe. - Idea y cosa viva (references/idea-and-devices.md). En este sitio, [una cosa que pertenece al sujeto] se convierte en [el mundo o dispositivo de la dirección]. Debe fallar la prueba del competidor. Añade la única cosa viva. Lee references/tells.md.
- Obtén los activos (references/assets.md). Ejecuta los comandos
assets.mjsde la hoja: el HDRI, y según la fidelidad de la hoja, los accesorios y superficies para el mundo alrededor del sujeto. Mira las hojas de contactos antes de elegir, luegoobténlos enassets/. - Construye desde
<skill>/assets/starter.html. Es infraestructura, no un diseño: lienzo a sangre completa cuyo fondo es el suelo CSS, la cadena de acabado (HDRI, AO, bloom, viñeta, mapeo de tonos, SMAA),SHOTSpara la cámara, colocación de copia por escena con visillos, un reloj (gsap.ticker + Lenis), revelaciones de línea, una introducción corta, el encabezado, el índice y el pie de página, deriva del puntero, movimiento reducido y pasos de calidad. Completa suFINISHdesde la hoja y eldata-ground,data-shot,data-copyydata-chapterde cada sección. Reemplaza el texto de marcador de posición, el título y la descripción. En Vite o Next.js, trasplanta sus piezas. - Crea el mundo y el objeto (references/object.md, colour-world.md, finish.md). Modela la propia cosa del sujeto según el estándar de object.md, luego colócala en algún lugar: los accesorios y superficies que obtuviste, una habitación, un valle, la colección. Ilumínalo con el equipo de la hoja y una fuente dentro del encuadre.
- Historia, planos y movimiento (references/scenes-and-motion.md, motion-and-type.md). Cada escena obtiene un latido, el plano de la hoja y una declaración en la cara de visualización. Para un lugar, la cámara viaja a través del mundo a lo largo de una ruta (escenas de
path), nunca alrededor de un diorama. Planifica el viaje de la cámara, la versión de teléfono y el movimiento reducido. Viste el chrome en el lenguaje del sujeto (references/chrome.md). - Verifica.
node <skill>/scripts/check.mjs <carpeta-o-url> --out scene-check # añade --click "Enter" para una puerta de introducciónnpm i -D playwright && npx playwright install chromium, en una carpeta temporal si el proyecto no debe tener la dependencia). Graba cada escena en su punto de reposo en escritorio y teléfono (scene-check/film-escritorio.png,film-telefono.png), carga la página de nuevo con movimiento reducido, e informa el tiempo de fotograma, el peso de la página y cuánto tarda la introducción. Lee cada imagen que escribe. - Mira y corrige: los tres principales, hasta tres rondas (references/critique.md). Puntúa la rúbrica a partir de las imágenes, corrige las tres cosas más débiles, verifica y mira de nuevo. Corrige los hallazgos con el cambio más pequeño que mantenga el diseño. Si un hallazgo es deliberado (tipografía en capas, un recorte deliberado, un objeto que se eleva desde abajo del pliegue), mantenlo y nómbralo.
- Informe. Da la dirección, la frase de la idea, la cosa viva, los activos que usaste, el resultado de la verificación, tus puntuaciones, y lo que mantuviste a propósito.
Ambición, no moderación
En pruebas ciegas, un juez prefirió la página rica y atmosférica con un pequeño defecto a la página ordenada y segura sin ninguno, cada vez que hubo una elección entre ellas. Eliminar defectos es la mitad del trabajo. La otra mitad es la sustancia:
- A sangre completa. El 3D es dueño de la pantalla. La copia se asienta sobre ella con un visillo, o junto al objeto mientras el render se aleja de ella.
- Un plano diferente en cada escena. No uses la misma cámara con la copia intercambiada. La verificación marca una página que muestra uno o dos planos a lo largo de todo el scroll.
- Un héroe grande. En la primera pantalla, el objeto o el mundo llena la mayor parte del encuadre, junto al nombre configurado en grande.
- Un mundo, no un objeto en el vacío. La habitación, la mesa, la tierra, la colección, los accesorios que pertenecen al sujeto, a escala real.
- Atmósfera y acabado. Luz con una hora del día y una dirección, una fuente dentro de la escena que brilla, sombras de contacto, un encuadre graduado. Rico, no lechoso: cada encuadre tiene un oscuro verdadero y un color saturado; niebla solo para la distancia en un mundo, nunca sobre el sujeto.
- Tipografía con voz. La cara de visualización de la hoja en tamaños de visualización, con palabras y números reales del inventario, que llegan línea por línea.
- Un sitio, no un demo. Un encabezado, un índice, un pie de página con un contacto real, una introducción de unos 2 segundos.
El suelo: nunca enviar estos
- Un ERROR de la verificación: un cuelgue, un lienzo en blanco, una carga fallida (también con movimiento reducido).
- El sujeto recortado accidentalmente o pequeño en la primera pantalla del teléfono.
- Una declaración que no se puede leer en el punto de reposo de su escena, o tramos del scroll sin palabras.
- Un diseño más ancho que el teléfono.
- Un cursor nativo oculto, un título, descripción o
h1faltantes, o copia de marcador de posición. - Una introducción que mantiene al visitante esperando más de unos segundos, o fotogramas más lentos que 40 fps en la GPU de la verificación.
- Una versión de three.js obsoleta o no coincidente. Usa la versión del proyecto, o las de abajo.
Corrección por etiqueta
- [errores]: corrige el primer error antes que cualquier otra cosa. Las causas comunes son argumentos de constructor intercambiados, un
let/constusado antes de su declaración, URLs de addon en otra versión, una entrada de mapa de importación faltante, 404s, y texturas bloqueadas por CORS. - [encuadre]: encuadra por plano para la relación de aspecto actual (references/framing.md).
- [ambición]: dale a cada escena su propio plano de la hoja (references/scenes-and-motion.md).
- [historia]: fotogramas sin declaración. Mantén las palabras de cada escena en pantalla mientras su escena está en pantalla, y desvanece solo en la transición (el bucle del iniciador hace esto).
- [etiquetas]: texto y etiquetas superpuestos o recortados; barras de herramientas en teléfonos (references/labels.md).
- [legibilidad]: calma la escena detrás del texto o refuerza el visillo antes de mover cualquier cosa (references/legibility.md). Las superficies claras que florecen son demasiado brillantes: baja las luces, no el umbral.
- [usabilidad]: lo básico del jurado: cursor nativo, título, descripción, idioma, un
h1, texto alternativo, movimiento reducido (references/chrome.md). - [rendimiento]: relación de píxeles, tamaño del mapa de sombras, calidad de AO, menos accesorios, texturas más pequeñas (references/finish.md §7).
Versiones fijadas
Verificado en npm y jsDelivr el 2026-11-03 (el mapa de importación del iniciador):
{ "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js",
"n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js",
"gsap": "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
"gsap/": "https://cdn.jsdelivr.net/npm/[email protected]/",
"lenis": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.mjs" }
n8ao importa three/examples/jsm/…, así que mantén esa entrada. postprocessing 6.39 soporta three hasta r187. Notas de r187: PCFSoftShadowMap ha desaparecido (usa PCFShadowMap con shadow.radius); HDRLoader reemplaza a RGBELoader; outputEncoding/sRGBEncoding han desaparecido. GSAP 3.13+ incluye SplitText (gsap/SplitText.js).
Referencias
| Archivo | Léelo cuándo |
|---|---|
| references/idea-and-devices.md | paso 3: la frase de la idea, dispositivos, la cosa viva |
| references/tells.md | paso 3, y de nuevo antes de informar |
| references/assets.md | paso 4: fidelidad, encontrar y colocar accesorios, superficies, presupuesto |
| references/object.md | paso 6: modelos proporcionados (incluyendo variantes de color), el estándar para objetos construidos con código, detalles, materiales |
| references/colour-world.md | paso 6: paleta al fondo, luces y materiales; mapeo de tonos; niebla; grano |
| references/finish.md | paso 6: equipos de luz, el HDRI, sombras de contacto y AO, la cadena de post, rendimiento |
| references/scenes-and-motion.md | paso 7: latidos, el vocabulario de planos, viaje de la cámara, rutas, el teléfono |
| references/motion-and-type.md | paso 7: un reloj, ease y duraciones, revelaciones, la introducción, escala tipográfica, movimiento reducido |
| references/chrome.md | paso 7: encabezado, índice, pie de página, cursor, marcado, sonido |
| references/critique.md | paso 9: la rúbrica y el bucle de mirar y corregir |
| references/framing.md, labels.md, legibility.md | corregir un hallazgo con esa etiqueta |
| references/example-furkanboran.md | para ver el estándar: un sitio real desmontado |
| library/directions.json | las doce direcciones que el script reparte |
Créditos
Las direcciones repartidas, la frase de la idea, la prueba del competidor, "una cosa viva", el bucle de mirar y corregir y la advertencia de que la moderación por sí sola parece delgada están adaptados de taste-skill (MIT). La firma y la rotación de direcciones provienen de hallmark (MIT), el modo Experiencia de impeccable (Apache-2.0), y el vocabulario de arquetipos de awwwards-3d (MIT). Los modelos, texturas y HDRIs provienen de Poly Haven (CC0). El ejemplo trabajado, y los patrones adaptados del mismo, son de furkanboran.info por Furkan Boran. Ver README.md.