WebXRController.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. import { Group } from '../../objects/Group.js';
  2. function WebXRController() {
  3. this._targetRay = null;
  4. this._grip = null;
  5. this._hand = null;
  6. }
  7. Object.assign( WebXRController.prototype, {
  8. constructor: WebXRController,
  9. getHandSpace: function () {
  10. if ( this._hand === null ) {
  11. this._hand = new Group();
  12. this._hand.matrixAutoUpdate = false;
  13. this._hand.visible = false;
  14. this._hand.joints = [];
  15. this._hand.inputState = { pinching: false };
  16. if ( window.XRHand ) {
  17. for ( let i = 0; i <= window.XRHand.LITTLE_PHALANX_TIP; i ++ ) {
  18. // The transform of this joint will be updated with the joint pose on each frame
  19. const joint = new Group();
  20. joint.matrixAutoUpdate = false;
  21. joint.visible = false;
  22. this._hand.joints.push( joint );
  23. // ??
  24. this._hand.add( joint );
  25. }
  26. }
  27. }
  28. return this._hand;
  29. },
  30. getTargetRaySpace: function () {
  31. if ( this._targetRay === null ) {
  32. this._targetRay = new Group();
  33. this._targetRay.matrixAutoUpdate = false;
  34. this._targetRay.visible = false;
  35. }
  36. return this._targetRay;
  37. },
  38. getGripSpace: function () {
  39. if ( this._grip === null ) {
  40. this._grip = new Group();
  41. this._grip.matrixAutoUpdate = false;
  42. this._grip.visible = false;
  43. }
  44. return this._grip;
  45. },
  46. dispatchEvent: function ( event ) {
  47. if ( this._targetRay !== null ) {
  48. this._targetRay.dispatchEvent( event );
  49. }
  50. if ( this._grip !== null ) {
  51. this._grip.dispatchEvent( event );
  52. }
  53. if ( this._hand !== null ) {
  54. this._hand.dispatchEvent( event );
  55. }
  56. return this;
  57. },
  58. disconnect: function ( inputSource ) {
  59. this.dispatchEvent( { type: 'disconnected', data: inputSource } );
  60. if ( this._targetRay !== null ) {
  61. this._targetRay.visible = false;
  62. }
  63. if ( this._grip !== null ) {
  64. this._grip.visible = false;
  65. }
  66. if ( this._hand !== null ) {
  67. this._hand.visible = false;
  68. }
  69. return this;
  70. },
  71. update: function ( inputSource, frame, referenceSpace ) {
  72. let inputPose = null;
  73. let gripPose = null;
  74. let handPose = null;
  75. const targetRay = this._targetRay;
  76. const grip = this._grip;
  77. const hand = this._hand;
  78. if ( inputSource ) {
  79. if ( hand && inputSource.hand ) {
  80. handPose = true;
  81. for ( let i = 0; i <= window.XRHand.LITTLE_PHALANX_TIP; i ++ ) {
  82. if ( inputSource.hand[ i ] ) {
  83. // Update the joints groups with the XRJoint poses
  84. const jointPose = frame.getJointPose( inputSource.hand[ i ], referenceSpace );
  85. const joint = hand.joints[ i ];
  86. if ( jointPose !== null ) {
  87. joint.matrix.fromArray( jointPose.transform.matrix );
  88. joint.matrix.decompose( joint.position, joint.rotation, joint.scale );
  89. joint.jointRadius = jointPose.radius;
  90. }
  91. joint.visible = jointPose !== null;
  92. // Custom events
  93. // Check pinch
  94. const indexTip = hand.joints[ window.XRHand.INDEX_PHALANX_TIP ];
  95. const thumbTip = hand.joints[ window.XRHand.THUMB_PHALANX_TIP ];
  96. const distance = indexTip.position.distanceTo( thumbTip.position );
  97. const distanceToPinch = 0.02;
  98. const threshold = 0.005;
  99. if ( hand.inputState.pinching && distance > distanceToPinch + threshold ) {
  100. hand.inputState.pinching = false;
  101. this.dispatchEvent( {
  102. type: "pinchend",
  103. handedness: inputSource.handedness,
  104. target: this
  105. } );
  106. } else if ( ! hand.inputState.pinching && distance <= distanceToPinch - threshold ) {
  107. hand.inputState.pinching = true;
  108. this.dispatchEvent( {
  109. type: "pinchstart",
  110. handedness: inputSource.handedness,
  111. target: this
  112. } );
  113. }
  114. }
  115. }
  116. } else {
  117. if ( targetRay !== null ) {
  118. inputPose = frame.getPose( inputSource.targetRaySpace, referenceSpace );
  119. if ( inputPose !== null ) {
  120. targetRay.matrix.fromArray( inputPose.transform.matrix );
  121. targetRay.matrix.decompose( targetRay.position, targetRay.rotation, targetRay.scale );
  122. }
  123. }
  124. if ( grip !== null && inputSource.gripSpace ) {
  125. gripPose = frame.getPose( inputSource.gripSpace, referenceSpace );
  126. if ( gripPose !== null ) {
  127. grip.matrix.fromArray( gripPose.transform.matrix );
  128. grip.matrix.decompose( grip.position, grip.rotation, grip.scale );
  129. }
  130. }
  131. }
  132. }
  133. if ( targetRay !== null ) {
  134. targetRay.visible = ( inputPose !== null );
  135. }
  136. if ( grip !== null ) {
  137. grip.visible = ( gripPose !== null );
  138. }
  139. if ( hand !== null ) {
  140. hand.visible = ( handPose !== null );
  141. }
  142. return this;
  143. }
  144. } );
  145. export { WebXRController };