feat(core): begin vector set props

packages/tres/src/App.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { useTweakPane } from '@tresjs/cientos'
-import TheEnvironment from '/@/components/TheEnvironment.vue'
+// import TheEnvironment from '/@/components/TheEnvironment.vue'
+// import TheEvents from '/@/components/TheEvents.vue'
+import VectorSetProps from '/@/components/VectorSetProps.vue'
 
 useTweakPane()
 </script>
 
 <template>
   <Suspense>
-    <TheEnvironment />
+    <!-- <TheEnvironment /> -->
+    <VectorSetProps />
   </Suspense>
 </template>

packages/tres/src/components/VectorSetProps.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {
+  sRGBEncoding,
+  LinearEncoding,
+  BasicShadowMap,
+  PCFShadowMap,
+  PCFSoftShadowMap,
+  VSMShadowMap,
+  NoToneMapping,
+  LinearToneMapping,
+  ReinhardToneMapping,
+  CineonToneMapping,
+  ACESFilmicToneMapping,
+  CustomToneMapping,
+} from 'three'
+import { reactive, ref } from 'vue'
+
+import { OrbitControls } from '@tresjs/cientos'
+// import { useRenderLoop } from '..'
+/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
+
+const state = reactive({
+  clearColor: '#201919',
+  shadows: true,
+  alpha: false,
+  physicallyCorrectLights: true,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+})
+</script>
+<template>
+  <TresCanvas v-bind="state">
+    <TresPerspectiveCamera
+      :position-x="5"
+      :position-y="5"
+      :position-z="5"
+      :fov="45"
+      :near="0.1"
+      :far="1000"
+      :look-at="[-8, 3, -3]"
+    />
+    <OrbitControls make-default />
+    <TresScene>
+      <TresAmbientLight :intensity="0.5" />
+
+      <TresMesh
+        :scale-x="1.1"
+        :scale-y="2"
+        :scale-z="3"
+        :rotation-x="Math.PI * 1.5"
+        :rotation-y="Math.PI * 0.6"
+        :rotation-z="Math.PI * 0.2"
+        :position-y="1"
+        :position-z="-2"
+        cast-shadow
+      >
+        <TresBoxGeometry />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
+      <!-- position-w is invalid, it will be logged -->
+      <TresMesh :position-y="1" :position-z="2" :position-w="2" cast-shadow>
+        <TresSphereGeometry />
+        <TresMeshToonMaterial color="#FB0000" />
+      </TresMesh>
+      <TresDirectionalLight :position-y="8" :position-z="4" :intensity="0.7" cast-shadow />
+      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+        <TresMeshToonMaterial />
+      </TresMesh>
+      <TresDirectionalLight :position-y="2" :position-z="4" :intensity="1" cast-shadow />
+    </TresScene>
+  </TresCanvas>
+</template>

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

@@ -11,6 +11,7 @@ import { useLogger } from '/@/composables'
 import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType, TresEvent } from '/@/types'
 
 const VECTOR3_PROPS = ['rotation', 'scale', 'position']
+const VECTOR3_AXIS = ['X', 'Y', 'Z']
 
 export function useInstanceCreator(prefix: string) {
   const { /* logMessage, */ logError } = useLogger()
@@ -31,13 +32,32 @@ export function useInstanceCreator(prefix: string) {
 
     Object.entries(props).forEach(([key, value]) => {
       const camelKey = key.replace(/(-\w)/g, m => m[1].toUpperCase())
-
+      let transformProps
+      let transformAxis
       // Ignore property args which is use for initial instance construction
       if (camelKey === 'args' || value === undefined) return
 
       // Normalize vector3 props
       if (VECTOR3_PROPS.includes(camelKey) && value) {
         value = normalizeVectorFlexibleParam(value)
+      } else {
+        VECTOR3_PROPS.forEach(vecProps => {
+          // Check if the props contain one of the transform props
+          // and ensure it begin with it and then is followed only with the axis
+          if (
+            camelKey.includes(vecProps) &&
+            camelKey.indexOf(vecProps) === 0 &&
+            camelKey.length === vecProps.length + 1
+          ) {
+            transformProps = vecProps
+            transformAxis = camelKey.substring(vecProps.length)
+            if (!VECTOR3_AXIS.includes(transformAxis)) {
+              logError(
+                `There was an error setting ${camelKey} property, ${transformAxis} is not a valid axis for ${transformProps}`,
+              )
+            }
+          }
+        })
       }
 
       if (props.ref) {
@@ -49,6 +69,18 @@ export function useInstanceCreator(prefix: string) {
         if (instance[camelKey] && isDefined(instance[camelKey].set)) {
           // Call the "set" method with the value, spread if it's an array
           instance[camelKey].set(...(isArray(value) ? value : [value]))
+        } else if (
+          // Check if the property has a "setAxis" method
+          transformProps &&
+          instance[transformProps]
+        ) {
+          // Check if setAxis function exist
+          // if it doesn't check if props is rotation
+          if (isDefined(instance[transformProps][`set${transformAxis}`])) {
+            instance[transformProps][`set${transformAxis}`](value)
+          } else if (transformProps === 'rotation') {
+            instance[`rotate${transformAxis}`](value)
+          }
         } else {
           // Convert empty strings to `true`
           if (value === '') {

pnpm-lock.yaml

@@ -8,8 +8,8 @@ importers:
       '@changesets/changelog-github': ^0.4.7
       '@changesets/cli': ^2.25.2
       '@stackblitz/sdk': ^1.8.1
-      '@tresjs/cientos': workspace:^1.6.0
-      '@tresjs/core': workspace:^1.6.3
+      '@tresjs/cientos': workspace:^1.7.0
+      '@tresjs/core': workspace:^1.7.0
       '@typescript-eslint/eslint-plugin': ^5.42.0
       '@typescript-eslint/parser': ^5.42.0
       conventional-changelog-cli: ^2.2.2
@@ -47,7 +47,7 @@ importers:
 
   packages/cientos:
     specifiers:
-      '@tresjs/core': workspace:^1.6.3
+      '@tresjs/core': workspace:^1.7.0
       '@tweakpane/plugin-essentials': ^0.1.8
       '@vitejs/plugin-vue': ^4.0.0
       kolorist: ^1.7.0
@@ -79,7 +79,7 @@ importers:
   packages/tres:
     specifiers:
       '@alvarosabu/utils': ^2.3.0
-      '@tresjs/cientos': workspace:^1.6.0
+      '@tresjs/cientos': workspace:^1.7.0
       '@types/three': latest
       '@vitejs/plugin-vue': ^4.0.0
       '@vitest/coverage-c8': ^0.28.4