How can I change the WebXR Controller Behavior + Looking with a Button Click

:question: How can I change the WebXR Controller with a Button Click :question:

General My Project: Augmented Reality Jigsaw Puzzle. The Controller is for clicking multiple button on a gui plane. You click a button “Select Board” to select a detected plane by the planeDetector. This is your desk/board for the Puzzle Pieces. Afterwards you can “Start the game” with another button. Now the Puzzle Pieces are attached to the left controller and you grab and drop it on the desk.

So this are the states (Looking + Behaviour) the controller should change:

  1. Normal Controller + Highlighting Meshes pointed at.
  2. Normal Controller + Removing all Planes besides one pointed at (out of PlaneDetector Array)
  3. Controller with a Plane attached to it + Grab and Drop the Plane at the Controller to the Desk/Board (Last Plane in PlaneDetectorArray)

short code example:

longer example

Without the if statements, all three are working. My Code is, in my understanding, not working because the controller can only be initialized once. But how can I change the controller after initializing? I tried different methods outside the Obersable to seize the controller looking and behaviour (like xr.input.controllers.forEach, controller.dispose, ), but nothing fires again after changing a boolean/ clicking a button.

With the documentation I could find onControllerAddedObservable, onMotionControllerInitObservable, onMeshLoadedObservable, onDisposeObservable. But there is no updateObservable like at the planeDetector. Sadly I couldn’t find similar problems about this specific problem anywhere. What am I missing?

Thank you really much for every little advice or idea. For further information feel free to ask and I try to deliver the missing information.

@RaananW Since your the (almost) almighty webxr babylonjs expert, I felt free to add you directly. It would be an honour if you could take a look at the problem

So! I am not entirely sure what the use case is, and what exactly you mean by changing controller :slight_smile:
I mean - I understand you have a few states to a single controller, but why would you need 3 controllers for that (unless I am missing something).

To answer your direct question - controllera re initilized by the webxr environment, so you can’t initialize the same controller 3 times. What you CAN do is have some form of state control for your controller. Attach yourself to the controller’s observables, and according to the current state of the experience, react differently to the user input.

And again - if I misunderstood something, please let me know :slight_smile:

Thank you really much. You understood me right. There is no reason to load multiple controller in my project. My whacky plan was to detach and reload the controller multiple times to achieve different interactions with scene, because I didn’t know another way.

Now I solved it with AppState and the ActionManager

For anybody with similar issues, here are my change for a working approach:

1 Like

Usually i wouldn’t tell you - no it is not possible :slight_smile: But in the case of webxr it really is, because the controllers are actually updated by the underlying system and not us :slight_smile: