three.js/examples/jsm/webxr/XRHandSpheresModel.js

import {
	SphereBufferGeometry,
	MeshStandardMaterial,
	Mesh,
	Group
} from "../../../build/three.module.js";

class XRHandSpheresModel {

	constructor( controller/*, handedness */ ) {

		this.controller = controller;

	  this.envMap = null;

		this.handMesh = new Group();
		this.controller.add(this.handMesh);

		if ( window.XRHand ) {

			var geometry = new SphereBufferGeometry( 1, 10, 10 );
			var jointMaterial = new MeshStandardMaterial( { color: 0x000000, roughness: 0.2, metalness: 0.8 } );
			var tipMaterial = new MeshStandardMaterial( { color: 0x333333, roughness: 0.2, metalness: 0.8 } );

			const tipIndexes = [
				XRHand.THUMB_PHALANX_TIP,
				XRHand.INDEX_PHALANX_TIP,
				XRHand.MIDDLE_PHALANX_TIP,
				XRHand.RING_PHALANX_TIP,
				XRHand.LITTLE_PHALANX_TIP
			];
			for ( let i = 0; i <= XRHand.LITTLE_PHALANX_TIP; i ++ ) {

				var cube = new Mesh( geometry, tipIndexes.indexOf( i ) !== - 1 ? tipMaterial : jointMaterial );
				cube.castShadow = true;
				this.handMesh.add( cube );

			}

		}

	}

	updateMesh() {

		const defaultRadius = 0.008;
		const objects = this.handMesh.children;

		// XR Joints
		const XRJoints = this.controller.joints;
		for ( var i = 0; i < objects.length; i ++ ) {

			const jointMesh = objects[ i ];
			const XRJoint = XRJoints[ i ];

			if ( XRJoint.visible ) {

				jointMesh.position.copy( XRJoint.position );
				jointMesh.quaternion.copy( XRJoint.quaternion );
				jointMesh.scale.setScalar( XRJoint.jointRadius || defaultRadius );

			}

			jointMesh.visible = XRJoint.visible;

		}

	}

}

export { XRHandSpheresModel };