---
layout: /@/layouts/ExperimentLayout.astro
thumbnail: /animations.png
title: Animations
author: Alvarosabu
description: A basic example of how to animate a geometry using useRendererLoop composable
tags: ['basic', 'animations', 'useRendererLoop']
---

import BasicAnimations from '/@/components/BasicAnimations.vue'
import TheInfo from '/@/components/TheInfo.astro'

<BasicAnimations client:only />

<TheInfo >
# { frontmatter.title }

Tutorial [here](https://tresjs.org/examples/basic-animations.html)

```vue
<script setup lang="ts">
import { ShallowRef, shallowRef } from 'vue'

import { useRenderLoop, TresInstance } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'

const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)

const { onLoop } = useRenderLoop()

onLoop(({ delta, elapsed }) => {
  if (boxRef.value) {
    boxRef.value.rotation.y += delta
    boxRef.value.rotation.z = elapsed * 0.2
  }
})
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    shadows
    alpha
    window-size
    power-preference="high-performance"
    physically-correct-lights
  >
    <OrbitControls />
    <TresPerspectiveCamera :position="[1, 2, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
    <TresScene>
      <TresMesh ref="boxRef" :scale="1" cast-shadow>
        <TresBoxGeometry :args="[1, 1, 1]" />
        <TresMeshNormalMaterial />
      </TresMesh>
      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
    </TresScene>
  </TresCanvas>
</template>
```

</TheInfo>
