2
0

WebXRController.js 4.3 KB

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