SelectionBox.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. import {
  2. Frustum,
  3. Vector3,
  4. Matrix4,
  5. Quaternion,
  6. } from 'three';
  7. const _frustum = new Frustum();
  8. const _center = new Vector3();
  9. const _tmpPoint = new Vector3();
  10. const _vecNear = new Vector3();
  11. const _vecTopLeft = new Vector3();
  12. const _vecTopRight = new Vector3();
  13. const _vecDownRight = new Vector3();
  14. const _vecDownLeft = new Vector3();
  15. const _vecFarTopLeft = new Vector3();
  16. const _vecFarTopRight = new Vector3();
  17. const _vecFarDownRight = new Vector3();
  18. const _vecFarDownLeft = new Vector3();
  19. const _vectemp1 = new Vector3();
  20. const _vectemp2 = new Vector3();
  21. const _vectemp3 = new Vector3();
  22. const _matrix = new Matrix4();
  23. const _quaternion = new Quaternion();
  24. const _scale = new Vector3();
  25. /**
  26. * This class can be used to select 3D objects in a scene with a selection box.
  27. * It is recommended to visualize the selected area with the help of {@link SelectionHelper}.
  28. *
  29. * ```js
  30. * const selectionBox = new SelectionBox( camera, scene );
  31. * const selectedObjects = selectionBox.select( startPoint, endPoint );
  32. * ```
  33. *
  34. * @three_import import { SelectionBox } from 'three/addons/interactive/SelectionBox.js';
  35. */
  36. class SelectionBox {
  37. /**
  38. * Constructs a new selection box.
  39. *
  40. * @param {Camera} camera - The camera the scene is rendered with.
  41. * @param {Scene} scene - The scene.
  42. * @param {number} [deep=Number.MAX_VALUE] - How deep the selection frustum of perspective cameras should extend.
  43. */
  44. constructor( camera, scene, deep = Number.MAX_VALUE ) {
  45. /**
  46. * The camera the scene is rendered with.
  47. *
  48. * @type {Camera}
  49. */
  50. this.camera = camera;
  51. /**
  52. * The camera the scene is rendered with.
  53. *
  54. * @type {Scene}
  55. */
  56. this.scene = scene;
  57. /**
  58. * The start point of the selection.
  59. *
  60. * @type {Vector3}
  61. */
  62. this.startPoint = new Vector3();
  63. /**
  64. * The end point of the selection.
  65. *
  66. * @type {Vector3}
  67. */
  68. this.endPoint = new Vector3();
  69. /**
  70. * The selected 3D objects.
  71. *
  72. * @type {Array<Object3D>}
  73. */
  74. this.collection = [];
  75. /**
  76. * The selected instance IDs of instanced meshes.
  77. *
  78. * @type {Object}
  79. */
  80. this.instances = {};
  81. /**
  82. * How deep the selection frustum of perspective cameras should extend.
  83. *
  84. * @type {number}
  85. * @default Number.MAX_VALUE
  86. */
  87. this.deep = deep;
  88. }
  89. /**
  90. * This method selects 3D objects in the scene based on the given start
  91. * and end point. If no parameters are provided, the method uses the start
  92. * and end values of the respective members.
  93. *
  94. * @param {Vector3} [startPoint] - The start point.
  95. * @param {Vector3} [endPoint] - The end point.
  96. * @return {Array<Object3D>} The selected 3D objects.
  97. */
  98. select( startPoint, endPoint ) {
  99. this.startPoint = startPoint || this.startPoint;
  100. this.endPoint = endPoint || this.endPoint;
  101. this.collection = [];
  102. this._updateFrustum( this.startPoint, this.endPoint );
  103. this._searchChildInFrustum( _frustum, this.scene );
  104. return this.collection;
  105. }
  106. // private
  107. _updateFrustum( startPoint, endPoint ) {
  108. startPoint = startPoint || this.startPoint;
  109. endPoint = endPoint || this.endPoint;
  110. // Avoid invalid frustum
  111. if ( startPoint.x === endPoint.x ) {
  112. endPoint.x += Number.EPSILON;
  113. }
  114. if ( startPoint.y === endPoint.y ) {
  115. endPoint.y += Number.EPSILON;
  116. }
  117. this.camera.updateProjectionMatrix();
  118. this.camera.updateMatrixWorld();
  119. if ( this.camera.isPerspectiveCamera ) {
  120. _tmpPoint.copy( startPoint );
  121. _tmpPoint.x = Math.min( startPoint.x, endPoint.x );
  122. _tmpPoint.y = Math.max( startPoint.y, endPoint.y );
  123. endPoint.x = Math.max( startPoint.x, endPoint.x );
  124. endPoint.y = Math.min( startPoint.y, endPoint.y );
  125. _vecNear.setFromMatrixPosition( this.camera.matrixWorld );
  126. _vecTopLeft.copy( _tmpPoint );
  127. _vecTopRight.set( endPoint.x, _tmpPoint.y, 0 );
  128. _vecDownRight.copy( endPoint );
  129. _vecDownLeft.set( _tmpPoint.x, endPoint.y, 0 );
  130. _vecTopLeft.unproject( this.camera );
  131. _vecTopRight.unproject( this.camera );
  132. _vecDownRight.unproject( this.camera );
  133. _vecDownLeft.unproject( this.camera );
  134. _vectemp1.copy( _vecTopLeft ).sub( _vecNear );
  135. _vectemp2.copy( _vecTopRight ).sub( _vecNear );
  136. _vectemp3.copy( _vecDownRight ).sub( _vecNear );
  137. _vectemp1.normalize();
  138. _vectemp2.normalize();
  139. _vectemp3.normalize();
  140. _vectemp1.multiplyScalar( this.deep );
  141. _vectemp2.multiplyScalar( this.deep );
  142. _vectemp3.multiplyScalar( this.deep );
  143. _vectemp1.add( _vecNear );
  144. _vectemp2.add( _vecNear );
  145. _vectemp3.add( _vecNear );
  146. const planes = _frustum.planes;
  147. planes[ 0 ].setFromCoplanarPoints( _vecNear, _vecTopLeft, _vecTopRight );
  148. planes[ 1 ].setFromCoplanarPoints( _vecNear, _vecTopRight, _vecDownRight );
  149. planes[ 2 ].setFromCoplanarPoints( _vecDownRight, _vecDownLeft, _vecNear );
  150. planes[ 3 ].setFromCoplanarPoints( _vecDownLeft, _vecTopLeft, _vecNear );
  151. planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
  152. planes[ 5 ].setFromCoplanarPoints( _vectemp3, _vectemp2, _vectemp1 );
  153. planes[ 5 ].normal.multiplyScalar( - 1 );
  154. } else if ( this.camera.isOrthographicCamera ) {
  155. const left = Math.min( startPoint.x, endPoint.x );
  156. const top = Math.max( startPoint.y, endPoint.y );
  157. const right = Math.max( startPoint.x, endPoint.x );
  158. const down = Math.min( startPoint.y, endPoint.y );
  159. _vecTopLeft.set( left, top, - 1 );
  160. _vecTopRight.set( right, top, - 1 );
  161. _vecDownRight.set( right, down, - 1 );
  162. _vecDownLeft.set( left, down, - 1 );
  163. _vecFarTopLeft.set( left, top, 1 );
  164. _vecFarTopRight.set( right, top, 1 );
  165. _vecFarDownRight.set( right, down, 1 );
  166. _vecFarDownLeft.set( left, down, 1 );
  167. _vecTopLeft.unproject( this.camera );
  168. _vecTopRight.unproject( this.camera );
  169. _vecDownRight.unproject( this.camera );
  170. _vecDownLeft.unproject( this.camera );
  171. _vecFarTopLeft.unproject( this.camera );
  172. _vecFarTopRight.unproject( this.camera );
  173. _vecFarDownRight.unproject( this.camera );
  174. _vecFarDownLeft.unproject( this.camera );
  175. const planes = _frustum.planes;
  176. planes[ 0 ].setFromCoplanarPoints( _vecTopLeft, _vecFarTopLeft, _vecFarTopRight );
  177. planes[ 1 ].setFromCoplanarPoints( _vecTopRight, _vecFarTopRight, _vecFarDownRight );
  178. planes[ 2 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarDownLeft, _vecDownLeft );
  179. planes[ 3 ].setFromCoplanarPoints( _vecFarDownLeft, _vecFarTopLeft, _vecTopLeft );
  180. planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
  181. planes[ 5 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarTopRight, _vecFarTopLeft );
  182. planes[ 5 ].normal.multiplyScalar( - 1 );
  183. } else {
  184. console.error( 'THREE.SelectionBox: Unsupported camera type.' );
  185. }
  186. }
  187. _searchChildInFrustum( frustum, object ) {
  188. if ( object.isMesh || object.isLine || object.isPoints ) {
  189. if ( object.isInstancedMesh ) {
  190. this.instances[ object.uuid ] = [];
  191. for ( let instanceId = 0; instanceId < object.count; instanceId ++ ) {
  192. object.getMatrixAt( instanceId, _matrix );
  193. _matrix.decompose( _center, _quaternion, _scale );
  194. _center.applyMatrix4( object.matrixWorld );
  195. if ( frustum.containsPoint( _center ) ) {
  196. this.instances[ object.uuid ].push( instanceId );
  197. }
  198. }
  199. } else {
  200. if ( object.geometry.boundingSphere === null ) object.geometry.computeBoundingSphere();
  201. _center.copy( object.geometry.boundingSphere.center );
  202. _center.applyMatrix4( object.matrixWorld );
  203. if ( frustum.containsPoint( _center ) ) {
  204. this.collection.push( object );
  205. }
  206. }
  207. }
  208. if ( object.children.length > 0 ) {
  209. for ( let x = 0; x < object.children.length; x ++ ) {
  210. this._searchChildInFrustum( frustum, object.children[ x ] );
  211. }
  212. }
  213. }
  214. }
  215. export { SelectionBox };