File: //var/www/aspa/three/addons/webxr/XRControllerModelFactory.js
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 };