chore: improved playground

playground/components.d.ts

@@ -13,6 +13,8 @@ declare module '@vue/runtime-core' {
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']
     Responsiveness: typeof import('./src/components/Responsiveness.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     Shapes: typeof import('./src/components/Shapes.vue')['default']
     TestSphere: typeof import('./src/components/TestSphere.vue')['default']
     Text3D: typeof import('./src/components/Text3D.vue')['default']

playground/src/App.vue

@@ -2,6 +2,6 @@
 </script>
 
 <template>
-  <TheParticles />
+  <router-view />
 </template>
 

playground/src/components/TheBasic.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
+import { sRGBEncoding, BasicShadowMap, NoToneMapping, Vector3 } from 'three'
 import { reactive, ref } from 'vue'
 import { TresCanvas } from '/@/components/TresCanvas'
-import { OrbitControls } from '@tresjs/cientos'
-import { useRenderLoop } from '../composables/useRenderLoop'
+import { OrbitControls, TransformControls } from '@tresjs/cientos'
+import { useRenderLoop } from '/@/'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
 const state = reactive({
@@ -27,12 +27,12 @@ onLoop(({ elapsed }) => {
 </script>
 <template>
   <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <OrbitControls make-default />
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[0,0,0]" />
+    <OrbitControls />
     <TresAmbientLight :intensity="0.5" />
 
     <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
-      <TresSphereGeometry />
+      <TresSphereGeometry :args="[2,32,32]"/>
       <TresMeshToonMaterial color="cyan" />
       <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
     </TresMesh>
@@ -42,5 +42,6 @@ onLoop(({ elapsed }) => {
       <TresMeshToonMaterial />
     </TresMesh>
     <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
+    <TransformControls :object="sphereRef" />
   </TresCanvas>
 </template>

playground/src/main.ts

@@ -1,5 +1,11 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import { router } from './router'
 
-createApp(App).mount('#app')
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

playground/src/pages/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+<template>
+    <router-link to="/shapes">Shapes</router-link>
+<TheBasic />
+</template>

playground/src/components/Shapes.vue → playground/src/pages/shapes.vue

@@ -83,7 +83,7 @@ const tubePath = new CubicBezierCurve3(
 </script>
 
 <template>
-  <TresCanvas v-bind="state">
+  <TresCanvas v-bind="state" >
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
 
     <OrbitControls />

playground/src/router.ts

@@ -0,0 +1,18 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: () => import('./pages/index.vue'),
+    },
+    {
+        path: '/shapes',
+        name: 'Shapes',
+        component: () => import('./pages/shapes.vue'),
+    },
+]
+export const router = createRouter({
+    history: createWebHistory(),
+    routes
+})