add forward ref to model

[Spoof14]

Trying to use useClick with <Model \/> requires a ref to be passed

[Spoof14]

Doesn't work. Seems <Model \/> can't take click / hover events?

[brianzinn]

I'd accept that PR without the package.json. For hovering a model it should work from the mesh ref, since it's using an action manager. Does this work: https://brianzinn.github.io/react-babylonjs/examples/models/props

The useHover should work, but the useClick is an issue as it will need to 'click' on the rootMesh I think that in many cases is a TransformNode...

[fabiopapajani]

Hello everyone! I'm using <Model /> in react-babylonjs to do those things:

• Gizmo for move & rotate the model
• Ref for making model clickable with const [ref] = useClick()

What I'm encountering is:

• <Model /> doesn't support ref
• <planeRotationGizmo /> doesn't support onDragEndObservable()

I'm wondering if I'm doing something wrong? Or is another way to do that?

Here is the example of what I'm trying to do: https://codesandbox.io/s/react-babylonjs-model-cb145w?file=/src/App.tsx

[brianzinn]

@fabiopapajani onDragEndObservable() isn't supported by planeRotationGizmo: https://doc.babylonjs.com/typedoc/classes/BABYLON.PlaneRotationGizmo

For the ref not working that's because the Model Functional Component would need a forward ref as per this PR - I would accept this PR if it didn't modify package.json and lock files.

[Spoof14]

I reverted all package json changes, but I'm just wondering, why is there the node > 16 but < 17 requirement?

[brianzinn]

I should have merged this a lot earlier. Works really well - Thank-you for your contribution.

const MyComponent = () => {
   const modelRef = useRef<Nullable<AbstractMesh>>(null);
   const checkModel = () => {
    console.log('model ref:', modelRef.current);
    if(modelRef.current) {
      modelRef.current.rotation.y += (Math.PI / 32);
    }
  }

  return (
     <button onClick={checkModel}>rotate model</button>
     <Engine ...>
      <Scene ...>
         ... lights/etc
         <Suspense ...>
            <Model ref={modelRef} />
         </Suspense>
      </Scene>
    </Engine>
  )
}

[brianzinn]

I can't merge this though due to conflicts. Do you mind rebasing @Spoof14 - you can just put your Model.tsx (no .yarn files).

[Spoof14]

I rebased and pushed. Can you check everything is working as expected? I haven't touched this for months

[brianzinn]

Thanks @Spoof14 - I'll double check and publish.