How can I add a material to a group?

[tytrdev]

Hey, folks. I'm using OBJLoader to load in an obj model. Here's how I'm currently rendering that:

function Model(props: ModelProps) {
  console.log('Model color: ', props.color);
  const group = useRef();
  const obj = useLoader(OBJLoader, '/models/Model.obj');
  return (
    <group ref={group}>
      <primitive object={obj} />
    </group>
  );
}

What I need is to be able to add a material or nest the group under a mesh so that I can add a standard material to it. You can see me logging out a color that I intend to use for the material.

[drcmda]

well that's the main difference between being able to declaratively write out stuff as opposed to dumping it into the scene. in plain threejs people will now start to traverse and mutate - which is ugly. but you could do that, either useMemo or useLayoutEffect.

the best you could do is leave objloader behind and use this: https://github.com/pmndrs/gltfjsx it's a small tool that creates a declarative graph of the model data so that you can easily make adjustments.

what you also can do is use the useGraph hook: https://github.com/pmndrs/react-three-fiber/blob/master/api.md#useGraph but you still have to create the nested graph by hand, all those groups, their positions, scale and rotation.