WebXR - How do I spin a mesh around a point

So I was hoping to be able to steer the helm of a pirate ship but I was never able to get the proper spinning technique.
I imagine the end result would be a lot like the puzzles in The Room VR, where you are able to move/rotate objects. Here’s an example with a timestamp where the player is grabbing and rotating many objects.

Here’s what I’ve got so far, it doesn’t behave nearly well enough to use. It only works in VR mode as well.


Here’s another example of a functionality I’d like to get to:

I wanted to find VRTK’s playground videos, maybe I will later, but this is enough of an example of a hinge

Physics interaction is already possible. If you define the right impostors, you can achieve this already. This is the physics playground, which shows a few of those interactions - https://playground.babylonjs.com/#B922X8#19

It is a non-optimized scene, so it does run at a relatively low fps, but it shows a lot of the interactions possible - you can push the amiga balls, you can punch the boxing poles, you can lift the boxes (and shoot them!). A lot of fun for the entire family.

BTW - @PirateJC:

I am pretty sure this is your field of expertise :slight_smile:

LOL indeed my area of expertise…LOL

+1 to everything @RaananW has said here.

I think everything that you’re trying to achieve can be done with Physics Joints.

Oh, physics might do something similar, but if I am going to do this in less than 13KB (the game jam is over now, but I want to learn solutions to all the roadblocks I encountered before next year) I won’t get to implement a physics system. I’m pretty sure it’s not included in the file we use.

I had another idea to make it easier to follow a point around. At startInteraction, I can make an AbstractMesh as a child of the controller and put it at the start point. Then add a registerBeforeRender function to get the angle by comparing the start point with the AbstractMesh’s absolute position.

It’s all kind of weird because I’m using a laser pointer to interact, which doesn’t match the real world very well. One of my posts is going to be about changing this pointer to a small collider near the controller mesh.


Alright, here’s something that rotates the right amount as you move it. It breaks if you grab it with two pointers, and won’t be happy if you spin the original model, so there’s some work to be done still.

is there a reason yall haven’t pointed me to this? Use Mesh Behaviors (eg. dragging) - Babylon.js Documentation

Is it debug only, or not customizable? Is it old?

The gizmos will work out of the box, but they have a ready-made ui that might be a bit customizable but mostly fixed. but yeah, if this is what you were looking for, the bounding box gizmo works out of the box