trackball.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. /**
  2. * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. * @author David Sehnal <david.sehnal@gmail.com>
  6. *
  7. * This code has been modified from https://github.com/mrdoob/three.js/,
  8. * copyright (c) 2010-2018 three.js authors. MIT License
  9. */
  10. import { Quat, Vec2, Vec3, EPSILON } from 'mol-math/linear-algebra';
  11. import { cameraLookAt, Viewport } from '../camera/util';
  12. import InputObserver, { DragInput, WheelInput, ButtonsType, PinchInput } from 'mol-util/input/input-observer';
  13. import { Object3D } from 'mol-gl/object3d';
  14. import { ParamDefinition as PD } from 'mol-util/param-definition';
  15. export const TrackballControlsParams = {
  16. noScroll: PD.Boolean(true, { isHidden: true }),
  17. rotateSpeed: PD.Numeric(5.0, { min: 0.1, max: 10, step: 0.1 }),
  18. zoomSpeed: PD.Numeric(6.0, { min: 0.1, max: 10, step: 0.1 }),
  19. panSpeed: PD.Numeric(0.8, { min: 0.1, max: 5, step: 0.1 }),
  20. spin: PD.Boolean(false),
  21. spinSpeed: PD.Numeric(1, { min: -100, max: 100, step: 1 }),
  22. staticMoving: PD.Boolean(true, { isHidden: true }),
  23. dynamicDampingFactor: PD.Numeric(0.2, {}, { isHidden: true }),
  24. minDistance: PD.Numeric(0.01, {}, { isHidden: true }),
  25. maxDistance: PD.Numeric(1e150, {}, { isHidden: true })
  26. }
  27. export type TrackballControlsProps = PD.Values<typeof TrackballControlsParams>
  28. export { TrackballControls }
  29. interface TrackballControls {
  30. viewport: Viewport
  31. readonly props: Readonly<TrackballControlsProps>
  32. setProps: (props: Partial<TrackballControlsProps>) => void
  33. update: (t: number) => void
  34. reset: () => void
  35. dispose: () => void
  36. }
  37. namespace TrackballControls {
  38. export function create(input: InputObserver, object: Object3D & { target: Vec3 }, props: Partial<TrackballControlsProps> = {}): TrackballControls {
  39. const p = { ...PD.getDefaultValues(TrackballControlsParams), ...props }
  40. const viewport: Viewport = { x: 0, y: 0, width: 0, height: 0 }
  41. const target: Vec3 = object.target
  42. let disposed = false
  43. const dragSub = input.drag.subscribe(onDrag)
  44. const interactionEndSub = input.interactionEnd.subscribe(onInteractionEnd)
  45. const wheelSub = input.wheel.subscribe(onWheel)
  46. const pinchSub = input.pinch.subscribe(onPinch)
  47. let _isInteracting = false;
  48. // For internal use
  49. const lastPosition = Vec3.zero()
  50. const _eye = Vec3.zero()
  51. const _movePrev = Vec2.zero()
  52. const _moveCurr = Vec2.zero()
  53. const _lastAxis = Vec3.zero()
  54. let _lastAngle = 0
  55. const _zoomStart = Vec2.zero()
  56. const _zoomEnd = Vec2.zero()
  57. let _touchZoomDistanceStart = 0
  58. let _touchZoomDistanceEnd = 0
  59. const _panStart = Vec2.zero()
  60. const _panEnd = Vec2.zero()
  61. // Initial values for reseting
  62. const target0 = Vec3.clone(target)
  63. const position0 = Vec3.clone(object.position)
  64. const up0 = Vec3.clone(object.up)
  65. const mouseOnScreenVec2 = Vec2.zero()
  66. function getMouseOnScreen(pageX: number, pageY: number) {
  67. Vec2.set(
  68. mouseOnScreenVec2,
  69. (pageX - viewport.x) / viewport.width,
  70. (pageY - viewport.y) / viewport.height
  71. );
  72. return mouseOnScreenVec2;
  73. }
  74. const mouseOnCircleVec2 = Vec2.zero()
  75. function getMouseOnCircle(pageX: number, pageY: number) {
  76. Vec2.set(
  77. mouseOnCircleVec2,
  78. ((pageX - viewport.width * 0.5 - viewport.x) / (viewport.width * 0.5)),
  79. ((viewport.height + 2 * (viewport.y - pageY)) / viewport.width) // screen.width intentional
  80. );
  81. return mouseOnCircleVec2;
  82. }
  83. const rotAxis = Vec3.zero()
  84. const rotQuat = Quat.zero()
  85. const rotEyeDir = Vec3.zero()
  86. const rotObjUpDir = Vec3.zero()
  87. const rotObjSideDir = Vec3.zero()
  88. const rotMoveDir = Vec3.zero()
  89. function rotateCamera() {
  90. Vec3.set(rotMoveDir, _moveCurr[0] - _movePrev[0], _moveCurr[1] - _movePrev[1], 0);
  91. let angle = Vec3.magnitude(rotMoveDir);
  92. if (angle) {
  93. Vec3.copy(_eye, object.position)
  94. Vec3.sub(_eye, _eye, target)
  95. Vec3.normalize(rotEyeDir, Vec3.copy(rotEyeDir, _eye))
  96. Vec3.normalize(rotObjUpDir, Vec3.copy(rotObjUpDir, object.up))
  97. Vec3.normalize(rotObjSideDir, Vec3.cross(rotObjSideDir, rotObjUpDir, rotEyeDir))
  98. Vec3.setMagnitude(rotObjUpDir, rotObjUpDir, _moveCurr[1] - _movePrev[1])
  99. Vec3.setMagnitude(rotObjSideDir, rotObjSideDir, _moveCurr[0] - _movePrev[0])
  100. Vec3.add(rotMoveDir, Vec3.copy(rotMoveDir, rotObjUpDir), rotObjSideDir)
  101. Vec3.normalize(rotAxis, Vec3.cross(rotAxis, rotMoveDir, _eye))
  102. angle *= p.rotateSpeed;
  103. Quat.setAxisAngle(rotQuat, rotAxis, angle)
  104. Vec3.transformQuat(_eye, _eye, rotQuat)
  105. Vec3.transformQuat(object.up, object.up, rotQuat)
  106. Vec3.copy(_lastAxis, rotAxis)
  107. _lastAngle = angle;
  108. } else if (!p.staticMoving && _lastAngle) {
  109. _lastAngle *= Math.sqrt(1.0 - p.dynamicDampingFactor);
  110. Vec3.sub(_eye, Vec3.copy(_eye, object.position), target)
  111. Quat.setAxisAngle(rotQuat, _lastAxis, _lastAngle)
  112. Vec3.transformQuat(_eye, _eye, rotQuat)
  113. Vec3.transformQuat(object.up, object.up, rotQuat)
  114. }
  115. Vec2.copy(_movePrev, _moveCurr)
  116. }
  117. function zoomCamera() {
  118. const factor = 1.0 + (_zoomEnd[1] - _zoomStart[1]) * p.zoomSpeed
  119. if (factor !== 1.0 && factor > 0.0) {
  120. Vec3.scale(_eye, _eye, factor)
  121. }
  122. if (p.staticMoving) {
  123. Vec2.copy(_zoomStart, _zoomEnd)
  124. } else {
  125. _zoomStart[1] += (_zoomEnd[1] - _zoomStart[1]) * p.dynamicDampingFactor
  126. }
  127. }
  128. const panMouseChange = Vec2.zero()
  129. const panObjUp = Vec3.zero()
  130. const panOffset = Vec3.zero()
  131. function panCamera() {
  132. Vec2.sub(panMouseChange, Vec2.copy(panMouseChange, _panEnd), _panStart)
  133. if (Vec2.squaredMagnitude(panMouseChange)) {
  134. Vec2.scale(panMouseChange, panMouseChange, Vec3.magnitude(_eye) * p.panSpeed)
  135. Vec3.cross(panOffset, Vec3.copy(panOffset, _eye), object.up)
  136. Vec3.setMagnitude(panOffset, panOffset, panMouseChange[0])
  137. Vec3.setMagnitude(panObjUp, object.up, panMouseChange[1])
  138. Vec3.add(panOffset, panOffset, panObjUp)
  139. Vec3.add(object.position, object.position, panOffset)
  140. Vec3.add(target, target, panOffset)
  141. if (p.staticMoving) {
  142. Vec2.copy(_panStart, _panEnd)
  143. } else {
  144. Vec2.sub(panMouseChange, _panEnd, _panStart)
  145. Vec2.scale(panMouseChange, panMouseChange, p.dynamicDampingFactor)
  146. Vec2.add(_panStart, _panStart, panMouseChange)
  147. }
  148. }
  149. }
  150. /** Ensure the distance between object and target is within the min/max distance */
  151. function checkDistances() {
  152. if (Vec3.squaredMagnitude(_eye) > p.maxDistance * p.maxDistance) {
  153. Vec3.setMagnitude(_eye, _eye, p.maxDistance)
  154. Vec3.add(object.position, target, _eye)
  155. Vec2.copy(_zoomStart, _zoomEnd)
  156. }
  157. if (Vec3.squaredMagnitude(_eye) < p.minDistance * p.minDistance) {
  158. Vec3.setMagnitude(_eye, _eye, p.minDistance)
  159. Vec3.add(object.position, target, _eye)
  160. Vec2.copy(_zoomStart, _zoomEnd)
  161. }
  162. }
  163. let lastUpdated = -1;
  164. /** Update the object's position, direction and up vectors */
  165. function update(t: number) {
  166. if (lastUpdated === t) return;
  167. if (p.spin) spin(t - lastUpdated);
  168. Vec3.sub(_eye, object.position, target)
  169. rotateCamera()
  170. zoomCamera()
  171. panCamera()
  172. Vec3.add(object.position, target, _eye)
  173. checkDistances()
  174. cameraLookAt(object.position, object.up, object.direction, target)
  175. if (Vec3.squaredDistance(lastPosition, object.position) > EPSILON.Value) {
  176. Vec3.copy(lastPosition, object.position)
  177. }
  178. lastUpdated = t;
  179. }
  180. /** Reset object's vectors and the target vector to their initial values */
  181. function reset() {
  182. Vec3.copy(target, target0)
  183. Vec3.copy(object.position, position0)
  184. Vec3.copy(object.up, up0)
  185. Vec3.sub(_eye, object.position, target)
  186. cameraLookAt(object.position, object.up, object.direction, target)
  187. Vec3.copy(lastPosition, object.position)
  188. }
  189. // listeners
  190. function onDrag({ pageX, pageY, buttons, modifiers, isStart }: DragInput) {
  191. _isInteracting = true;
  192. if (isStart) {
  193. if (buttons === ButtonsType.Flag.Primary) {
  194. Vec2.copy(_moveCurr, getMouseOnCircle(pageX, pageY))
  195. Vec2.copy(_movePrev, _moveCurr)
  196. } else if (buttons === ButtonsType.Flag.Auxilary) {
  197. Vec2.copy(_zoomStart, getMouseOnScreen(pageX, pageY))
  198. Vec2.copy(_zoomEnd, _zoomStart)
  199. } else if (buttons === ButtonsType.Flag.Secondary) {
  200. Vec2.copy(_panStart, getMouseOnScreen(pageX, pageY))
  201. Vec2.copy(_panEnd, _panStart)
  202. }
  203. }
  204. if (buttons === ButtonsType.Flag.Primary) {
  205. Vec2.copy(_movePrev, _moveCurr)
  206. Vec2.copy(_moveCurr, getMouseOnCircle(pageX, pageY))
  207. } else if (buttons === ButtonsType.Flag.Auxilary) {
  208. Vec2.copy(_zoomEnd, getMouseOnScreen(pageX, pageY))
  209. } else if (buttons === ButtonsType.Flag.Secondary) {
  210. Vec2.copy(_panEnd, getMouseOnScreen(pageX, pageY))
  211. }
  212. }
  213. function onInteractionEnd() {
  214. _isInteracting = false;
  215. }
  216. function onWheel({ dy }: WheelInput) {
  217. _zoomStart[1] -= dy * 0.0001
  218. }
  219. function onPinch({ distance, isStart }: PinchInput) {
  220. _isInteracting = true;
  221. if (isStart) {
  222. _touchZoomDistanceStart = distance
  223. }
  224. _touchZoomDistanceEnd = distance
  225. const factor = (_touchZoomDistanceStart / _touchZoomDistanceEnd) * p.zoomSpeed
  226. _touchZoomDistanceStart = _touchZoomDistanceEnd;
  227. Vec3.scale(_eye, _eye, factor)
  228. }
  229. function dispose() {
  230. if (disposed) return
  231. disposed = true
  232. dragSub.unsubscribe()
  233. wheelSub.unsubscribe()
  234. pinchSub.unsubscribe()
  235. interactionEndSub.unsubscribe()
  236. }
  237. const _spinSpeed = Vec2.create(0.005, 0);
  238. function spin(deltaT: number) {
  239. const frameSpeed = (p.spinSpeed || 0) / 1000;
  240. _spinSpeed[0] = 60 * Math.min(Math.abs(deltaT), 1000 / 8) / 1000 * frameSpeed;
  241. if (!_isInteracting) Vec2.add(_moveCurr, _movePrev, _spinSpeed);
  242. }
  243. // force an update at start
  244. update(0);
  245. return {
  246. viewport,
  247. get props() { return p as Readonly<TrackballControlsProps> },
  248. setProps: (props: Partial<TrackballControlsProps>) => {
  249. Object.assign(p, props)
  250. },
  251. update,
  252. reset,
  253. dispose
  254. }
  255. }
  256. }