WebXR - Catching and dropping objects

Questions
1

Hi @RaananW

I’m looking to be able to catch and drop objects in WebXR mode.
I try to figure out how to program it, I’m stuck, I don’t know how to do it.

I made a test using this code (Same position between Object and Controler during button is pressing)
https://playground.babylonjs.com/#CHF3KW#1

Oh great I love it, but it’s not perfect, lacks rotation, it might be better to parent the object to the controller (as in https://playground.babylonjs.com/#INITB4#2) during button is pressing.

I don’t know how to go any further.

Do you have other playgrounds that could help us ?
I opened this playground Babylon.js Playground
to apply any progress on this subject.

Thanks again for your help

3

Yes! I do :slight_smile:

I did a few demos with picking, some worked better than the others. The different ways to do it are:

  1. Parent the object with the controller and set the translation to be where you want it to be. This might be a bit off and won’t really work as you expected (mainly because the controller’s rotation is actually not what you expect it to be)
  2. Parent the object to the input source’s grip (if exists), which is an abstract mech in the WebXR Input Source class. This will make sure the object is parented in the right location.
  3. The way I am usually doing things (mainly because of physics!) is to calculate the position of the object on each frame and position it correctly. I am doing that using the getWorldPointerRayToRef function on the controller. The reason I am usually using this function is simple - I usually add physics to the object, and parented physics object are usually compounded, which I want to avoid in my case.

Here is an example of how I solved it in a quick tennis demo I implemented a few months back:

https://playground.babylonjs.com/#CHF3KW#39

It is triggered when the left main component (the trigger usually) is pressed. Most of the code there is physics (mainly - setting the right linear velocity so you can “throw” the ball). The interesting part is:

controller.getWorldPointerRayToRef(tmpRay, true);
tmpRay.direction.scaleInPlace(1.2); // 1.2 units away
const position = controller.grip ? controller.grip.position : controller.pointer.position;
ball.position.copyFrom(position);
ball.position.addInPlace(tmpRay.direction);

I hope this gets you going in the right direction!

2 Likes