123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- /**
- * @author Nell Waliczek / https://github.com/NellWaliczek
- * @author Brandon Jones / https://github.com/toji
- */
- import {
- Mesh,
- MeshBasicMaterial,
- Object3D,
- Quaternion,
- SphereGeometry,
- } from "../../../build/three.module.js";
- 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';
- function XRControllerModel( ) {
- Object3D.call( this );
- this.motionController = null;
- this.envMap = null;
- }
- XRControllerModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
- constructor: XRControllerModel,
- setEnvironmentMap: function ( 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: function ( force ) {
- Object3D.prototype.updateMatrixWorld.call( this, 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 ) {
- Quaternion.slerp(
- minNode.quaternion,
- maxNode.quaternion,
- valueNode.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 ${componentId}`);
- }
- }
- // 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 );
- }
- var XRControllerModelFactory = ( function () {
- function XRControllerModelFactory( gltfLoader = null ) {
- this.gltfLoader = gltfLoader;
- this.path = DEFAULT_PROFILES_PATH;
- this._assetCache = {};
- // If a GLTFLoader wasn't supplied to the constructor create a new one.
- if ( !this.gltfLoader ) {
- this.gltfLoader = new GLTFLoader();
- }
- }
- XRControllerModelFactory.prototype = {
- constructor: XRControllerModelFactory,
- createControllerModel: function ( 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
- );
- let cachedAsset = this._assetCache[controllerModel.motionController.assetUrl];
- if (cachedAsset) {
- scene = cachedAsset.scene.clone();
- addAssetSceneToControllerModel(controllerModel, 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);
- },
- null,
- () => {
- throw new Error(`Asset ${motionController.assetUrl} missing or malformed.`);
- });
- }
- }).catch((err) => {
- console.warn(err);
- });
- });
- controller.addEventListener( 'disconnected', () => {
- controllerModel.motionController = null;
- controllerModel.remove( scene );
- scene = null;
- });
- return controllerModel;
- }
- };
- return XRControllerModelFactory;
- } )();
- export { XRControllerModelFactory };
|