Skip to content

Tu primera escena

Esta gu铆a te ayudar谩 a crear tu primera escena en Tres. 馃崺

Configurando el Canvas

Antes de poder crear una escena, necesitamos un lugar donde mostrarla. Usando solo ThreeJS, tendr铆amos que crear un elemento HTML canvas para montar el WebglRenderer e inicializar la scene.

Con TresJS, solo necesitas importar el componente predeterminado <TresCanvas /> y agregarlo al template de tu componente Vue.

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

<template>
  <TresCanvas window-size>
    <!-- Tu escena vive aqui -->
  </TresCanvas>
</template>

WARNING

Es importante que todos los componentes relacionados con la escena est茅n dentro del componente <TresCanvas />. De lo contrario, no se renderizar谩n.

El componente TresCanvas realizar谩 algunas configuraciones detr谩s de escena:

  • Crea un WebGLRenderer que se actualiza autom谩ticamente en cada fotograma.
  • Establece el bucle de renderizado para que se llame en cada fotograma en funci贸n de la frecuencia de actualizaci贸n del navegador.

Tama帽o del lienzo

De forma predeterminada, el componente TresCanvas tomar谩 el ancho y alto del elemento padre. Si est谩s experimentando una p谩gina en blanco, aseg煤rate de que el elemento padre tenga un tama帽o adecuado.

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

<template>
  <TresCanvas>
    <!-- Tu escena vive aqui -->
  </TresCanvas>
</template>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  width: 100%;
}
</style>

Si tu escena no va a formar parte de una interfaz de usuario, tambi茅n puedes hacer que el lienzo ocupe el ancho y alto de toda la ventana utilizando la propiedad window-size de la siguiente manera:

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

<template>
  <TresCanvas window-size>
    <!-- Tu escena vive aqui -->
  </TresCanvas>
</template>

Creando una escena

Necesitamos 4 elementos principales para crear una experiencia en 3D:

Con TresJS, solo necesitas agregar el componente <TresCanvas /> al template de tu componente Vue y autom谩ticamente crear谩 un Renderizador (elemento DOM canvas) y una Escena para ti.

vue
<template>
  <TresCanvas window-size>
    <!-- Tu escena vive aqui -->
  </TresCanvas>
</template>

Then you can add a PerspectiveCamera using the <TresPerspectiveCamera /> component.

vue
<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />
  </TresCanvas>
</template>

WARNING

Un problema com煤n es que la posici贸n predeterminada de la c谩mara es el origen de la escena (0,0,0). TresJS establecer谩 autom谩ticamente la posici贸n de tu c谩mara en [3,3,3] si la propiedad position no est谩 definida. Si no se define ninguna c谩mara en tu escena, se agregar谩 autom谩ticamente una c谩mara de perspectiva.

Agregando un 馃崺

Esa escena se ve un poco vac铆a, vamos a agregar un objeto b谩sico. Si estuvi茅ramos usando ThreeJS puro, necesitar铆amos crear un objeto Mesh y adjuntarle un Material y una Geometry de la siguiente manera:

ts
const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
const donut = new THREE.Mesh(geometry, material)
scene.add(donut)

Un Mesh es un objeto b谩sico de la escena en three.js, y se utiliza para contener la geometr铆a y el material necesarios para representar una forma en el espacio 3D.

Ahora veamos c贸mo podemos lograr lo mismo f谩cilmente con TresJS. Para hacer eso, vamos a usar el componente <TresMesh /> y entre los slots predeterminados, vamos a pasar un <TresTorusGeometry /> y un <TresMeshBasicMaterial />.

vue
<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
  </TresCanvas>
</template>

INFO

Observa que no necesitamos importar nada, esto se debe a que TresJS genera autom谩ticamente un Componente Vue basado en el objeto Three que deseas usar en CamelCase con un prefijo Tres. Por ejemplo, si quieres usar una AmbientLight, puedes usar el componente <TresAmbientLight />.

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

<template>
  <TresCanvas
    clear-color="#82DBC5"
    window-size
  >
    <TresPerspectiveCamera
      :position="[3, 3, 3]"
      :look-at="[0, 0, 0]"
    />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

A partir de aqu铆 puedes comenzar a agregar m谩s objetos a tu escena y jugar con las propiedades de los componentes para ver c贸mo afectan la escena.