feat(playground): basic

donut example

apps/playground/src/components/TresBasic.vue

@@ -18,7 +18,7 @@ const state = reactive({
 <template>
   <TresCanvas v-bind="state">
     <OrbitControls />
-    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
     <TresScene>
       <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
         <TresConeGeometry :args="[1, 1.5, 3]" />

apps/playground/src/components/TresDonut.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+import { OrbitControls } from '@tresjs/cientos'
+
+const state = reactive({
+  shadows: true,
+  alpha: false,
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="state">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[8, 8, 8]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <TresScene>
+      <TresMesh>
+        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+        <TresMeshBasicMaterial color="orange" />
+      </TresMesh>
+    </TresScene>
+  </TresCanvas>
+</template>

apps/playground/src/pages/vue/tres-donut.astro

@@ -0,0 +1,11 @@
+---
+import TresDonut from '/@/components/TresDonut.vue';
+import Layout from '/@/layouts/Layout.astro';
+---
+
+<Layout title="Tres Donut 🍩">
+	<main>
+		<TresDonut client:only />
+	</main>
+</Layout>
+