Managed GLB for React Three Fiber

[dsdevgit]

Hi there,

I'd like to share something I'm currently using at work. It's called Managed GLB for React Three Fiber—a wrapper around the glb/gltf loader that allows you to handle and customize only selected nodes in JSX, instead of generating a full JSX file. I use some GLB files with complex hierarchies, and gltfjsx generates overly large JSX files. Managed GLB loads 3D models as they are and allows customization of only the needed nodes.

In short, it looks like

export const MyModel = (props) => {
  const custom = {
    // override material :
    ['node_001']: (Node, node) => (
      <Node>
        <meshStandardMaterial transparent opacity={0.1} />
      </Node>
    ),
    // or extend material ( you able to add {...node.material} to extend props of existing material)
    ['node_001']: (Node, node) => (
      <Node>
        <meshStandardMaterial {...node.material} transparent opacity={0.1} />
      </Node>
    ),

    // change scale (position, rotation, etc.):
    ['node_002']: (Node) => <Node scale={0.1} />,

    // remove node:
    ['node_003']: () => null,

    // hide node:
    ['node_004']: (Node) => <Node visible={false} />,

    // several nodes selection
    ['node_4|node_5|node_6']: (Node) => <Node />,

    /// etc..
  };

  return <ManagedGLB castShadows recieveShadows path={glb} custom={custom} {...props} />;
};

You can find more information here:

https://www.npmjs.com/package/r3f-managed-glb
https://github.com/dsdevgit/r3f-managed-glb

Best,
Dennis