A module for grabbing objects in WebVR Three.js projects

You can download the project and view the examples.

git clone https://github.com/Sean-Bradley/GrabVR.git
cd GrabVR
npm install
npm run dev

Visit https://127.0.0.1:3000/

npm install grabvr

Import into your code

import ButtonVR from 'buttonvr'

Create a GrabVR object.

const grabVR = new GrabVR()

Create some Object3Ds and add then to the GrabVR grabables.

let grabable = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1.0, 1.0, 1.0),
    new THREE.MeshBasicMaterial({
        color: 0xff0066,
        wireframe: true
    })
)
scene.add(grabable)
grabVR.grabableObjects().push(grabable);

Add VR your controllers to the scene (see example code for better understanding)

const controllerGrip0 = renderer.xr.getControllerGrip(0)
controllerGrip0.addEventListener("connected", (e: any) => {
    controllerGrip0.add(lefthand)
    grabVR.add(0, controllerGrip0, e.data.gamepad)
    scene.add(controllerGrip0)
})

Update in the render loop.

grabVR.update(clock.getDelta());
renderer.render(scene, camera)

Basic GrabVR demo.

GrabVR demo using Cannonjs.

This is a typescript project consisting of two sub projects with there own tsconfigs.

To edit this example, then modify the files in ./src/client/ or ./src/server/

The projects will auto recompile if you started it by using npm run dev

Visit https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate for a Threejs TypeScript boilerplate containing many extra branches that demonstrate many examples of Threejs.

To help support this Threejs example, please take a moment to look at my official Threejs TypeScript course at

Three.js and TypeScript

Discount Coupons for all my courses can be found at https://sbcode.net/coupons