Giving unique attributes to a single model based component being re-used made with GLTFJSX

[ashleymvanduzer]

Sorry if the title is confusing or wordy, kind of hard to put succinctly.

Anyway, say for example, I am returning multiples of a single model that has been componentized with GLTFJSX, like so:

below, Model12 is the GLTFJSX componentized model, and I am mapping over model state, setting unique props for each instance of the model based on the map.

 const [models, setModels] = useState([
    { pos: [0.15, 0, 0], scale: [1.75, 1.75, 1.75], color: modelColor },
    { pos: [0.35, 0, 0.05], scale: [1.75, 1.75, 1.75], color: model2Color },
  ]);

 const renderModel = () => {
    if (modelSize === "12") {
      return models.map((model, index) => {
        return (
          <Fragment>
            <Model12
              key={index}
              modelColor={model.color}
              position={model.pos}
              scale={model.scale}
            />
          </Fragment>
        );
      });
    }
  };

In this case, it will render two instances of the model, with the position prop being respected, as well as the scale, but the modelColor prop is not. That is to say, the models always render with the same color (specifically the last color given).

I am applying the colors in the component targeting each individual mesh. The meshes in both instances, of course, have the same names, which leads me to believe the problem lies here. Maybe there is an approach to applying a color across a model made up of multiple meshes within a group that I am unaware of, but I am starting to think the only way is to make separate components, like <Model12_1 />, <Model12_2 /> etc. which I feel is probably very incorrect.

I was playing around and found if you manually assign the material in each individual mesh within the model component, you can reassign the color and it works, say for example with a meshStandardMaterial or meshPhysicalMaterial, though I would like to find out if you can do this with the materials destructured from the useGLTF hook somehow as some of the materials have normal maps applied already, and I would like to preserve those.

I also noticed in the shoe example, that you can assign the material-color prop, which is awesome and so good to know! However, the material-color parameter still doesn't respect the individual color prop being passed to it for some reason or another.

If anyone has any pointers as to why this may be happening, or why it's not possible, or any advice at all I would very much appreciate the insight!

[drcmda]

what useLoader does is it caches the models data. gltfjsx allows you to re-use it by covering geometries and materials into new meshes which now can receive their own positions and such, but you are using the same materials and geometries between instances still. you can clone the data you get from useGLTF, or give these meshes their own material, then it will work.

[ashleymvanduzer]

Thanks for clarifying. And thanks for all your hard work! Really inspiring. In terms of what you said about the same materials and geometries, I was thinking as much. A few quick follow up questions: Are there any performance downsides to giving individual meshes made from GLTFJSXified models their own material? For now I have implemented this way, and am assigning the original model normal maps at materials.[materialName].normalMaps to the new material. It works well! Though in general is it better practice to clone? I just tried cloning as well and it works amazingly. Couldn't thank you enough.

[drcmda]

caching is always the fastest. using multiple materials will in scale become a problem so re-use what you can. when a mesh needs it's own material to be re-usable that's ok - as long as you know what you're doing. in that case you simply do:

<mesh geometry={robot} position={[1,2,3]}>
  <meshStandardMaterial />
</mesh>

no need to mess with source data because again, it's cached, so it will affect other instances.