<script setup lang="ts">
import { Color } from 'three'

const floorTeal = new Color('gray')
</script>
<template>
  <Story title="Basic">
    <Variant title="playground">
      <TresCanvas background="#82DBC5" shadows alpha>
        <Mesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
          <ConeGeometry :args="[1, 1.5, 3]" />
          <MeshToonMaterial color="#82DBC5" />
        </Mesh>
        <Mesh :position="[0, 4, 0]" cast-shadow>
          <BoxGeometry :args="[1.5, 1.5, 1.5]" />
          <MeshToonMaterial color="#4F4F4F" />
        </Mesh>
        <Mesh :position="[2, 2, 0]" cast-shadow>
          <SphereGeometry />
          <MeshToonMaterial color="#FBB03B" />
        </Mesh>
        <DirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
        <Mesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
          <PlaneGeometry :args="[10, 10, 10, 10]" />
          <MeshToonMaterial :color="floorTeal" />
        </Mesh>
      </TresCanvas>
    </Variant>
  </Story>
</template>
