feat(cientos): basic transform controls

packages/cientos/src/core/TransformControls.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/* import { useRenderLoop } from '@tresjs/core' */
+import { Camera, Object3D, Scene, WebGLRenderer } from 'three'
+import { TransformControls as TransformControlsImp } from 'three-stdlib'
+import { inject, type Ref, unref, watch, useSlots } from 'vue'
+
+let controls: TransformControlsImp
+
+const props = defineProps<{
+  object: Ref<Object3D>
+  mode: 'translate' | 'rotate' | 'scale' | 'scaleUniform'
+}>()
+
+const camera = inject<Ref<Camera>>('camera')
+const renderer = inject<Ref<WebGLRenderer>>('renderer')
+const scene = inject<Ref<Scene>>('local-scene')
+
+watch(
+  [camera, renderer],
+  () => {
+    if (camera?.value && renderer?.value && scene?.value) {
+      controls = new TransformControlsImp(camera.value, unref(renderer).domElement)
+
+      controls.attach(unref(props.object))
+      scene.value.add(controls)
+    }
+  },
+  {
+    deep: true,
+  },
+)
+</script>
+<template>
+  <slot />
+</template>

packages/cientos/src/index.ts

@@ -1,5 +1,7 @@
 import OrbitControls from './core/OrbitControls.vue'
+import TransformControls from './core/TransformControls.vue'
 import { useTweakPane } from './core/useTweakPane'
 import { GLTFModel } from './core/useGLTF/component'
 export * from './core/useGLTF'
-export { OrbitControls, useTweakPane, GLTFModel }
+
+export { OrbitControls, TransformControls, useTweakPane, GLTFModel }

packages/tres/src/App.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { useTweakPane, OrbitControls } from '../../cientos/src'
+import { Color, Object3D } from 'three'
+import { ref } from 'vue'
+import { useTweakPane, TransformControls } from '../../cientos/src'
 import TestSphere from '/@/components/TestSphere.vue'
 
+const sphereRef = ref<Object3D>()
+
 const colorTeal = new Color('teal')
 useTweakPane()
 
@@ -11,10 +14,11 @@ const meshPosition = [0, 1, 0]
 <template>
   <Suspense>
     <TresCanvas shadows alpha power-preference="high-performance" preserve-drawing-buffer physically-correct-lights>
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
       <TresScene>
-        <OrbitControls />
-        <TresMesh :position="meshPosition" :scale="1">
+        <!-- <OrbitControls /> -->
+        <TransformControls :object="sphereRef" />
+        <TresMesh ref="sphereRef" :position="meshPosition" :scale="1">
           <TresSphereGeometry />
           <TresMeshToonMaterial :color="colorTeal" />
         </TresMesh>