chore: misc routes

playground/src/pages/index.vue

@@ -5,6 +5,7 @@ import {
   eventsRoutes,
   cameraRoutes,
   modelsRoutes,
+  miscRoutes,
 } from '../router/routes'
 
 const sections = [
@@ -13,6 +14,7 @@ const sections = [
   { icon: '📣', title: 'Events', routes: eventsRoutes },
   { icon: '📷', title: 'Camera', routes: cameraRoutes },
   { icon: '🐇', title: 'Models', routes: modelsRoutes },
+  { icon: '🤪', title: 'Misc', routes: miscRoutes },
 ]
 </script>
 

playground/src/pages/misc/Text3DDemo.vue

@@ -2,8 +2,9 @@
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
-import Text3D from '../../components/Text3D.vue'
+import { TresLeches, useControls} from '@tresjs/leches'
 
+import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#82DBC5',
   shadows: true,
@@ -12,14 +13,19 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
+
+const { isVisible } = useControls({
+  isVisible: true,
+})
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
     <Suspense>
-      <Text3D />
+      <Text3D v-if="isVisible"/>
     </Suspense>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>

playground/src/router/index.ts

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

playground/src/router/routes/index.ts

@@ -3,6 +3,7 @@ import { cameraRoutes } from './cameras'
 import { eventsRoutes } from './events'
 import { basicRoutes } from './basic'
 import { perfRoutes } from './performance'
+import { miscRoutes } from './misc'
 
 export {
   basicRoutes,
@@ -10,4 +11,5 @@ export {
   eventsRoutes,
   cameraRoutes,
   modelsRoutes,
+  miscRoutes,
 }

playground/src/router/routes/misc.ts

@@ -0,0 +1,7 @@
+export const miscRoutes = [
+  {
+    path: '/misc',
+    name: 'Text 3D',
+    component: () => import('../../pages/misc/Text3DDemo.vue'),
+  },
+]