import { Mesh, MeshBasicMaterial, Object3D, SphereGeometry, } from 'three'; import { GLTFLoader } from '../loaders/GLTFLoader.js'; import { Constants as MotionControllerConstants, fetchProfile, MotionController } from '../libs/motion-controllers.module.js'; const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles'; const DEFAULT_PROFILE = 'generic-trigger'; class XRControllerModel extends Object3D { constructor() { super(); this.motionController = null; this.envMap = null; } setEnvironmentMap( envMap ) { if ( this.envMap == envMap ) { return this; } this.envMap = envMap; this.traverse( ( child ) => { if ( child.isMesh ) { child.material.envMap = this.envMap; child.material.needsUpdate = true; } } ); return this; } /** * Polls data from the XRInputSource and updates the model's components to match * the real world data */ updateMatrixWorld( force ) { super.updateMatrixWorld( force ); if ( ! this.motionController ) return; // Cause the MotionController to poll the Gamepad for data this.motionController.updateFromGamepad(); // Update the 3D model to reflect the button, thumbstick, and touchpad state Object.values( this.motionController.components ).forEach( ( component ) => { // Update node data based on the visual responses' current states Object.values( component.visualResponses ).forEach( ( visualResponse ) => { const { valueNode, minNode, maxNode, value, valueNodeProperty } = visualResponse; // Skip if the visual response node is not found. No error is needed, // because it will have been reported at load time. if ( ! valueNode ) return; // Calculate the new properties based on the weight supplied if ( valueNodeProperty === MotionControllerConstants.VisualResponseProperty.VISIBILITY ) { valueNode.visible = value; } else if ( valueNodeProperty === MotionControllerConstants.VisualResponseProperty.TRANSFORM ) { valueNode.quaternion.slerpQuaternions( minNode.quaternion, maxNode.quaternion, value ); valueNode.position.lerpVectors( minNode.position, maxNode.position, value ); } } ); } ); } } /** * Walks the model's tree to find the nodes needed to animate the components and * saves them to the motionContoller components for use in the frame loop. When * touchpads are found, attaches a touch dot to them. */ function findNodes( motionController, scene ) { // Loop through the components and find the nodes needed for each components' visual responses Object.values( motionController.components ).forEach( ( component ) => { const { type, touchPointNodeName, visualResponses } = component; if ( type === MotionControllerConstants.ComponentType.TOUCHPAD ) { component.touchPointNode = scene.getObjectByName( touchPointNodeName ); if ( component.touchPointNode ) { // Attach a touch dot to the touchpad. const sphereGeometry = new SphereGeometry( 0.001 ); const material = new MeshBasicMaterial( { color: 0x0000FF } ); const sphere = new Mesh( sphereGeometry, material ); component.touchPointNode.add( sphere ); } else { console.warn( `Could not find touch dot, ${component.touchPointNodeName}, in touchpad component ${component.id}` ); } } // Loop through all the visual responses to be applied to this component Object.values( visualResponses ).forEach( ( visualResponse ) => { const { valueNodeName, minNodeName, maxNodeName, valueNodeProperty } = visualResponse; // If animating a transform, find the two nodes to be interpolated between. if ( valueNodeProperty === MotionControllerConstants.VisualResponseProperty.TRANSFORM ) { visualResponse.minNode = scene.getObjectByName( minNodeName ); visualResponse.maxNode = scene.getObjectByName( maxNodeName ); // If the extents cannot be found, skip this animation if ( ! visualResponse.minNode ) { console.warn( `Could not find ${minNodeName} in the model` ); return; } if ( ! visualResponse.maxNode ) { console.warn( `Could not find ${maxNodeName} in the model` ); return; } } // If the target node cannot be found, skip this animation visualResponse.valueNode = scene.getObjectByName( valueNodeName ); if ( ! visualResponse.valueNode ) { console.warn( `Could not find ${valueNodeName} in the model` ); } } ); } ); } function addAssetSceneToControllerModel( controllerModel, scene ) { // Find the nodes needed for animation and cache them on the motionController. findNodes( controllerModel.motionController, scene ); // Apply any environment map that the mesh already has set. if ( controllerModel.envMap ) { scene.traverse( ( child ) => { if ( child.isMesh ) { child.material.envMap = controllerModel.envMap; child.material.needsUpdate = true; } } ); } // Add the glTF scene to the controllerModel. controllerModel.add( scene ); } class XRControllerModelFactory { constructor( gltfLoader = null, onLoad = null ) { this.gltfLoader = gltfLoader; this.path = DEFAULT_PROFILES_PATH; this._assetCache = {}; this.onLoad = onLoad; // If a GLTFLoader wasn't supplied to the constructor create a new one. if ( ! this.gltfLoader ) { this.gltfLoader = new GLTFLoader(); } } setPath( path ) { this.path = path; return this; } createControllerModel( controller ) { const controllerModel = new XRControllerModel(); let scene = null; controller.addEventListener( 'connected', ( event ) => { const xrInputSource = event.data; if ( xrInputSource.targetRayMode !== 'tracked-pointer' || ! xrInputSource.gamepad ) return; fetchProfile( xrInputSource, this.path, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => { controllerModel.motionController = new MotionController( xrInputSource, profile, assetPath ); const cachedAsset = this._assetCache[ controllerModel.motionController.assetUrl ]; if ( cachedAsset ) { scene = cachedAsset.scene.clone(); addAssetSceneToControllerModel( controllerModel, scene ); if ( this.onLoad ) this.onLoad( scene ); } else { if ( ! this.gltfLoader ) { throw new Error( 'GLTFLoader not set.' ); } this.gltfLoader.setPath( '' ); this.gltfLoader.load( controllerModel.motionController.assetUrl, ( asset ) => { this._assetCache[ controllerModel.motionController.assetUrl ] = asset; scene = asset.scene.clone(); addAssetSceneToControllerModel( controllerModel, scene ); if ( this.onLoad ) this.onLoad( scene ); }, null, () => { throw new Error( `Asset ${controllerModel.motionController.assetUrl} missing or malformed.` ); } ); } } ).catch( ( err ) => { console.warn( err ); } ); } ); controller.addEventListener( 'disconnected', () => { controllerModel.motionController = null; controllerModel.remove( scene ); scene = null; } ); return controllerModel; } } export { XRControllerModelFactory };