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.

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

<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:

<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:

• Una Escena para contener la cámara y el/los objetos juntos.
• Un Renderizador para renderizar la escena en el DOM.
• Una Cámara
• Un Objeto

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.

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

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

<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:

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

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

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