Introduce XRHandSphereModel

examples/jsm/webxr/WebXRHandController.js

@@ -1,80 +1,6 @@
 import {
-	Object3D,
-	SphereBufferGeometry,
-	MeshStandardMaterial,
-	Mesh
-} from "../../../build/three.module.js";
-
-function XRHandModel( controller ) {
-
-	Object3D.call( this );
-
-	this.controller = controller;
-	this.envMap = null;
-
-	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.add( cube );
-
-		}
-
-	}
-
-}
-
-XRHandModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
-
-	constructor: XRHandModel,
-
-	updateMatrixWorld: function ( force ) {
-
-		Object3D.prototype.updateMatrixWorld.call( this, force );
-
-		this.updateMesh();
-
-	},
-
-	updateMesh: function () {
-
-		const defaultRadius = 0.008;
-
-		// XR Joints
-		const XRJoints = this.controller.joints;
-		for ( var i = 0; i < this.children.length; i ++ ) {
-
-			const jointMesh = this.children[ 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;
-
-		}
-
-	}
-} );
-
+	XRHandSpheresModel
+} from "./XRHandSpheresModel.js";
 
 var XRHandModelFactory = ( function () {
 
@@ -84,9 +10,9 @@ var XRHandModelFactory = ( function () {
 
 		constructor: XRHandModelFactory,
 
-		createHandModel: function ( controller ) {
+		createHandModel: function ( controller, profile ) {
 
-			const handModel = new XRHandModel( controller );
+			const handModel = new XRHandSpheresModel( controller );
 			let scene = null;
 
 			controller.addEventListener( 'connected', ( event ) => {

examples/jsm/webxr/XRHandSpheresModel.js

@@ -0,0 +1,78 @@
+import {
+	Object3D,
+	SphereBufferGeometry,
+	MeshStandardMaterial,
+	Mesh
+} from "../../../build/three.module.js";
+
+function XRHandSpheresModel( controller ) {
+
+	Object3D.call( this );
+
+	this.controller = controller;
+	this.envMap = null;
+
+	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.add( cube );
+
+		}
+
+	}
+
+}
+
+XRHandSpheresModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
+
+	constructor: XRHandModel,
+
+	updateMatrixWorld: function ( force ) {
+
+		Object3D.prototype.updateMatrixWorld.call( this, force );
+
+		this.updateMesh();
+
+	},
+
+	updateMesh: function () {
+
+		const defaultRadius = 0.008;
+
+		// XR Joints
+		const XRJoints = this.controller.joints;
+		for ( var i = 0; i < this.children.length; i ++ ) {
+
+			const jointMesh = this.children[ 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 };

examples/webxr_vr_handinput_mesh.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js vr - hand and controller - simple</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - hand and controller support
+		</div>
+
+		<script type="module">
+
+			import * as THREE from '../build/three.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
+			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
+			import { XRHandModelFactory } from './jsm/webxr/WebXRHandController.js';
+
+			var container;
+			var camera, scene, renderer;
+			var hand1, hand2;
+			var controller1, controller2;
+			var controllerGrip1, controllerGrip2;
+
+			var controls;
+
+			init();
+			animate();
+
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				scene = new THREE.Scene();
+				window.scene = scene;
+				scene.background = new THREE.Color( 0x808080 );
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
+				camera.position.set( 0, 1.6, 3 );
+
+				controls = new OrbitControls( camera, container );
+				controls.target.set( 0, 1.6, 0 );
+				controls.update();
+
+				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				var material = new THREE.MeshStandardMaterial( {
+					color: 0x333333,
+					roughness: 1.0,
+					metalness: 0.0
+				} );
+				var floor = new THREE.Mesh( geometry, material );
+				floor.rotation.x = - Math.PI / 2;
+				floor.receiveShadow = true;
+				scene.add( floor );
+
+				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+
+				var light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 0, 6, 0 );
+				light.castShadow = true;
+				light.shadow.camera.top = 2;
+				light.shadow.camera.bottom = - 2;
+				light.shadow.camera.right = 2;
+				light.shadow.camera.left = - 2;
+				light.shadow.mapSize.set( 4096, 4096 );
+				scene.add( light );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.shadowMap.enabled = true;
+				renderer.xr.enabled = true;
+
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( VRButton.createButton( renderer ) );
+
+				// controllers
+
+				controller1 = renderer.xr.getController( 0 );
+				scene.add( controller1 );
+
+				controller2 = renderer.xr.getController( 1 );
+				scene.add( controller2 );
+
+				var controllerModelFactory = new XRControllerModelFactory();
+				var handModelFactory = new XRHandModelFactory();
+
+				// Hand 1
+
+				controllerGrip1 = renderer.xr.getControllerGrip( 0 );
+				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
+				scene.add( controllerGrip1 );
+
+				hand1 = renderer.xr.getHand( 0 );
+				hand1.add( handModelFactory.createHandModel( hand1 ) );
+
+				scene.add( hand1 );
+
+				// Hand 2
+
+				controllerGrip2 = renderer.xr.getControllerGrip( 1 );
+				controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
+				scene.add( controllerGrip2 );
+
+				hand2 = renderer.xr.getHand( 1 );
+				hand2.add( handModelFactory.createHandModel( hand2 ) );
+				scene.add( hand2 );
+
+				//
+
+				var geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
+
+				var line = new THREE.Line( geometry );
+				line.name = 'line';
+				line.scale.z = 5;
+
+				controller1.add( line.clone() );
+				controller2.add( line.clone() );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+			//
+
+			function animate() {
+
+				renderer.setAnimationLoop( render );
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>