VR Controller Grab & Drop

VR controller-based object interactions with WebXR-powered physics.

< Back to templates

This template demonstrates how you can use controllers to pick up and drop objects. It uses the Physics and WebXR packages to create a simple but realistic interactive scene.

There are 2 Physics Actions setup on the Left / Right controller components respectively. These set the event in which the objects should be grabbed and toggled (dropped).

Both controllers also come with a RigidbodyGrabber. This RigidbodyGrabber allows an entity to grab dynamic rigidbodies to move them around. Only one object can be grabbed at a time per grabber. There are editable properties on the RigidbodyGrabber, so be sure to check that out if you start from this template.

This template has the GrabAtCurrentDistance property on the RigidbodyGrabber set to true, meaning it will be grabbed at its current distance, rather than jumping to the RigidbodyGrabber position. Feel free to update this based on your project requirements.

Please note: this is a VR template but will also work with Mixed Reality on supported headsets.
If you'd like to add your own grabbable mesh / 3D model, make sure to add a Physics -> Rigid Body behavior and set theGrabbable property to true.

This project includes a default splash page - a 'launch' screen shown to the user when they first land on your page. It's important for both technical and user experience related reasons. You can customize it in the index.html file.

Rendering Engine

three.js

Supported Browsers

Google Chrome
Magic Leap 2
Meta Quest

Scripting Language

TypeScript