Provide a way to access three.js objects from child components

[gouldingken]

If this feature already exists, I couldn't find the solution.

I'm looking to add my own components that get treated like native meshes etc in terms of being able to apply materials etc.

The pattern I'm looking to use is as follows:

  <SpeckleStreamGeom token={token} objectUrl={objectUrl('677199f8c5e508452bab48c5e639a1f8')}>
      <meshBasicMaterial color={0xfff1ef} attach="material" />
  </SpeckleStreamGeom>

If I used a 'mesh' react node within this component, I could pass the children on. But in this case I can't do that because I'm using a loader within SpeckleStreamGeom to grab geometry from a Speckle stream. The mesh objects have all been created by the loader. I basically want to 'forward' all the child nodes (e.g. meshBasicMaterial) onto those code-created mesh objects.

I don't think there is a way to do that with the reconciler as its currently set up. I'd appreciate any input if there is a more elegant way to handle this.

export default function SpeckleStreamGeom(props) {
    const {token, objectUrl} = props;

    const options = {
        token, objectUrl
    };

    const speckleGroup = useLoader(SpeckleLoader, JSON.stringify(options));

    //TODO access materials etc here and apply to all the loaded geometries.
    console.log(props.children);

    return (
        <Suspense fallback={<Loader />}>
            <primitive object={speckleGroup} />
        </Suspense>
    )
}

[CodyJasonBennett]

Are you trying to create something similar to https://github.com/pmndrs/gltfjsx or does this have to do with the attach API?

[gouldingken]

Yes, I basically want to be able to apply the "attach" command to the meshes I've received from the loader in order to assign the materials.

That's a cool tool, but my use case is to grab geometry from web-based geometry streams. I guess I could do something declarative using the data in the stream, but I'm trying to get it working with a three.js loader class.

I'd prefer to use the react-three-fiber useLoader pattern for grabbing the geometry. Unlike some of the other loader examples that contain full scenes complete with materials, these will just be raw meshes. I'm trying to find an elegant, declarative way to specify materials (and other mesh properties) that will be applied to the meshes from the loader.

[gouldingken]

for more context, this is what I'm trying to avoid doing (replicating all the options for materials etc as props):

    <SpeckleStreamGeom color={0xff9900} materialType={'basic'} token={token} objectUrl={objectUrl('aaa')}/>
    <SpeckleStreamGeom color={0x33ff00} materialType={'phong'} token={token} objectUrl={objectUrl('bbb')}/>
    <SpeckleStreamGeom color={0xff00ff} materialType={'basic'} token={token} objectUrl={objectUrl('ccc')} />

const getMaterialByType = (materialType)=> {
    if (materialType === 'phong') return new MeshPhongMaterial();
    return new MeshBasicMaterial();
}

export default function SpeckleStreamGeom(props) {
    const {token, objectUrl, color, materialType} = props;

    const options = {
        token, objectUrl
    };

    const speckleGroup = useLoader(SpeckleLoader, JSON.stringify(options));

    if (color) {
        const material = getMaterialByType(materialType);
        material.color = new Color(color);
        speckleGroup.traverse(function(obj){
            obj.material = material;
        });
    }

...

[drcmda]

you can do that, you can attach stuff to components ootb. real world example: https://github.com/pmndrs/drei#instances

<Instances
  limit={1000} // Optional: max amount of items (for calculating buffer size)
  range={1000} // Optional: draw-range
>
  <boxGeometry />
  <meshStandardMaterial />

this works because the Instances component spreads props over its view:

function Instances(props) {
  return <mesh {...props} ...

as for the 2nd part

    const speckleGroup = useLoader(SpeckleLoader, JSON.stringify(options));
    //TODO access materials etc here and apply to all the loaded geometries.
    console.log(props.children);

    return (
        <Suspense fallback={<Loader />}>
            <primitive object={speckleGroup} />
        </Suspense>

the suspense is not correct. useLoader is causing the component to suspend, which then triggers the outmost suspense boundary.

[drcmda]

it seems to me your problem is primitive. you shouldn't try to give a primitive declarative children because it's an external, imperative object. you could still just spread props though and it would basically work (materials, etc) but .... that would be anti react and anti three. first of all, most loaders give you a scene or a group, these dont have materials, their nested innards do, and that's where all bets are off. mutating primitives will open a gaping hell hole, i would recommend not doing it.

you can only declare something because you know it, that's why gltfjsx works. if the data is unknown, you can't declare it. unless you know where it needs to be applied to.

[drcmda]

ps heres an example of a component that loads and that takes children: https://codesandbox.io/s/gltf-simple-example-forked-xuljn?file=/src/App.js

but again, the only reason this works is because i know the structure. if i didn't then there would be no other way than to traverse imperatively and mutate the materials, that's what separates these two worlds: imperative and declarative.

[drcmda]

if you know the structure then you can declare it, you don't need primitive object, and then your problem is solved. if you don't know the structure you must traverse and then you can't declare it (outright).

you do know the structure

but you don't deal with gltfs, then you can use useGraph which gives you flat, named collections for all meshes and materials

const scene = useLoader(...)
const { nodes, materials } = useGraph(scene)
return (
  <group>
    <mesh geometry={nodes.foo.geometry} {...someProps} />
    <mesh geometry={nodes.bar.geometry} {...moreProps} />

you don't know the structure

react has createPortal for that. you can portal children into externals:

function Foo({ children }) {
  const [mesh] = useState(() => new THREE.Mesh())
  const scene = useLoader(...)
  // Called before render,  "mesh" now contains your children
  useLayoutEffect(() => scene.traverse(obj => (obj.material) && (obj.material = mesh.material)), [scene, children])
  return (
    <>
      <primitive object={scene} />
      {createPortal(children, mesh)}

<Foo>
  <meshBasicMaterial color="red" />

[drcmda]

I like your example there, but isn't the geometry already created by the loader? So aren't you creating it twice in that scenario?

no. where do you see it being created twice? it simply links it up to a new mesh. this is also the only way that allows you to re-use models, something which in imperative threejs normally doesn't exist without cloning.

[gouldingken]

Sorry, I meant the mesh, not the geometry. I see that you're reusing the geometry. But isn't nodes.Mesh_0001 an actual Mesh object created by the loader?

[gouldingken]

Thank you so much for the help. The createPortal solution works perfectly for this use case and feels super elegant from my humble position!

[drcmda]

Sorry, I meant the mesh, not the geometry. I see that you're reusing the geometry. But isn't nodes.Mesh_0001 an actual Mesh object created by the loader?

a mesh is just a container, an empty class with links towards geometry/material. the cost of creating a mesh is nothing, but this is what enables https://codesandbox.io/s/re-using-gltfs-dix1y