arcRotateCameraMouseWheelInput.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. import { __decorate } from "../../tslib.es6.js";
  2. import { serialize } from "../../Misc/decorators.js";
  3. import { CameraInputTypes } from "../../Cameras/cameraInputsManager.js";
  4. import { PointerEventTypes } from "../../Events/pointerEvents.js";
  5. import { Plane } from "../../Maths/math.plane.js";
  6. import { Vector3, Matrix, TmpVectors } from "../../Maths/math.vector.js";
  7. import { Epsilon } from "../../Maths/math.constants.js";
  8. import { EventConstants } from "../../Events/deviceInputEvents.js";
  9. import { Scalar } from "../../Maths/math.scalar.js";
  10. import { Tools } from "../../Misc/tools.js";
  11. /**
  12. * Firefox uses a different scheme to report scroll distances to other
  13. * browsers. Rather than use complicated methods to calculate the exact
  14. * multiple we need to apply, let's just cheat and use a constant.
  15. * https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode
  16. * https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
  17. */
  18. const ffMultiplier = 40;
  19. /**
  20. * Manage the mouse wheel inputs to control an arc rotate camera.
  21. * @see https://doc.babylonjs.com/features/featuresDeepDive/cameras/customizingCameraInputs
  22. */
  23. export class ArcRotateCameraMouseWheelInput {
  24. constructor() {
  25. /**
  26. * Gets or Set the mouse wheel precision or how fast is the camera zooming.
  27. */
  28. this.wheelPrecision = 3.0;
  29. /**
  30. * Gets or Set the boolean value that controls whether or not the mouse wheel
  31. * zooms to the location of the mouse pointer or not. The default is false.
  32. */
  33. this.zoomToMouseLocation = false;
  34. /**
  35. * wheelDeltaPercentage will be used instead of wheelPrecision if different from 0.
  36. * It defines the percentage of current camera.radius to use as delta when wheel is used.
  37. */
  38. this.wheelDeltaPercentage = 0;
  39. /**
  40. * If set, this function will be used to set the radius delta that will be added to the current camera radius
  41. */
  42. this.customComputeDeltaFromMouseWheel = null;
  43. this._viewOffset = new Vector3(0, 0, 0);
  44. this._globalOffset = new Vector3(0, 0, 0);
  45. this._inertialPanning = Vector3.Zero();
  46. }
  47. _computeDeltaFromMouseWheelLegacyEvent(mouseWheelDelta, radius) {
  48. let delta = 0;
  49. const wheelDelta = mouseWheelDelta * 0.01 * this.wheelDeltaPercentage * radius;
  50. if (mouseWheelDelta > 0) {
  51. delta = wheelDelta / (1.0 + this.wheelDeltaPercentage);
  52. }
  53. else {
  54. delta = wheelDelta * (1.0 + this.wheelDeltaPercentage);
  55. }
  56. return delta;
  57. }
  58. /**
  59. * Attach the input controls to a specific dom element to get the input from.
  60. * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
  61. */
  62. attachControl(noPreventDefault) {
  63. noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
  64. this._wheel = (p) => {
  65. //sanity check - this should be a PointerWheel event.
  66. if (p.type !== PointerEventTypes.POINTERWHEEL) {
  67. return;
  68. }
  69. const event = p.event;
  70. let delta = 0;
  71. const platformScale = event.deltaMode === EventConstants.DOM_DELTA_LINE ? ffMultiplier : 1; // If this happens to be set to DOM_DELTA_LINE, adjust accordingly
  72. const wheelDelta = -(event.deltaY * platformScale);
  73. if (this.customComputeDeltaFromMouseWheel) {
  74. delta = this.customComputeDeltaFromMouseWheel(wheelDelta, this, event);
  75. }
  76. else {
  77. if (this.wheelDeltaPercentage) {
  78. delta = this._computeDeltaFromMouseWheelLegacyEvent(wheelDelta, this.camera.radius);
  79. // If zooming in, estimate the target radius and use that to compute the delta for inertia
  80. // this will stop multiple scroll events zooming in from adding too much inertia
  81. if (delta > 0) {
  82. let estimatedTargetRadius = this.camera.radius;
  83. let targetInertia = this.camera.inertialRadiusOffset + delta;
  84. for (let i = 0; i < 20 && Math.abs(targetInertia) > 0.001; i++) {
  85. estimatedTargetRadius -= targetInertia;
  86. targetInertia *= this.camera.inertia;
  87. }
  88. estimatedTargetRadius = Scalar.Clamp(estimatedTargetRadius, 0, Number.MAX_VALUE);
  89. delta = this._computeDeltaFromMouseWheelLegacyEvent(wheelDelta, estimatedTargetRadius);
  90. }
  91. }
  92. else {
  93. delta = wheelDelta / (this.wheelPrecision * 40);
  94. }
  95. }
  96. if (delta) {
  97. if (this.zoomToMouseLocation) {
  98. // If we are zooming to the mouse location, then we need to get the hit plane at the start of the zoom gesture if it doesn't exist
  99. // The hit plane is normally calculated after the first motion and each time there's motion so if we don't do this first,
  100. // the first zoom will be to the center of the screen
  101. if (!this._hitPlane) {
  102. this._updateHitPlane();
  103. }
  104. this._zoomToMouse(delta);
  105. }
  106. else {
  107. this.camera.inertialRadiusOffset += delta;
  108. }
  109. }
  110. if (event.preventDefault) {
  111. if (!noPreventDefault) {
  112. event.preventDefault();
  113. }
  114. }
  115. };
  116. this._observer = this.camera.getScene()._inputManager._addCameraPointerObserver(this._wheel, PointerEventTypes.POINTERWHEEL);
  117. if (this.zoomToMouseLocation) {
  118. this._inertialPanning.setAll(0);
  119. }
  120. }
  121. /**
  122. * Detach the current controls from the specified dom element.
  123. */
  124. detachControl() {
  125. if (this._observer) {
  126. this.camera.getScene()._inputManager._removeCameraPointerObserver(this._observer);
  127. this._observer = null;
  128. this._wheel = null;
  129. }
  130. }
  131. /**
  132. * Update the current camera state depending on the inputs that have been used this frame.
  133. * This is a dynamically created lambda to avoid the performance penalty of looping for inputs in the render loop.
  134. */
  135. checkInputs() {
  136. if (!this.zoomToMouseLocation) {
  137. return;
  138. }
  139. const camera = this.camera;
  140. const motion = 0.0 + camera.inertialAlphaOffset + camera.inertialBetaOffset + camera.inertialRadiusOffset;
  141. if (motion) {
  142. // if zooming is still happening as a result of inertia, then we also need to update
  143. // the hit plane.
  144. this._updateHitPlane();
  145. // Note we cannot use arcRotateCamera.inertialPlanning here because arcRotateCamera panning
  146. // uses a different panningInertia which could cause this panning to get out of sync with
  147. // the zooming, and for this to work they must be exactly in sync.
  148. camera.target.addInPlace(this._inertialPanning);
  149. this._inertialPanning.scaleInPlace(camera.inertia);
  150. this._zeroIfClose(this._inertialPanning);
  151. }
  152. }
  153. /**
  154. * Gets the class name of the current input.
  155. * @returns the class name
  156. */
  157. getClassName() {
  158. return "ArcRotateCameraMouseWheelInput";
  159. }
  160. /**
  161. * Get the friendly name associated with the input class.
  162. * @returns the input friendly name
  163. */
  164. getSimpleName() {
  165. return "mousewheel";
  166. }
  167. _updateHitPlane() {
  168. const camera = this.camera;
  169. const direction = camera.target.subtract(camera.position);
  170. this._hitPlane = Plane.FromPositionAndNormal(camera.target, direction);
  171. }
  172. // Get position on the hit plane
  173. _getPosition() {
  174. const camera = this.camera;
  175. const scene = camera.getScene();
  176. // since the _hitPlane is always updated to be orthogonal to the camera position vector
  177. // we don't have to worry about this ray shooting off to infinity. This ray creates
  178. // a vector defining where we want to zoom to.
  179. const ray = scene.createPickingRay(scene.pointerX, scene.pointerY, Matrix.Identity(), camera, false);
  180. // Since the camera is the origin of the picking ray, we need to offset it by the camera's offset manually
  181. // Because the offset is in view space, we need to convert it to world space first
  182. if (camera.targetScreenOffset.x !== 0 || camera.targetScreenOffset.y !== 0) {
  183. this._viewOffset.set(camera.targetScreenOffset.x, camera.targetScreenOffset.y, 0);
  184. camera.getViewMatrix().invertToRef(camera._cameraTransformMatrix);
  185. this._globalOffset = Vector3.TransformNormal(this._viewOffset, camera._cameraTransformMatrix);
  186. ray.origin.addInPlace(this._globalOffset);
  187. }
  188. let distance = 0;
  189. if (this._hitPlane) {
  190. distance = ray.intersectsPlane(this._hitPlane) ?? 0;
  191. }
  192. // not using this ray again, so modifying its vectors here is fine
  193. return ray.origin.addInPlace(ray.direction.scaleInPlace(distance));
  194. }
  195. _zoomToMouse(delta) {
  196. const camera = this.camera;
  197. const inertiaComp = 1 - camera.inertia;
  198. if (camera.lowerRadiusLimit) {
  199. const lowerLimit = camera.lowerRadiusLimit ?? 0;
  200. if (camera.radius - (camera.inertialRadiusOffset + delta) / inertiaComp < lowerLimit) {
  201. delta = (camera.radius - lowerLimit) * inertiaComp - camera.inertialRadiusOffset;
  202. }
  203. }
  204. if (camera.upperRadiusLimit) {
  205. const upperLimit = camera.upperRadiusLimit ?? 0;
  206. if (camera.radius - (camera.inertialRadiusOffset + delta) / inertiaComp > upperLimit) {
  207. delta = (camera.radius - upperLimit) * inertiaComp - camera.inertialRadiusOffset;
  208. }
  209. }
  210. const zoomDistance = delta / inertiaComp;
  211. const ratio = zoomDistance / camera.radius;
  212. const vec = this._getPosition();
  213. // Now this vector tells us how much we also need to pan the camera
  214. // so the targeted mouse location becomes the center of zooming.
  215. const directionToZoomLocation = TmpVectors.Vector3[6];
  216. vec.subtractToRef(camera.target, directionToZoomLocation);
  217. directionToZoomLocation.scaleInPlace(ratio);
  218. directionToZoomLocation.scaleInPlace(inertiaComp);
  219. this._inertialPanning.addInPlace(directionToZoomLocation);
  220. camera.inertialRadiusOffset += delta;
  221. }
  222. // Sets x y or z of passed in vector to zero if less than Epsilon.
  223. _zeroIfClose(vec) {
  224. if (Math.abs(vec.x) < Epsilon) {
  225. vec.x = 0;
  226. }
  227. if (Math.abs(vec.y) < Epsilon) {
  228. vec.y = 0;
  229. }
  230. if (Math.abs(vec.z) < Epsilon) {
  231. vec.z = 0;
  232. }
  233. }
  234. }
  235. __decorate([
  236. serialize()
  237. ], ArcRotateCameraMouseWheelInput.prototype, "wheelPrecision", void 0);
  238. __decorate([
  239. serialize()
  240. ], ArcRotateCameraMouseWheelInput.prototype, "zoomToMouseLocation", void 0);
  241. __decorate([
  242. serialize()
  243. ], ArcRotateCameraMouseWheelInput.prototype, "wheelDeltaPercentage", void 0);
  244. CameraInputTypes["ArcRotateCameraMouseWheelInput"] = ArcRotateCameraMouseWheelInput;
  245. //# sourceMappingURL=arcRotateCameraMouseWheelInput.js.map