feat(core): set individual color props

packages/tres/src/components/VectorSetProps.vue

@@ -45,6 +45,20 @@ const state = reactive({
         <TresBoxGeometry />
         <TresMeshToonMaterial color="#FBB03B" />
       </TresMesh>
+      <TresMesh
+        :scale-x="1.1"
+        :scale-y="2"
+        :scale-z="3"
+        :rotation-y="Math.PI * 0.6"
+        :rotation-x="Math.PI * 1.5"
+        :rotation-z="Math.PI * 0.2"
+        :position-y="1"
+        :position-z="2"
+        cast-shadow
+      >
+        <TresBoxGeometry />
+        <TresMeshToonMaterial :color-r="0xff / 255" :color-g="0x0 / 255" :color-b="0xff / 255" />
+      </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]" />

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

@@ -12,6 +12,8 @@ import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType,
 
 const VECTOR3_PROPS = ['rotation', 'scale', 'position']
 const VECTOR3_AXIS = ['X', 'Y', 'Z']
+const COLOR_PROPS = ['color']
+const COLOR_KEYS = ['r', 'g', 'b']
 
 export function useInstanceCreator(prefix: string) {
   const { /* logMessage, */ logError } = useLogger()
@@ -34,6 +36,8 @@ export function useInstanceCreator(prefix: string) {
       const camelKey = key.replace(/(-\w)/g, m => m[1].toUpperCase())
       let transformProps
       let transformAxis
+      let colorProps
+      let colorKey
       // Ignore property args which is use for initial instance construction
       if (camelKey === 'args' || value === undefined) return
 
@@ -43,7 +47,7 @@ export function useInstanceCreator(prefix: string) {
       } else {
         VECTOR3_PROPS.forEach(vecProps => {
           // Check if the props starts with one of the transform props
-          // and is followed only with the axis
+          // and is followed only with one of the axis
           if (camelKey.startsWith(vecProps) && camelKey.length === vecProps.length + 1) {
             transformProps = vecProps
             transformAxis = camelKey.substring(vecProps.length)
@@ -56,6 +60,17 @@ export function useInstanceCreator(prefix: string) {
           }
         })
       }
+      COLOR_PROPS.forEach(props => {
+        // Check if the props starts with one of the color props
+        // and is followed only with one of the key
+        if (camelKey.startsWith(props) && camelKey.length === props.length + 1) {
+          colorProps = props
+          colorKey = camelKey.substring(props.length).toLowerCase()
+          if (!COLOR_KEYS.includes(colorKey)) {
+            logError(`There was an error setting ${key} property`, `${colorKey} is not a valid axis for ${colorProps}`)
+          }
+        }
+      })
 
       if (props.ref) {
         props.ref = instance
@@ -78,6 +93,14 @@ export function useInstanceCreator(prefix: string) {
           } else if (isDefined(instance[`rotate${transformAxis}`])) {
             instance[`rotate${transformAxis}`](value)
           }
+        } else if (
+          // Check if the instance has a "color" property
+          colorProps &&
+          colorKey &&
+          instance[colorProps] &&
+          instance[colorProps][colorKey]
+        ) {
+          instance[colorProps][colorKey] = value
         } else {
           // Convert empty strings to `true`
           if (value === '') {