fix: with the v5 the reflector component stop working.

Problem: the way the color prop was being set

Solution: set the color prop manually using watch

Author: JaimeTorrealba

playground/vue/src/pages/abstractions/ReflectorMeshDemo.vue

@@ -7,7 +7,8 @@ import {
 } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { shallowRef, watch } from 'vue'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#111',
@@ -18,22 +19,19 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const reflectorRef = shallowRef()
-
-watch(reflectorRef, (value) => {
-  // eslint-disable-next-line no-console
-  console.log(value)
-})
-
 const options = {
-  color: '#f7f7f7',
   clipBias: 0,
   textureWidth: 1024,
   textureHeight: 1024,
 }
+
+const { color } = useControls({
+  color: { value: '#f7f7f7', type: 'color', label: 'Color' },
+})
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas
     v-bind="gl"
   >
@@ -51,10 +49,9 @@ const options = {
       />
     </TresMesh>
     <Reflector
-      ref="reflectorRef"
       :rotation="[-Math.PI * 0.5, 0, 0]"
       :position="[0, -2, 0]"
-      :color="options.color"
+      :color="color"
       :clip-bias="options.clipBias"
       :texture-width="options.textureWidth"
       :texture-height="options.textureHeight"

src/core/abstractions/Reflector.vue

@@ -3,6 +3,18 @@ import { useTres } from '@tresjs/core'
 import { Reflector } from 'three-stdlib'
 import { shallowRef, toRefs, watch } from 'vue'
 import type { TresColor } from '@tresjs/core'
+import type { ShaderMaterial } from 'three'
+
+const props = withDefaults(defineProps<ReflectorProps>(), {
+  color: '#333',
+  textureWidth: 512,
+  textureHeight: 512,
+  clipBias: 0,
+  multisample: 4,
+  // @ts-expect-error: `ReflectorShader` is not present in imported type but is present here:
+  // https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js#L32
+  shader: Reflector.ReflectorShader,
+})
 
 export interface ReflectorProps {
   /**
@@ -61,21 +73,17 @@ export interface ReflectorProps {
   shader?: object
 }
 
-const props = withDefaults(defineProps<ReflectorProps>(), {
-  color: '#333',
-  textureWidth: 512,
-  textureHeight: 512,
-  clipBias: 0,
-  multisample: 4,
-  // @ts-expect-error: `ReflectorShader` is not present in imported type but is present here:
-  // https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js#L32
-  shader: Reflector.ReflectorShader,
-})
-
 const { extend, invalidate } = useTres()
 
 const reflectorRef = shallowRef<Reflector>()
 
+watch(reflectorRef, (value) => {
+  if (value) {
+    const material = value.material as ShaderMaterial
+    material.uniforms.color.value.set(props.color as string)
+  }
+})
+
 extend({ Reflector })
 
 const { color, textureWidth, textureHeight, clipBias, multisample, shader }
@@ -85,6 +93,11 @@ watch(props, () => {
   invalidate()
 })
 
+watch(color, (_color) => {
+  const material = reflectorRef.value?.material as ShaderMaterial
+  material?.uniforms.color.value.set(_color as string)
+})
+
 defineExpose({
   instance: reflectorRef,
 })
@@ -94,7 +107,6 @@ defineExpose({
   <TresReflector
     ref="reflectorRef"
     :args="[undefined, { textureWidth, textureHeight, clipBias, multisample, shader }]"
-    :material-uniforms-color-value="color"
   >
     <slot>
       <TresPlaneGeometry :args="[5, 5]" />