- Threlte es un framework open source que monta el modelo de componentes reactivos de Svelte sobre Three.js para crear rápidamente apps 3D interactivas en la web
- Permite componer objetos de Three.js con componentes declarativos como
<T.Mesh>y manejar suscripciones a eventos y cambios de estado mediante el ciclo de vida de Svelte - Incluye como herramientas base el motor de física Rapier, la herramienta de animación Theatre.js,
@threlte/gltfy@threlte/extras, lo que reduce la configuración inicial de una app 3D - Los comportamientos que no se cubren solo con el componente
<T>se pueden extender con Plugins con seguridad de tipos para agregar props y eventos personalizados - Dentro del ecosistema de Svelte, se valora por su documentación y facilidad de uso para desarrolladores que buscan una librería THREE declarativa y herramientas para crear apps WebGL
Construcción de escenas de Three.js al estilo Svelte
- Threlte es un framework 3D para la web construido sobre Svelte y Three.js
- Se enfoca en construir rápidamente apps 3D interactivas con componentes declarativos y reactivos
- Aprovecha el ciclo de vida de los componentes de Svelte para manejar las siguientes tareas
- suscripción a eventos
- manejo de cambios de estado
- conexión de comportamientos basados en componentes
- El código de ejemplo coloca geometría y material dentro de
<T.Mesh>y asigna directamente props y eventos comoscale,position.xyonclick - La primera escena se puede revisar en Make Your First Scene
Herramientas incluidas y formas de extensión
- Threlte promueve un enfoque “batteries included” y ofrece junto con el framework las herramientas necesarias para crear apps 3D
- Rapier: motor de física
- Theatre.js: librería de animación con un conjunto de herramientas profesional para motion design
@threlte/gltf: herramienta para convertir archivos GLTF en componentes de Threlte@threlte/extras: colección de componentes y utilidades para empezar
- El ejemplo de Rapier combina
RigidBody,AutoCollidersy<T.Mesh>para construir un collider esférico y el mesh - El ejemplo de
@threlte/extrasusa los componentesFloatyGLTFpara cargar el modelo/models/flower.glby definir sombras, posición y escala - El uso de
@threlte/extrasse puede consultar en Documentation - Plugins es la forma de extensión para agregar props y eventos personalizados a
<T>con seguridad de tipos- El plugin de ejemplo registra la prop
lookAtconinjectPluginy dentro de$effectllama aargs.ref.lookAt(args.props.lookAt) - El uso avanzado está organizado en la documentación de Plugins
- El plugin de ejemplo registra la prop
- También se ofrecen documentos para comenzar y enlaces a la comunidad
1 comentarios
Opiniones en Hacker News
En esencia, estamos haciendo dos cosas. Una es la compatibilidad con Svelte 5. Threlte tocó bastante las partes internas de los componentes para hacer más eficiente el manejo de eventos o para aplicar transiciones de Svelte a componentes en vez de elementos del DOM, así que implica algo más de trabajo que para una biblioteca normal de Svelte. Muchas de esas cosas ya vienen integradas en Svelte 5, y otras, como las transiciones, tendremos que dejarlas de lado por un tiempo.
La otra es Threlte Studio. Todavía no sé bien cuál es la mejor forma de describirlo, pero podría decirse que es un editor que permite modificar el código visualmente. Es extensible, así que se puede adaptar al flujo de trabajo de cada quien, y tengo curiosidad por ver hasta dónde puede llegar. Si les interesa, pueden seguirnos en Discord http://chat.threlte.xyz o en X https://twitter.com/threlte
Svelte me pareció realmente intuitivo, así que naturalmente pensé que también podría gestionar un entorno 3D de manera eficiente, y por eso terminé buscando “Svelte + three.js”.
Como alguien que ha usado PlayCanvas y Babylon.js, tengo muchas expectativas por el desarrollo de Threlte Studio. Me gusta que DREI despliegue todo como si fuera un directorio, pero me hizo pensar en las “herramientas de estudio” familiares. Me pregunto cuál será el calendario estimado para Threlte Studio.
Uno que me gusta especialmente es el ejemplo de la galería de imágenes. Lo modifiqué para que al hacer clic en una imagen se entre a otra sala, es decir, a otra galería.
https://github.com/pmndrs/drei es una colección de ejemplos y helpers.
Lo que más me impresionó fue un ejemplo que usa modelos GLTF, texturas de video sobre texto, reflejos, etc.; la versión independiente está en https://bfplr.csb.app/
Más impresionante aún es el sandbox que muestra que no hay tanto código: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
Poner una capa encima de three.js requiere mucho trabajo y también me dio bastantes dolores de cabeza, pero aun así el potencial es enorme. Usar three.js cambió por completo la forma en que veo el desarrollo de sitios web, y si usas Svelte, definitivamente vale la pena echarle un vistazo.
El Technical Outline, en particular la explicación simplificada de física de autos, es bastante instructivo. En esencia, es un clon de Trackmania que incluso incluye un editor de pistas, y parece un ejemplo que aprovecha al máximo las ventajas de Svelte/Threlte.
Me pregunto si la gente realmente quiere 3D declarativo. X3D/VRML existen desde hace más de 25 años y A-Frame tiene 8 años, pero ninguno de los dos se volvió muy popular; también hubo otros formatos que aparecieron y desaparecieron. En cambio, three.js y el 3D imperativo/procedural en general están funcionando bien, y me pregunto por qué.
No está súper optimizado y todos los modelos son modelos gratuitos de Sketchfab. Es un entorno de juego 3D, así que ayuda tener una PC moderna.
Creo que muchas interfaces de usuario podrían beneficiarse del uso de 3D.