# WebXR + TransformControls

**URL:** <https://discourse.threejs.org/t/webxr-transformcontrols/57383>\
**Category:** Questions\
**Tags:** mobile, webxr, transform-controls\
**Created:** [October 25, 2023, 8:27am UTC](https://discourse.threejs.org/t/webxr-transformcontrols/57383 "2023-10-25T08:27:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sam\_O](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sam_o/32/41257_2.png) [@Sam\_O](https://discourse.threejs.org/u/Sam_O)\
**Post date:** [October 25, 2023, 8:27am UTC](https://discourse.threejs.org/t/webxr-transformcontrols/57383/1 "2023-10-25T08:27:01Z")

</div>

Put simply: Is it possible to implement [TransformControls](https://threejs.org/examples/?q=controls%20trans#misc_controls_transform) example within the [WebXR dragging](https://threejs.org/examples/?q=webxr#webxr_xr_dragging) example? Specifically on Chrome mobile in AR mode.

For my use case it would be great to enable more controlled object editing/transforms in AR on mobile. So far I can enable TransformControl’s attachment to selected objects but the drag behaviour supersedes any Control interaction and, using the dragging demo’s xr.getController and ControllerGrip, I can move the TransformController within the object but I’m unable to get the xr.controller to interact with or trigger the TransformControls actions ??

Perhaps this isn’t possible? I’ve seen on a recent X tweet that these two can work together, but maybe this is only in other devices with a hand controller??

Alternatively I have also tried enabling the webxr overlay mode to capture mouse (touch) positions to hopefully find a hacky way to activate the TransformControls but so far no luck.

If anyone can figure this out it would be very much appreciated. Thank you for reading this far and apologies for not having a concise code example.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 25, 2023, 9:06am UTC](https://discourse.threejs.org/t/webxr-transformcontrols/57383/2 "2023-10-25T09:06:50Z")

</div>

There is a PR that tries to implement VR support for `TransformControls`:

> <https://github.com/mrdoob/three.js/pull/24588>
>
> Adds support for ray-casting from controllers to activate the gizmo controls on …transform controls. In current state it only allows one controller hovering over the gizmo at once, if both are present on the gizmo the this.axis is set to null. Adds a dependency of the renderer to get xr controllers.  
> Video demo below: 
> https://youtu.be/SUi1vJAP3m4

Could you have a closer look at the code and give it a try?

---

<div class="post-metadata">

**Author:** ![Sam\_O](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sam_o/32/41257_2.png) [@Sam\_O](https://discourse.threejs.org/u/Sam_O)\
**Post date:** [October 25, 2023, 10:03am UTC](https://discourse.threejs.org/t/webxr-transformcontrols/57383/3 "2023-10-25T10:03:31Z")

</div>

Incredible, many thanks for getting back so soon.  
It works but as pointed out by [@charliebaby7065](https://www.youtube.com/channel/UCZeetfDFut227EqoXmRHn1w) it’s necessary to add the renderer as the third parameter:

```javascript
Let modifier = new TransformControls(camera, renderer.domElement, renderer)

```