How can I share a material among different objects?

[mileshiroo]

Hello,

I'm trying to save resources by sharing a single material across multiple objects. I tried to use the pattern below, but it does not work: the material is not rendered. I know how I would approach this in vanilla Three.js but am stumped for how to do it with R3F.

I'd appreciate any help or tips, thanks!

import { useState } from 'react'
import MyCustomMaterial from './MyMaterial.js'

function Model() {
  const [material, setMaterial] = useState()

  return (
    <>
      <MyCustomMaterial ref={setMaterial} />
      {material && (
        <>
          <Sphere args={[1, 32, 32]} material={material} />
          <Plane args={[2, 2]} position={[3, 0, 0]} material={material} />
          <Torus args={[1, 0.5, 32, 32]} position={[-3.5, 0, 0]} material={material} />
        </>
      )}
    </>
  )
}

[CodyJasonBennett]

I'd make sure that MyCustomMaterial actually accepts refs via React.forwardRef:

const MyCustomMaterial = React.forwardRef(function MyCustomMaterial(props, ref) {
  return <myCustomMaterial {...props} ref={ref} />
})

Alternatively, you can share an instance from global scope among multiple meshes:

const material = new MyCustomMaterial() // vanilla class

function Model() {
  return (
    <>
      <Sphere args={[1, 32, 32]} material={material} />
      <Plane args={[2, 2]} position={[3, 0, 0]} material={material} />
      <Torus args={[1, 0.5, 32, 32]} position={[-3.5, 0, 0]} material={material} />
    </>
  )
}

[mileshiroo]

Thanks so much for the help.

I figured out what the issue was. I'm creating custom materials using the three-custom-shader-material package, and the components are usually returned like this:

        <CustomShaderMaterial
            baseMaterial={THREE.MeshStandardMaterial}
            vertexShader={vert}
            fog={false}
            fragmentShader={frag}
            ref={ref}

            uniforms={{
                 time: { value: 0 },
                 noiseScaleBase: { value: 2739 },
                 fogColBase: { value: new THREE.Color('#e0e2c1') },
                 useNoise: { value: true }
             }}
        />

I found that if I created a shared material using a forward ref like you outlined above, I would get this error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

The culprit, it turns out, was initializing the material uniforms in the component's return statement, if I return the material like this and initialize the uniforms after the material mounts, the error goes away and the sharing works perfectly:

        <CustomShaderMaterial
            baseMaterial={THREE.MeshStandardMaterial}
            vertexShader={vert}
            fog={false}
            fragmentShader={frag}
            ref={ref}
        />

Hope this helps someone who ran into the same problem.

[FarazzShaikh]

Sounds like a bug in CSM, can you please open an issue with some details if you got the time? I’d appreciate it, thanks!