fix: recent problems with adding the controls to refs

packages/cientos/src/core/OrbitControls.vue

@@ -6,7 +6,7 @@ import { inject, ref, watch, type Ref } from 'vue'
 
 import { useCientos } from './useCientos'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     makeDefault?: boolean
     camera?: Camera

packages/cientos/src/core/TransformControls.vue

@@ -69,9 +69,9 @@ function addEventListeners(controls: TransformControlsImp) {
 }
 
 watch(
-  [camera, renderer],
+  () => props.object,
   () => {
-    if (camera?.value && renderer?.value && scene?.value) {
+    if (camera?.value && renderer?.value && scene?.value && props.object) {
       controls.value = new TransformControlsImp(camera.value, unref(renderer).domElement)
 
       controls.value.attach(unref(props.object))

packages/tres/src/components/TheExperience.vue

@@ -13,8 +13,8 @@ import {
   ACESFilmicToneMapping,
   CustomToneMapping,
 } from 'three'
-import { reactive } from 'vue'
-import { OrbitControls, useTweakPane } from '../../../cientos/src/'
+import { reactive, ref } from 'vue'
+import { OrbitControls, useTweakPane, TransformControls } from '../../../cientos/src/'
 import { TresCanvas } from '../core/useRenderer/component'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
@@ -28,6 +28,9 @@ const state = reactive({
   toneMapping: NoToneMapping,
 })
 
+const boxRef = ref()
+const sphereRef = ref()
+
 const { pane } = useTweakPane()
 
 pane.addInput(state, 'clearColor', {
@@ -93,25 +96,28 @@ pane
 <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 />
     <TresScene>
-      <OrbitControls />
       <TresAmbientLight :intensity="0.5" />
       <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
         <TresConeGeometry :args="[1, 1.5, 3]" />
         <TresMeshToonMaterial color="#82DBC5" />
       </TresMesh>
-      <TresMesh :position="[0, 4, 0]" cast-shadow>
+      <TransformControls :object="boxRef" />
+      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
         <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
         <TresMeshToonMaterial color="#4F4F4F" />
       </TresMesh>
-      <TresMesh :position="[2, 2, 0]" cast-shadow>
+      <TransformControls :object="sphereRef" />
+
+      <TresMesh ref="sphereRef" :position="[2, 2, 0]" cast-shadow>
         <TresSphereGeometry />
         <TresMeshToonMaterial color="#FBB03B" />
       </TresMesh>
       <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
       <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
         <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial :color="floorTeal" />
+        <TresMeshToonMaterial />
       </TresMesh>
       <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
     </TresScene>