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.
58769TypeScriptMITActualizado hace 29 días
billpwchan/sakura-fantasy
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.
- Estrellas
- 98
- Forks
- 6
- Issues abiertos
- 1
- Último commit
- ayer
¿Qué es?
Sakura Fantasy es una escena interactiva en tiempo real en la que recorres un valle japonés a bordo de un barco fluvial con techo de paja. La ruta pasa por avenidas de cerezos, un puente tambor bermellón, una aldea bajo una pagoda de cinco pisos, un desfiladero de bambú, un túnel de puertas torii y un lago. La vegetación se crea a partir de escaneos fotogramétricos de plantas japonesas reales, y la iluminación sigue el recorrido del sol durante el día, con cinco estados meteorológicos: despejado, neblina, lluvia, tormenta y nieve.
La banda sonora se genera a medida que avanzas, con koto, shakuhachi y shō en modos japoneses, mezclados con grabaciones de campo de campanas de templos y sonidos de jardines de Kioto, ubicados según el lugar, la estación y la hora. El código contiene unas 10.000 líneas de JavaScript sin procesar sobre three.js, sin motor de videojuegos ni framework. Los visitantes pueden dirigir el barco, cambiar la estación, la hora y el clima, alternar entre modos de cámara y exportar fotos; los parámetros de URL permiten abrir cualquier escena directamente.
El proyecto incluye un paso de compilación que genera un sitio estático y los recursos están incluidos en el repositorio.
Funciones clave
- 01Valle procedural con plantas basadas en fotogrametría y cambios estacionales.
- 02Sol, cielo y niebla dinámicos, con cinco estados meteorológicos.
- 03Reflejos en el agua, estelas, espuma y pétalos renderizados en tiempo real.
- 04Banda sonora generativa en vivo con instrumentos japoneses y grabaciones ubicadas según el lugar.
- 05Controles de teclado, varios modos de cámara y modo de fotografía PNG.
- 06Parámetros de URL para ir directamente a cualquier estación, hora, estado meteorológico o posición.
Casos de uso
- Estudiar técnicas de renderizado WebGL en tiempo real con three.js.
- Explorar la generación procedural de mundos y la carga progresiva de nivel de detalle en el navegador.
- Usarlo como referencia para generar audio con la Web Audio API.
- Disfrutar de una escena 3D interactiva y ambiental como experiencia independiente.
Inicio rápido
- 1
Clona el repositorio
git clone https://github.com/billpwchan/sakura-fantasy.git - 2
Entra en la carpeta del proyecto
cd sakura-fantasy - 3
Instala las dependencias
npm install - 4
Inicia el servidor de desarrollo y abre http://127.0.0.1:5190
npm run dev
Antes de usarlo
- El campo de licencia figura como NOASSERTION. El README indica que el código es MIT y que las licencias de los recursos se detallan por separado en CREDITS.md; consulta esas condiciones antes de reutilizarlos.
- En teléfonos y tabletas se ofrece una versión quick tier reducida. Las cifras de rendimiento del README se obtuvieron con un Apple M4 Max de gama alta.
Temas
Preguntas frecuentes
- ¿Qué es sakura-fantasy?
- 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. Sakura Fantasy es una escena interactiva en tiempo real en la que recorres un valle japonés a bordo de un barco fluvial con techo de paja. La ruta pasa por avenidas de cerezos, un puente tambor bermellón, una aldea bajo una pagoda de cinco pisos, un desfiladero de bambú, un túnel de puertas torii y un lago. La vegetación se crea a partir de escaneos fotogramétricos de plantas japonesas reales, y la iluminación sigue el recorrido del sol durante el día, con cinco estados meteorológicos: despejado, neblina, lluvia, tormenta y nieve.
- ¿sakura-fantasy es gratuito? ¿Qué licencia tiene?
- sakura-fantasy es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿sakura-fantasy sigue mantenido?
- Mantenimiento activo. El último commit de sakura-fantasy fue el 19 oct 2026.
- ¿Para qué puedo usar sakura-fantasy?
- Estudiar técnicas de renderizado WebGL en tiempo real con three.js. Explorar la generación procedural de mundos y la carga progresiva de nivel de detalle en el navegador. Usarlo como referencia para generar audio con la Web Audio API. Disfrutar de una escena 3D interactiva y ambiental como experiencia independiente.
- ¿Cómo se instala sakura-fantasy?
- Clona el repositorio: git clone https://github.com/billpwchan/sakura-fantasy.git Entra en la carpeta del proyecto: cd sakura-fantasy Instala las dependencias: npm install Inicia el servidor de desarrollo y abre http://127.0.0.1:5190: npm run dev
- ¿Dónde consigo sakura-fantasy?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/billpwchan/sakura-fantasy
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
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
Colección de componentes helper y hooks listos para usar en React para crear escenas 3D con react-three-fiber.
10 mil853JavaScriptMITActualizado anteayer
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