Tresjs/docs/es/guide/index.md

Introducción

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

::: code-group

npm install three @tresjs/core -D

yarn add three @tresjs/core -D

pnpm add three @tresjs/core -D

:::

Prueba sin instalaciones

Puedes hacer fork a este template en StackBlitz y jugar con el 😋 sin instalar nada.

Motivación

ThreeJS 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 mi búsqueda de algo similar en el ecosistema de VueJs, encontré una librería 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.

Hasta entonces hay una solución similar a React Reconciliation necesitarías crear 2 Apps puede no ser lo ideal

// 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.

Eso es TresJs.