index.md 2.7 KB
Introduccion
<div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
<FirstScene />
</div>
Typescript
TresJS está escrito en Typescript y está completamente tipado. Si estás utilizando Typescript, obtendrás todos los beneficios de los tipos. Solo asegúrate de instalar los tipos para three.
Vite
Si estás utilizando Vite, debes agregar lo siguiente a tu vite.config.ts:
Esto es necesario para que el compilador de plantillas funcione con el renderizador personalizado y no lance advertencias en la consola. Para obtener más información, consulta aquí.
Pruébalo en línea
Sandbox
Puedes probar TresJS en línea utilizando el sandbox oficial. ¡Échale un vistazo:
StackBlitz
Tenemos un nuevo inicio de StackBlitz para probar TresJS en línea. ¡Échale un vistazo:
Playground
También tenemos un playground donde puedes probar TresJS en línea. Échale un vistazo aquí.
Motivación
ThreeJS es una maravillosa biblioteca para crear increíbles sitios web 3D con WebGL. También es una biblioteca constantemente actualizada que dificulta a los mantenedores de envoltorios como TroisJS mantenerse al día con todas las mejoras.
El ecosistema de React tiene una solución impresionante de renderizado personalizado llamada React-three-fiber que te permite construir tus escenas de forma declarativa con componentes reutilizables y autocontenidos que reaccionan al estado.
En mi búsqueda de algo similar en el ecosistema de VueJS, encontré esta increíble biblioteca llamada Lunchbox que funciona con el mismo concepto que R3F, proporciona un renderizador personalizado de Vue3. También estoy contribuyendo para mejorar esta biblioteca y que sea tan madura y rica en características como R3F.
El único problema es que mezclar compiladores y renderizadores en Vue 3 es algo en lo que la comunidad de Vue todavía está trabajando. Puedes ver más información aquí.
Así que me inspiré en ambas bibliotecas para crear un renderizador personalizado de Vue para ThreeJS. Eso es TresJS v2.