WebXR Hand Tracking Playground

A collection of interactive WebXR demos that explore hand tracking, VR interactions, physics, water/visual effects, and VRM character animation using Three.js.

Browse demos View on GitHub
About this project

Built with Three.js, WebXR, TypeScript, and Webpack. Best experienced on a headset with hand tracking (e.g., Meta Quest), but most scenes also open on desktop/mobile browsers.

Hand tracking VRM animation Physics Post‑processing Water & ocean

Demos

Catch and throw the ball

A basketball is dropped from the sky. You can grab it and throw it away.

Get the ball with hand gesture

You are in an empty basketball court. Open your hand to get the ball.

Dance

Dance

Start the dance by opening your hand.

VRM model animation

VRM model animation

Start the animation by opening your hand.

VRM model dance

VRM model dance

Start the dance by opening your hand.

Salsa bar (fast)

Salsa bar (fast)

Start the dance by opening your hand.

Salsa bar (slow)

Salsa bar (slow)

2 VRM models animated with the complete Salsa BVH collection, originally from CMU.

Salsa lesson

Salsa lesson

Follow the leader’s hand and shoe moves. Open your hand to resume, close to pause. Camera: Thumb+Ring = orbit camera; Thumb+Pinky = orbit origin.

Elements

Elements

Atom Visualizer.

Ocean

Ocean

Three.js ocean demo.

Ship

Ship

Three.js ocean + The Black Pearl + Jack Sparrow.

Beach

Beach

Beach.

BVH test

BVH test

Drunk walking 10‑minute rigged pirate.

BVH test 2

BVH test 2

Jack Sparrow drunk walking on a tilting plane.

Salsa party

Salsa party

Victorian Greenhouse. 8 VRM models animated with the Salsa BVH collection (CMU).

Salsa party 2

Salsa party 2

“Ehemalige Kleeblatt Tankstelle Hannover”. 6 VRM models animated with Salsa BVH (CMU).

Hand input profiles

Hand input profiles

Ported from Three.js examples.

Salsa party 3

Salsa party 3

“Ehemalige Kleeblatt Tankstelle Hannover”. Three.js VR hand models + 2 VRM models (Salsa BVH). JS implementation.

Salsa party 4

Salsa party 4

“Ehemalige Kleeblatt Tankstelle Hannover”. 6 VRM models (Salsa BVH). Control animation with hand gestures.

Mediapipe Face Raccoon

Mediapipe Face Raccoon

Face tracking fun.

Mediapipe Face VRM

Mediapipe Face VRM

Drive a VRM with Mediapipe face tracking.

WebXR postprocessing

WebXR postprocessing

Three triangles with Bloom effect (ported from Cody Bennet’s PR).

Unreal Bloom (WebXR)

Unreal Bloom (WebXR)

Ported from Three.js.

Moon walk

Moon walk

Apollo 11 moon landing scene.

Water reflection + refraction

Water reflection + refraction

Ported from Three.js.

Water caustics

Water caustics

Ported from Three.js Water.

Physics Ammo Break

Physics Ammo Break

Ported from Three.js Physics Ammo Break demo.

Physics Ammo Break 2

Ammo Break demo with movable target.

Built with

Three.js WebXR Mediapipe TypeScript Webpack

Tested with

Meta Quest Chrome

Source code

GitHub Repository