How to get updated position of sphere using Gizmo in react-babylonjs

Questions
1

When I added the Gizmo to the sphere it’s able to move to the specified direction, but once I changes the initial position of the sphere, how to fetch the new position of the sphere after the movement using Gizmo in react-babylonjs
The sample code I provided as like below

<sphere name={‘sphere’ + i } key={‘sphere’ + i } position={new Vector3(x,y,z)} diameter={10.0}>
<StandardMaterial name={‘sphere’ + i } alpha={10} diffuseColor={ new Color3(1, 1, 1) } />

<positionGizmo updateScale={true} onDragEndObservable={(a) => {console.log(“Position -->”, a)}}
updateGizmoPositionToMatchAttachedMesh={true}/>

Can anyone please provide the solution for fetching the updated position of sphere?
Thanks in advance.

2

I think you should set the position of sphere to component state and update it in the onDragEndObservable event

3 
function Sphere() {
  const sphereRef = useRef<BABYLON.Mesh>(null);

  return (
    <sphere name="sphere" ref={sphereRef}>
      <standardMaterial name="sphere-mat" />
      <positionGizmo
        onDragEndObservable={(e: BABYLON.Vector3) => {
          console.log(sphereRef.current?.position);
        }}
      />
    </sphere>
  );
}
3 Likes
4

Thank you. It worked. :+1:

5

And also while reloading the corresponding page with the above code I am getting an error like

Uncaught TypeError: Cannot read properties of null (reading ‘globalPosition’)
at PositionGizmo._update (gizmo.ts:280:1)

@zhangyahan Can you please help me?

6

I didn’t find the problem you mentioned. Can you give me a codesandbox or repo

7

@zhangyahan @Evgeni_Popov
I implement the Gizmo to the yellow colored sphere, While I pan the model or make any movement to the model the Gizmo has disappeared and this console error is showing.
After the error displayed, it’s unable to pan the model (seems like it get stuck)

3
31087×256 31.8 KB

8

cc @brianzinn the daddy ot the react-babylonjs framework

9

Are you able to provide a repro? It’s working for me in above playground as well. It may have something to do with reloading the corresponding page that you mentioned above - not sure what that means exactly.