Closed br-matt closed 2 years ago
what about something like this - the models are a hierarchy, so will let you choose the ref.
// I haven't tried this, but
const myRef = useRef(null);
useClick((ev) => console.log(ev), myRef);
const onModelLoaded = (loadedModel) => {
// choose a mesh here:
myRef.current = ...;
}
return (
<Model ... />
)
You may have more success with declarative syntax by not using the Model
component and attaching directly to meshes with refs. Here is the component:
https://github.com/brianzinn/react-babylonjs/blob/master/src/customComponents/Model.tsx
The first approach suggested seemed to just never register with the hook until a re-render happens and than all sorts of weird bugs. The second approach still requires Suspense
it turns out and back to the initial issue. I was able to use forwardRef
to get it working though:
const PortalMesh = React.forwardRef(({baseUrl, fileUrl, itemId, index, showVariantMenu, handleVariantClick}, ref) => {
const sceneLoaderResults = useSceneLoader(
baseUrl,
fileUrl,
null,
null
);
useClick((evt) => {
handleVariantClick(itemId)
showVariantMenu(evt.sourceEvent)
}, ref)
useEffect(() => {
return () => {
sceneLoaderResults.dispose();
}
}, []);
if (sceneLoaderResults.status !== "Loaded") {
return null;
}
return <Mesh
ref={ref}
name={'abcd' + index}
metaData={{test: 'data'}}
fromInstance={sceneLoaderResults.meshes[1]}
></Mesh>
})
export default PortalMesh
<Suspense fallback={null}>
<PortalMesh ... />
</Suspense>
One side question, how come the metaData prop does not make it to the mesh ? The only metadata it ends up with is the key 'gltf'
I need to have the renderer update the mesh - currently that prop is ignored: https://github.com/brianzinn/react-babylonjs/blob/master/src/generatedCode.ts#L207
Hadn't noticed metadata being set to 'gltf' - If it's needed anywhere post-loading then would want to destructure what I am sending through. ie:
mesh.metadata = {...mesh.metadata, ...props.metadata};
I don't have that built-in as a way to update yet. I thought internal usage of metadata by framework was done on reservedDataStore
. I suppose this can be safely overwritten - probably it's used by the loader...
Yep, that works for now for metadata, thanks !
Thanks - I wish there was a cleaner solution. I think adding support for babylon target to https://github.com/pmndrs/gltfjsx would be really, really great.
https://github.com/brianzinn/react-babylonjs/issues/87#issuecomment-781600205
It seems React 17 does not allow that, throwing the error:
Is there some known work around for this ? I need the ref for using the useClick hooks and others on