Introduccion

npm

npm install @tresjs/core three

yarn

yarn add @tresjs/core three

pnpm

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

npm install @types/three -D

yarn

yarn add @types/three -D

pnpm

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.