fix: refactor transform controls with deconstructor

package.json

@@ -53,14 +53,14 @@
     "@alvarosabu/prettier-config": "^1.3.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@tweakpane/plugin-essentials": "^0.1.8",
-    "@types/node": "^20.2.3",
-    "@types/three": "^0.152.0",
+    "@types/node": "^20.2.4",
+    "@types/three": "^0.152.1",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
     "@vitejs/plugin-vue": "^4.2.3",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.14.0",
+    "eslint-plugin-vue": "^9.14.1",
     "gsap": "^3.11.5",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.0",
@@ -70,18 +70,18 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "tweakpane": "^3.1.9",
     "typescript": "^5.0.4",
-    "unocss": "^0.52.1",
-    "vite": "^4.3.8",
+    "unocss": "^0.52.3",
+    "vite": "^4.3.9",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.3.0",
     "vite-svg-loader": "^4.0.0",
     "vitepress": "1.0.0-beta.1"
   },
   "dependencies": {
-    "@tresjs/core": "2.1.1",
+    "@tresjs/core": "2.1.2",
     "@vueuse/core": "^10.1.2",
     "three": "^0.152.2",
-    "three-stdlib": "^2.21.12",
+    "three-stdlib": "^2.22.4",
     "vue": "^3.3.4"
   }
 }

playground/components.d.ts

@@ -23,6 +23,8 @@ declare module '@vue/runtime-core' {
     TheSmoke: typeof import('./src/components/TheSmoke.vue')['default']
     TheStars: typeof import('./src/components/TheStars.vue')['default']
     TheText3D: typeof import('./src/components/TheText3D.vue')['default']
+    TransformControls: typeof import('./src/components/TransformControls.vue')['default']
+    TransformControlsDemo: typeof import('./src/components/TransformControlsDemo.vue')['default']
     WobbleMaterial: typeof import('./src/components/WobbleMaterial.vue')['default']
   }
 }

playground/package.json

@@ -9,11 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/core": "2.1.0",
+    "@tresjs/core": "2.1.2",
     "vue-router": "^4.2.1"
   },
   "devDependencies": {
-    "unplugin-auto-import": "^0.16.1",
+    "unplugin-auto-import": "^0.16.2",
     "unplugin-vue-components": "^0.24.1",
     "vite-plugin-glsl": "^1.1.2",
     "vue-tsc": "^1.6.5"

playground/src/components/TransformControlsDemo.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { OrbitControls, TransformControls } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const boxRef = ref()
+const sphereRef = ref()
+
+const transformRef = ref()
+
+function changeObject(object: any) {
+  transformRef.value = object
+}
+
+const context = ref()
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" ref="context">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls make-default />
+
+    <TresMesh ref="boxRef" :position="[-2, 1, 0]" @click="changeObject(boxRef)">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TransformControls v-if="transformRef" :object="transformRef" />
+    <TresMesh ref="sphereRef" :position="[2, 1, 0]" @click="changeObject(sphereRef)">
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>

playground/src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <ContactShadowsDemo />
+    <TransformControlsDemo />
   </Suspense>
 </template>