fix(cientos): check if transform prop has setter

packages/cientos/src/core/TransformControls.vue

@@ -3,7 +3,7 @@ import { useTres } from '@tresjs/core'
 import { Camera, Object3D, Scene, WebGLRenderer, type Event } from 'three'
 import { TransformControls as TransformControlsImp } from 'three-stdlib'
 import { inject, computed, type Ref, unref, watch, shallowRef, ShallowRef, onUnmounted } from 'vue'
-import { pick } from '../utils'
+import { pick, hasSetter } from '../utils'
 
 const props = withDefaults(
   defineProps<{
@@ -91,10 +91,13 @@ watch(
   ([value, controlsValue]: [any, any]) => {
     if (value && controlsValue) {
       for (const key in value) {
-        const methodName = `set${key[0].toUpperCase()}${key.slice(1)}`
-
-        if (typeof controlsValue[methodName] === 'function' && value[key] !== undefined) {
-          ;(controlsValue[methodName] as (param: any) => void)(value[key])
+        if (!hasSetter(controlsValue, key)) {
+          controlsValue[key] = value[key]
+        } else {
+          const methodName = `set${key[0].toUpperCase()}${key.slice(1)}`
+          if (typeof controlsValue[methodName] === 'function' && value[key] !== undefined) {
+            ;(controlsValue[methodName] as (param: any) => void)(value[key])
+          }
         }
       }
     }

packages/cientos/src/utils/index.ts

@@ -8,3 +8,8 @@ export function pick<T extends object, K extends keyof T>(obj: T, props: K[]): P
   }
   return pickedProperties
 }
+
+export function hasSetter(obj: any, prop: string): boolean {
+  const setterName = `set${prop[0].toUpperCase()}${prop.slice(1)}`
+  return obj[setterName] !== undefined
+}

packages/tres/src/components/TheGizmos.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { shallowRef, shallowReactive } from 'vue'
+import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
+
+import { OrbitControls, useTweakPane, TransformControls } from '../../../cientos/src'
+
+const state = shallowReactive({
+  clearColor: '#201919',
+  shadows: true,
+  alpha: false,
+  physicallyCorrectLights: true,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+})
+
+const transformState = shallowReactive({
+  mode: 'translate',
+  size: 1,
+  axis: 'XY',
+  showX: true,
+  showY: true,
+  showZ: true,
+  enabled: true,
+})
+
+const boxRef = shallowRef()
+
+const { pane } = useTweakPane()
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'outputEncoding',
+    options: [
+      { text: 'Translate', value: 'translate' },
+      { text: 'Rotate', value: 'rotate' },
+      { text: 'Scale', value: 'scale' },
+    ],
+    value: transformState.mode,
+  })
+  .on('change', ev => {
+    transformState.mode = ev.value
+  })
+
+pane.addInput(transformState, 'size')
+pane.addInput(transformState, 'enabled')
+
+const axisFolder = pane.addFolder({ title: 'Axis' })
+
+axisFolder
+  .addBlade({
+    view: 'list',
+    label: 'axis',
+    options: [
+      { text: 'X', value: 'X' },
+      { text: 'Y', value: 'Y' },
+      { text: 'XY', value: 'XY' },
+      { text: 'YZ', value: 'YZ' },
+      { text: 'XZ', value: 'XZ' },
+      { text: 'XYZ', value: 'XYZ' },
+    ],
+    value: transformState.axis,
+  })
+  .on('change', ev => {
+    transformState.axis = ev.value
+  })
+axisFolder.addInput(transformState, 'showX')
+axisFolder.addInput(transformState, 'showY')
+axisFolder.addInput(transformState, 'showZ')
+</script>
+
+<template>
+  <TresCanvas v-bind="state">
+    <OrbitControls make-default />
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+
+    <TresScene>
+      <TransformControls :object="boxRef" v-bind="transformState" />
+      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
+        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
+      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+        <TresMeshToonMaterial />
+      </TresMesh>
+      <TresAmbientLight :intensity="0.5" />
+      <TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
+    </TresScene>
+  </TresCanvas>
+</template>