Tresjs/docs/es/guide/getting-started.md

Instalación

Aprende como instalar TresJs

::: code-group

pnpm add three @tresjs/core

npm install three @tresjs/core

yarn add three @tresjs/core

:::

Recomendado para usar con Vue 3.x y composition API

Typescript

TresJs esta escrito en Typescript. Si estas usando Typescript, tendrás muchos beneficios para los tipados. No olvides de instalar los tipos para Threejs

::: code-group

npm install @types/three -D

yarn add @types/three -D

pnpm add @types/three -D

:::

Empezando

Puedes registrar TresJs como cualquier otro Vue plugin

import { createApp } from 'vue'
import App from './App.vue'

import TresJs from '@tresjs/core'

export const app = createApp(App)

app.use(TresJs)
app.mount('#app')

O puedes usarlo directamente en el componente

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>
<template>
  <TresCanvas>
    <!-- Aquí va tu escena -->
  </TresCanvas>
</template>

::: tip Esta es la forma recomendada para obtener mejor rendimiento, tree-shaking será mejor porque solo se importarán los componentes que se usaran :::

Vite

Desde la v2 Tresjs usa custom-renderer y

Desde la TresJs v2, se esta usando una solución llamada Vue Custom renderer dentro de la instancia principal de la aplicación de vue, Vue no reconocerá por defecto los componentes dentro del componente TresCanvas. Incluso si estos no afectan al desarrollo de nuestra escena, mostrará warning en la consola

para solucionarlo solo necesitas ir a tu vite.config.ts y añade la siguiente configuración:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { templateCompilerOptions } from '@tresjs/core'

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