Tresjs/docs/es/guide/migration-guide.md

Guía de migración

Esta guía tiene como objetivo ayudarte con la migración de la v1 ha la mas reciente v2 de Tresjs

::: code-group

pnpm update @tresjs/core

npm update @tresjs/core

yarn upgrade @tresjs/core

:::

¡Lo nuevo!

Vue Custom Renderer

TresJs ahora utiliza Vue Custom Renderer 🎉, vive dentro del componente TresCanvas que es el responsable de la creación del WebGLRenderer y la Scene.

Soporte para Typescript y Intellisense 🦾

Esta es probablemente una de las funcionalidades mas solicitadas para TresJs. Ahora los componentes de TresJs trabajan en conjunto con Volar, para proveerte intellisense y tipado.

TresJs ahora genera los tipos de todos tus componentes al momento de hacer la compilación, basado en el catalogo de Threejs. Esto significa que podrás usar todos los componentes de Threejs y obtener intellisense

TresJs Plugin es opcional 👍

El TresPlugin ahora es opcional. Tu podrás usar Tresjs importando lo directamente desde tresjs/core:

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera
      :position="cameraPosition"
      :fov="cameraFov"
      :aspect="cameraAspect"
      :near="cameraNear"
      :far="cameraFar"
    />
    <TresMesh :geometry="geometry" :material="material" />
  </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 :::

TresScene no es necesario

El componente <TresScene /> queda deprecado, la escena ahora vive dentro de <TresCanvas />.

Al comienzo, pensamos que podría ser una buena idea trabajar estos componentes de forma separada, pero pronto nos dimos cuenta que realmente no es util.

Las escenas se crean de esta manera:

<template>
  <TresCanvas>
    <TresPerspectiveCamera
      :position="cameraPosition"
      :fov="cameraFov"
      :aspect="cameraAspect"
      :near="cameraNear"
      :far="cameraFar"
    />
    <TresMesh :geometry="geometry" :material="material" />
  </TresCanvas>
</template>

Para migrar tu código, debes remover el componente <TresScene /> y colocar todos tus componentes de Tresjs dentro del componente padre <TresCanvas />

useCatalog esta deprecado

La función del useCatalog esta ahora deprecada para la v2. Ahora puedes importar todo el catalogo directamente desde @tresjs/core

Puedes leer mas información aquí: Extendiendo

Cambia de esto:

// Wrong ❌
import { useCatalog } from '@tresjs/core'
import { TextGeometry } from 'three/addons/geometries/TextGeometry'

const { extend } = useCatalog()

extend({ TextGeometry })

A esto:

// Correct ✅
import { extend } from '@tresjs/core'
import { TextGeometry } from 'three/addons/geometries/TextGeometry'

// Add the element to the catalogue
extend({ TextGeometry })

En los modelos el getModel fue deprecado

La función getModel fue deprecada. Ahora puedes usar el modelo directamente

Cambia de esto:

// Wrong ❌
<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })

const modelRef = ref()

watch(modelRef, ({ getModel }) => {
  const model = getModel()
  model.position.set(0, 0, 0)
})
</script>
<template>
  <primitive :object="nodes.MyModel" />
</template>

A esto:

// Correct ✅
<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })

const modelRef = ref()

watch(modelRef, model => {
  // Do something with the model
  model.position.set(0, 0, 0)
})
</script>
<template>
  <primitive :object="nodes.MyModel" />
</template>

Las cámaras necesitan vivir antes de cualquier control🎥

El componente TresOrbitControls necesita ser colocado después de la cámara. Esto es así debido a que los componentes controls necesitan la cámara para trabajar de manera correcta

Cambia de esto:

// Wrong ❌
<template>
  <TresCanvas>
    <TresOrbitControls />
    <TresPerspectiveCamera />
  </TresCanvas>
</template>

A esto:

// Correct ✅
<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <TresOrbitControls />
  </TresCanvas>
</template>