Merge pull request #10 from Tresjs/bugfix/5-cameras-lookat-doesnt-work

fix(core): enabled function calling on process props

packages/cientos/src/core/OrbitControls.vue

@@ -12,6 +12,7 @@ watch(
   [camera, renderer],
   () => {
     if (camera?.value && renderer?.value) {
+      if (controls) controls.reset()
       controls = new OrbitControlsImp(camera.value, unref(renderer).domElement)
       controls.enableDamping = true
 

packages/tres/src/App.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import { unref } from 'vue'
 import { Color } from 'three'
-import { useTweakPane } from '@tresjs/cientos'
-import { useTres } from './core'
+import { useTweakPane, OrbitControls } from '../../cientos/src'
 import TestSphere from '/@/components/TestSphere.vue'
 
 const colorTeal = new Color('teal')
 useTweakPane()
 
-const { state } = useTres()
-
 const meshPosition = [0, 1, 0]
 </script>
 <template>
   <Suspense>
     <TresCanvas shadows alpha power-preference="high-performance" preserve-drawing-buffer physically-correct-lights>
-      <TresPerspectiveCamera :position="[0, 5, 5]" :fov="45" :near="0.1" :far="1000" />
+      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
       <TresScene>
-        <TresOrbitControls v-if="state.renderer" :args="[unref(state), state.renderer?.domElement]" />
+        <OrbitControls />
         <TresMesh :position="meshPosition" :scale="1">
           <TresSphereGeometry />
           <TresMeshToonMaterial :color="colorTeal" />

packages/tres/src/core/useInstanceCreator/index.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { PerspectiveCamera } from 'three'
 import { defineComponent } from 'vue'
-import { isArray, isDefined } from '@alvarosabu/utils'
+import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
 import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
 import { useCamera, useScene } from '/@/core/'
 import { useLogger } from '/@/composables'
@@ -71,6 +71,7 @@ export function useInstanceCreator(prefix: string) {
             function processProps(attrs: any, instance: TresInstance) {
               Object.entries(attrs).forEach(([key, value]) => {
                 const camel = key.replace(/(-\w)/g, m => m[1].toUpperCase())
+
                 if (camel === 'args' || value === undefined) {
                   return
                 }
@@ -89,6 +90,10 @@ export function useInstanceCreator(prefix: string) {
                     if (value === '') {
                       value = true
                     }
+                    if (isFunction(instance[camel])) {
+                      instance[camel](...(value as Array<any>))
+                      return
+                    }
                     instance[camel] = value
                   }
                 } catch (error: unknown) {