[Question]: How to update a primitive's material?

Hi, thank you for creating this awesome library!

I have a question which is both related to the implementation of this project and a bit of THREE…

I was wondering how I could change the material (on runtime) of a primitive object that uses a GLTF model. Passing <meshBasicMaterial> as a child for example does nothing, neither does passing material as a prop to my <primitive>.

I can’t make use of refs in my instance because I’m dynamically loading multiple models from an array… Like so:

  {buildings.map((building, i) => {
                const { position, rotation, scale } = buildingAttributeMap[i];
                return (
                  <primitive
                    key={i.toString()}
                    object={building}
                    position={position}
                    rotation={rotation}
                    scale={scale}
                    material={null}
                  />
                );
              })}

I hope this makes sense, if anything is unclear, please let me know.

Thanks in advance!

[drcmda]

gltf loads a full scene with nested meshes and materials all readymade. That’s the downside with imperative stuff, changing things always means going through ugly traversals.

<primitive object={building} material={...} /> won’t do anything if the referenced object (in this case building) doesn’t have a material property. Generally in threejs meshes and lines have the material property, groups and object3d’s don’t have it.

If you know the structure you could use object piercing. Example: https://codesandbox.io/s/reactthreefiber-suspense-gltf-loader-vk48w

<primitive object={scene} children-0-children-1-material-color="red" />

But that makes for a very implicit contract between your code and the gltf scene.

[VityaSchel]

Is there a way to use object piercing with material names instead of children indexes?

I made this simple function which converts material properties into props:

export const applyMaterial = (scene, materials) => {
  const props = {}
  for(let [materialName, value] of Object.entries(materials)) {
    const recursiveSearch = obj => {
      for(let childIndex in obj.children) {
        const child = obj.children[childIndex]

        if(child.children.length) {
          const searchResult = recursiveSearch(child)
          if(searchResult) return `children-${childIndex}-${searchResult}`
          else continue
        } else {
          if(child?.material?.name === materialName) {
            return `children-${childIndex}-material`
          }
        }
      }
    }

    const template = recursiveSearch(scene)
    // const properties = flattenObject(value) Breaks if value is used as object
    for(let [propertyName, propertyValue] of Object.entries(value)){
      props[`${template}-${propertyName}`] = propertyValue
    }
  }
  return props
}

It must be used on primitive like this:

    <primitive>
        {...applyMaterial(card.scene, {
          'cube': { roughness: 1, 'color-r': cubeColor, 'color-g': cubeColor, 'color-b': cubeColor }
        })}
    </primitive>

And it works with springs

Haven’t tested it with nested objects tho but it should work 😅