How to set rotation of 3D mesh (avatar) to that of the XR camera

Hi all,

I have an mesh representing the VR user in the scene. How can I modify its rotation so that’s its direction mirrors that of the device?

Kind regards,

Maybe @syntheticmagus can help

Hi Mark,

Generally speaking, If you want a mesh to mimic the motions of the XR camera, could you do that by just copying the position vector and the rotation quaternion from the WebXRCamera? If you haven’t given that a shot, I’d recommend trying that first; then, if there are complications, could you make a Playground that shows them?

Thanks syntheticmagus. Sorry for the late reply, we just had our Easter holiday in the UK, I’ll get my code in to a playground and post a little later

Sample code here:

The model (elf) doesn’t appear to move or rotate according to the WebXR camera, I’ve tested on Oculus Quest 2 and using the WebXR Chrome extension.

Adding back @syntheticmagus and @RaananW which will be back tomorrow.

Hi mgbnguyen,

I haven’t delved too deeply into why, but it looks like something about your model is preventing manipulating the elf itself from having any effect. If you manipulate the elf’s parent node instead, it appears to move; does this do something closer to what you were intending?

Available Mesh Elf | Babylon.js Playground

That seems much better!

In the line: const elf = scene.getMeshByID("elf").parent; what does the parent refer to?

Glad it’s working! glTF models always have a __root__ node which is the topmost parent of the model’s hierarchy; in this case, that’s the direct parent of the node called elf. Often, if you’re manipulating a model programmatically, it’s better to do so from the __root__ than from one of the model’s internal nodes, as there can be problems. I saw all this and came up with this suggestion by looking at the scene in the Inspector and playing around with the rotations of the elf and __root__ nodes. In case you aren’t familiar with the Inspector, you can access it in the Playground by pressing the box-and-gear button you see in the top left corner of the screenshot below. It’s a fantastic tool for debugging issues like this.

Hope this helps, and best of luck!

I didn’t know about the root in gltf nor the Babylon inspector. Thanks!