chore: internal primitive model test playground

playground/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AkuAku: typeof import('./src/components/AkuAku.vue')['default']
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
     BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
     CameraOperator: typeof import('./src/components/CameraOperator.vue')['default']

playground/src/components/AkuAku.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useTresContext } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/AkuAku.glb', 
+  { draco: true })
+const model = nodes.Cube
+
+model.position.set(0, 1, 0)
+
+const state = useTresContext()
+
+state.invalidate()
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>

playground/src/components/DynamicModel.vue

@@ -14,8 +14,11 @@ const { scene: AkuAku, nodes: akukuNodes } = await useGLTF(
 const { isCube } = useControls({
   isCube: false,
 })
+
+const model = computed(() => isCube.value ? nodes.Cube : AkuAku)
+
 </script>
 
 <template>
-  <primitive :object="isCube ? nodes.Cube : AkuAku" />
+  <primitive :object="model" />
 </template>

playground/src/pages/index.vue

@@ -4,6 +4,7 @@ import {
   perfRoutes,
   eventsRoutes,
   cameraRoutes,
+modelsRoutes,
 } from '../router/routes'
 
 const sections = [
@@ -11,6 +12,7 @@ const sections = [
   { icon: '🏎️', title: 'Perf', routes: perfRoutes },
   { icon: '📣', title: 'Events', routes: eventsRoutes },
   { icon: '📷', title: 'Camera', routes: cameraRoutes },
+  { icon: '🐇', title: 'Models', routes: modelsRoutes }
 ]
 </script>
 

playground/src/pages/models/PrimitivesModel.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { 
+  BasicShadowMap,
+  SRGBColorSpace,
+  NoToneMapping,
+  Mesh,
+  TorusGeometry,
+  MeshToonMaterial,
+  TorusKnotGeometry,
+  PlaneGeometry,
+  Group,
+  SphereGeometry, 
+} from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+useControls('fpsgraph')
+
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    ref="canvas"
+    window-size
+    class="awiwi"
+    :style="{ background: '#008080' }"
+  >
+    <TresPerspectiveCamera
+      :position="[7, 7, 7]"
+    />
+    <OrbitControls />
+
+     <Suspense>
+      <DynamicModel />
+    </Suspense>
+    <TresAxesHelper :args="[1]" />
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+      cast-shadow
+    />
+  </TresCanvas>
+</template>

playground/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { basicRoutes } from './routes/basic'
-import { cameraRoutes, eventsRoutes, perfRoutes } from './routes'
+import { cameraRoutes, eventsRoutes, modelsRoutes, perfRoutes } from './routes'
 
 const routes = [
   {
@@ -12,6 +12,7 @@ const routes = [
   ...perfRoutes,
   ...eventsRoutes,
   ...cameraRoutes,
+  ...modelsRoutes
 /*   {
     path: '/',
     name: 'Home',

playground/src/router/routes/index.ts

@@ -1,3 +1,4 @@
+import { modelsRoutes } from './models';
 import { cameraRoutes } from './cameras'
 import { eventsRoutes } from './events'
 import { basicRoutes } from './basic'
@@ -8,4 +9,5 @@ export {
   perfRoutes,
   eventsRoutes,
   cameraRoutes,
+  modelsRoutes
 }

playground/src/router/routes/models.ts

@@ -0,0 +1,7 @@
+export const modelsRoutes = [
+  {
+    path: '/models/primitives',
+    name: 'Model Primitives',
+    component: () => import('../../pages/models/PrimitivesModel.vue'),
+  },
+]