Merge pull request #203 from Tresjs/bugfix/198-fix-pierced-props

fix: correct casing of key names when pierced props
Tresjs · Apr 12, 2023 · ff6989b · ff6989b
2 parents e065115 + b6a808f
commit ff6989b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/playground/src/components/VectorSetProps.vue b/playground/src/components/VectorSetProps.vue
@@ -14,9 +14,17 @@ const state = reactive({
   outputEncoding: sRGBEncoding,
   toneMapping: NoToneMapping,
 })
+
+const context = ref(null)
+
+watchEffect(() => {
+  if (context.value) {
+    console.log(context.value?.state?.scene)
+  }
+})
 </script>
 <template>
-  <TresCanvas v-bind="state">
+  <TresCanvas v-bind="state" ref="context">
     <TresPerspectiveCamera
       :position-x="5"
       :position-y="5"
@@ -36,7 +44,7 @@ const state = reactive({
       :rotation-x="Math.PI * 1.5"
       :rotation-y="Math.PI * 0.6"
       :rotation-z="Math.PI * 0.2"
-      :position-y="1"
+      :position-y="5"
       :position-z="-2"
       cast-shadow
     >

diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <TheEvents />
+    <VectorSetProps />
   </Suspense>
 </template>
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
@@ -111,8 +111,8 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     if (node) {
       let root = node
       let key = prop
-      const camelKey = kebabToCamel(key)
-      let target = root?.[camelKey]
+      let finalKey = kebabToCamel(key)
+      let target = root?.[finalKey]
 
       if (!node.parent) {
         node.parent = scene as TresObject
@@ -131,7 +131,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
         const chain = key.split('-')
         target = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
         key = chain.pop() as string
-
+        finalKey = key.toLowerCase()
         if (!target?.set) root = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
       }
       if (isOn(key)) {
@@ -141,11 +141,11 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
       if (value === '') value = true
       // Set prop, prefer atomic methods if applicable
       if (isFunction(target)) {
-        if (Array.isArray(value)) node[camelKey](...value)
-        else node[camelKey](value)
+        if (Array.isArray(value)) node[finalKey](...value)
+        else node[finalKey](value)
         return
       }
-      if (!target?.set && !isFunction(target)) root[camelKey] = value
+      if (!target?.set && !isFunction(target)) root[finalKey] = value
       else if (target.constructor === value.constructor && target?.copy) target?.copy(value)
       else if (Array.isArray(value)) target.set(...value)
       else if (!target.isColor && target.setScalar) target.setScalar(value)