chore: added rigged model scene local playground

Tresjs · Jun 29, 2024 · a59d83f · a59d83f
1 parent 88150e3
commit a59d83f
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 0 deletions.
diff --git a/playground/components.d.ts b/playground/components.d.ts
@@ -29,5 +29,6 @@ declare module 'vue' {
     TheCameraOperator: typeof import('./src/components/TheCameraOperator.vue')['default']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']
     TheSphere: typeof import('./src/components/TheSphere.vue')['default']
+    UgglyBunny: typeof import('./src/components/UgglyBunny.vue')['default']
   }
 }
diff --git a/playground/src/components/UgglyBunny.vue b/playground/src/components/UgglyBunny.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAnimations, useGLTF } from '@tresjs/cientos'
+
+const { scene: model, animations } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf',
+)
+
+const { actions } = useAnimations(animations, model)
+
+const currentAction = ref(actions.Greeting)
+
+currentAction.value.play()
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>
diff --git a/playground/src/pages/models/RiggedModel.vue b/playground/src/pages/models/RiggedModel.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+
+import UgglyBunny from '../../components/UgglyBunny.vue'
+
+const gl = {
+  clearColor: '#F78B3D',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+  windowSize: true,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[2, 2, 9]"
+      :look-at="[0, 2, 0]"
+    />
+    <OrbitControls />
+    <Suspense>
+      <UgglyBunny />
+    </Suspense>
+    <TresDirectionalLight
+      color="#F78B3D"
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
+    <TresAmbientLight :intensity="2" />
+  </TresCanvas>
+</template>
diff --git a/playground/src/router/routes/models.ts b/playground/src/router/routes/models.ts
@@ -4,4 +4,9 @@ export const modelsRoutes = [
     name: 'Model Primitives',
     component: () => import('../../pages/models/PrimitivesModel.vue'),
   },
+  {
+    path: '/models/rigged',
+    name: 'Rigged Models',
+    component: () => import('../../pages/models/RiggedModel.vue'),
+  },
 ]