feat(playground): animations

apps/playground/src/components/BasicAnimations.vue

@@ -0,0 +1,38 @@
+<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>

apps/playground/src/pages/index.astro

@@ -9,7 +9,7 @@ const experiments = [...vueExperiments].map((experiment) => ({
 ---
 
 <Layout title="Playground">
-	<main class="container px-4 mt-20 sm:px-0 mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-16 md:gap-32">
+	<main class="container px-4 py-20 sm:px-0 mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-16 md:gap-32">
 		{experiments.map((experiment) => (
 			<a href={experiment.url} class="card bg-base-100 text-gray-700 shadow-xl rounded-lg overflow-hidden relative"
 			>

apps/playground/src/pages/vue/animations.mdx

@@ -0,0 +1,61 @@
+---
+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>