WebXRController.js 4.3 KB

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