Introduccion
npm install @tresjs/core three
yarn add @tresjs/core three
pnpm add @tresjs/core three
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.
npm install @types/three -D
yarn add @types/three -D
pnpm add @types/three -D
Vite
Si estás utilizando Vite, debes agregar lo siguiente a tu vite.config.ts
:
import { templateCompilerOptions } from '@tresjs/core'
export default defineConfig({
plugins: [
vue({
// Other config
...templateCompilerOptions
}),
],
})
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
Playground
Puedes probar TresJS en línea utilizando el playground oficial. ¡Échale un vistazo:
StackBlitz
Tenemos un nuevo inicio de StackBlitz para probar TresJS en línea. ¡Échale un vistazo:
Laboratorio
También tenemos un laboratorio de ejemplos hechos con TresJS. É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í.
// Example Vite setup
import { createApp as createLunchboxApp } from 'lunchboxjs'
import { createApp } from 'vue'
import App from './App.vue'
import LunchboxApp from './LunchboxApp.vue'
// html app
const app = createApp(App)
app.mount('#app')
// lunchbox app
const lunchboxApp = createLunchboxApp(LunchboxApp)
// assuming there's an element with ID `lunchbox` in your HTML app
lunchboxApp.mount('#lunchbox')
Así que me inspiré en ambas bibliotecas para crear un renderizador personalizado de Vue para ThreeJS. Eso es TresJS v2.