Introduction

<FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>

Esta es la documentación para la v2.0.0 en adelante de Tresjs. Si estas buscando la documentación para la version 1, revisa acá V1 TresJs.

::: code-group

npm install three @tresjs/core

yarn add three @tresjs/core

pnpm add three @tresjs/core

:::

Typescript

TresJs esta escrito en Typescript. Si estas usando Typescript, tendrás muchos beneficios para los tipados. Asegúrate de instalar los tipados para Threejs

::: code-group

npm install @types/three -D

yarn add @types/three -D

pnpm add @types/three -D

:::

Vite

Si estas usando Vite, tendrás que añadir la siguiente configuración en vite.config.ts:

import { templateCompilerOptions } from '@tresjs/core'

export default defineConfig({
  plugins: [
    vue({
      // Other config
      ...templateCompilerOptions
    }),
  ],
}),

Esto es necesario para hacer que el compilador funcione con el custom renderer y no arroje advertencias en la consola. para mas información revisa acá.

Prueba Tresjs online

Contamos con un template oficial en StackBlitz:

Playground

Ademas puedes revisar ejemplos de las utilidades, y "como hacer" en nuestro playground. mas info aquí.

Motivation

TresJs es una maravillosa librería que potencia la creación de sitios web en 3D usando WebGL. Se actualiza constantemente, un desafío para los mantenedores de TroisJS

EL ecosistema de React tiene una impresionante librería llamada React-three-fiber que permite construir escenas declarativas, de manera reusable, que reaccionan a tu estado.

En my búsqueda de algo similar en el ecosistema de VueJs, encontré una librería sorprendente llamada Lunchbox la cual funciona bajo el mismo concepto de R3F, posee un custom Vue3 Renderer. También soy un contribuidor de esta librería.

El único problema es mezclar diferentes renderers en Vue 3 es algo que la comunidad de Vue aún esta trabajando. Puedes visitar here para mas información.

// Example Vite setup
import { createApp } from 'vue'
import { createApp as createLunchboxApp } from 'lunchboxjs'
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')

Asi que inspirado por ambas librerías, empecé ~~algo que no necesite un custom renderer pero lo suficientemente inteligente como para generar componentes de Vue basados en los constructores de ThreeJs con 0 o nada necesidad de mantenimiento.~~

Aunque la v1 fue una solución decente, tenia algunas limitaciones que solo pueden ser solventadas creando un custom renderer de manera apropiada. Después de muchas pruebas de concepto, decidimos crear una nueva versión de TresJs que esta basada en un custom renderer, sin afectar de manera significativa al usuario

Para aprender mas acerca de como migrar de la v1 revisa nuestra guía.

Eso es TresJs.

index.md 3.7 KB Permalink Cronologia Originale