---
layout: /@/layouts/ExperimentLayout.astro
thumbnail: /tres-donut.png
title: Tres Donut 🍩
author: Alvarosabu
description: Plain donut with TresJS
tags: ['basic']
---

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

<TresDonut client:only />

<TheInfo>
# { frontmatter.title }

```vue
<script setup lang="ts">
import { reactive } from 'vue'

const state = reactive({
  shadows: true,
  alpha: false,
})
</script>

<template>
  <TresCanvas v-bind="state">
    <TresPerspectiveCamera :position="[0, 0, 6]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
    <TresScene>
      <TresMesh>
        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
        <TresMeshBasicMaterial color="orange" />
      </TresMesh>
    </TresScene>
  </TresCanvas>
</template>
```

</TheInfo>
