Un recorrido en barco 3D por un valle fluvial japonés, en el navegador y renderizado en tiempo real con three.js, durante las cuatro estaciones y a cualquier hora del día.
935JavaScriptOtherActualizado ayer
lhlGitHub/threejs-architecture-effects
Una Agent Skill que permite a Codex, Claude Code o Cursor generar una escena arquitectónica en Three.js que se puede recorrer en órbita y se construye ladrillo a ladrillo.
- Estrellas
- 587
- Forks
- 69
- Issues abiertos
- 0
- Último commit
- hace 28 días
¿Qué es?
Este proyecto es una Agent Skill que guía a un agente de programación con IA para crear un edificio interactivo de estilo chino en 3D con Three.js. El resultado es un sitio ejecutable con Vite + React + Three.js, donde una maqueta sólida se ensambla a lo largo de una única línea de tiempo de 0 a 1, que permite reproducir, pausar, retroceder y volver a ver la construcción. Incluye hiladas de ladrillos, estructura de madera, ménsulas dougong, aleros superpuestos y tejas de arcilla.
Los materiales, como ladrillo, madera, yeso, teja, piedra y bronce, se generan de forma procedimental en lugar de cargarse desde modelos de pago. Incluye controles para orbitar y ampliar la vista, además de cámaras de detalle para los aleros y los leones de piedra. Un script de scaffolding copia el starter incluido en un directorio nuevo sin sobrescribir archivos existentes, y el starter se ejecuta con npm ci y npm run dev en un navegador compatible con WebGL2.
La torre del reloj incluida es un ejemplo, no una reconstrucción histórica. La skill también está pensada para otros diseños, como un pabellón de dos pisos, y no incluye exportación de video.
Funciones clave
- 01Genera un edificio sólido en Three.js que se puede recorrer en órbita, en lugar de un video plano
- 02La construcción se controla con una única línea de tiempo de 0 a 1, compatible con reproducir, pausar, avanzar o retroceder por la secuencia y volver a reproducir
- 03Materiales PBR procedimentales para ladrillo, madera, yeso, teja, piedra y bronce
- 04Cámaras de detalle para primeros planos de los aleros y los leones de piedra
- 05Un script de scaffolding copia un starter de Vite + React sin sobrescribir directorios existentes
Casos de uso
- Indicar a un agente de programación con IA que cree una escena en Three.js de un pabellón o edificio chino
- Crear una muestra arquitectónica interactiva con una animación de construcción piso por piso
- Adaptar la plantilla starter a otro diseño, como un pabellón junto a un lago
Inicio rápido
- 1
Clona el repositorio
git clone https://github.com/lhlGitHub/threejs-architecture-effects.git - 2
Crea un proyecto nuevo a partir del starter
node threejs-architecture-effects/scripts/scaffold.mjs ./my-building - 3
Instala las dependencias e inicia el servidor de desarrollo
npm ci && npm run dev
Antes de usarlo
- Requiere Node.js 22.13 o posterior y un navegador compatible con WebGL2.
- Está orientado a equipos de escritorio; el README no afirma que funcione con fluidez en todos los dispositivos.
- No incluye exportación de vídeo; el resultado es un sitio interactivo.
Temas
Preguntas frecuentes
- ¿Qué es threejs-architecture-effects?
- Una Agent Skill que permite a Codex, Claude Code o Cursor generar una escena arquitectónica en Three.js que se puede recorrer en órbita y se construye ladrillo a ladrillo. Este proyecto es una Agent Skill que guía a un agente de programación con IA para crear un edificio interactivo de estilo chino en 3D con Three.js. El resultado es un sitio ejecutable con Vite + React + Three.js, donde una maqueta sólida se ensambla a lo largo de una única línea de tiempo de 0 a 1, que permite reproducir, pausar, retroceder y volver a ver la construcción. Incluye hiladas de ladrillos, estructura de madera, ménsulas dougong, aleros superpuestos y tejas de arcilla.
- ¿threejs-architecture-effects es gratuito? ¿Qué licencia tiene?
- threejs-architecture-effects es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿threejs-architecture-effects sigue mantenido?
- Mantenimiento activo. El último commit de threejs-architecture-effects fue el 22 sept 2026.
- ¿Para qué puedo usar threejs-architecture-effects?
- Indicar a un agente de programación con IA que cree una escena en Three.js de un pabellón o edificio chino Crear una muestra arquitectónica interactiva con una animación de construcción piso por piso Adaptar la plantilla starter a otro diseño, como un pabellón junto a un lago
- ¿Cómo se instala threejs-architecture-effects?
- Clona el repositorio: git clone https://github.com/lhlGitHub/threejs-architecture-effects.git Crea un proyecto nuevo a partir del starter: node threejs-architecture-effects/scripts/scaffold.mjs ./my-building Instala las dependencias e inicia el servidor de desarrollo: npm ci && npm run dev
- ¿Dónde consigo threejs-architecture-effects?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/lhlGitHub/threejs-architecture-effects
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Colección de componentes helper y hooks listos para usar en React para crear escenas 3D con react-three-fiber.
10 mil853JavaScriptMITActualizado ayer
Catálogo de código abierto y sin inicio de sesión de componentes interactivos de UI para Three.js/WebGL, con renderizadores en vivo y el código fuente completo de React.
6,7 mil628HTMLMITActualizado hace 2 meses
Un wrapper de React para la biblioteca postprocessing que permite aplicar efectos de posprocesamiento declarativamente como componentes JSX en escenas de react-three-fiber.
1,4 mil141TypeScriptMITActualizado ayer
Reconstruye un objeto a partir de una imagen de referencia como código TypeScript procedural de Three.js, listo para animar, en lugar de un archivo de malla.
18,4 mil1,7 milPythonApache-2.0Actualizado hace 3 días
Guía de campo interactiva en 3D sobre 63 especies de insectos, modeladas de forma procedural en el navegador con TypeScript y Three.js, sin archivos de modelos.
79373TypeScriptMITActualizado hace 3 días