babylon.arcRotateCamera.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. var __extends = this.__extends || function (d, b) {
  2. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3. function __() { this.constructor = d; }
  4. __.prototype = b.prototype;
  5. d.prototype = new __();
  6. };
  7. var BABYLON;
  8. (function (BABYLON) {
  9. var eventPrefix = BABYLON.Tools.GetPointerPrefix();
  10. var ArcRotateCamera = (function (_super) {
  11. __extends(ArcRotateCamera, _super);
  12. function ArcRotateCamera(name, alpha, beta, radius, target, scene) {
  13. _super.call(this, name, BABYLON.Vector3.Zero(), scene);
  14. this.alpha = alpha;
  15. this.beta = beta;
  16. this.radius = radius;
  17. this.target = target;
  18. this.inertialAlphaOffset = 0;
  19. this.inertialBetaOffset = 0;
  20. this.inertialRadiusOffset = 0;
  21. this.lowerAlphaLimit = null;
  22. this.upperAlphaLimit = null;
  23. this.lowerBetaLimit = 0.01;
  24. this.upperBetaLimit = Math.PI;
  25. this.lowerRadiusLimit = null;
  26. this.upperRadiusLimit = null;
  27. this.angularSensibility = 1000.0;
  28. this.wheelPrecision = 3.0;
  29. this.keysUp = [38];
  30. this.keysDown = [40];
  31. this.keysLeft = [37];
  32. this.keysRight = [39];
  33. this.zoomOnFactor = 1;
  34. this._keys = [];
  35. this._viewMatrix = new BABYLON.Matrix();
  36. this.checkCollisions = false;
  37. this.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5);
  38. this._collider = new BABYLON.Collider();
  39. this._previousPosition = BABYLON.Vector3.Zero();
  40. this._collisionVelocity = BABYLON.Vector3.Zero();
  41. this._newPosition = BABYLON.Vector3.Zero();
  42. // Pinch
  43. // value for pinch step scaling
  44. // set to 20 by default
  45. this.pinchPrecision = 20;
  46. this.getViewMatrix();
  47. }
  48. ArcRotateCamera.prototype._getTargetPosition = function () {
  49. return this.target.position || this.target;
  50. };
  51. // Cache
  52. ArcRotateCamera.prototype._initCache = function () {
  53. _super.prototype._initCache.call(this);
  54. this._cache.target = new BABYLON.Vector3(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
  55. this._cache.alpha = undefined;
  56. this._cache.beta = undefined;
  57. this._cache.radius = undefined;
  58. };
  59. ArcRotateCamera.prototype._updateCache = function (ignoreParentClass) {
  60. if (!ignoreParentClass) {
  61. _super.prototype._updateCache.call(this);
  62. }
  63. this._cache.target.copyFrom(this._getTargetPosition());
  64. this._cache.alpha = this.alpha;
  65. this._cache.beta = this.beta;
  66. this._cache.radius = this.radius;
  67. };
  68. // Synchronized
  69. ArcRotateCamera.prototype._isSynchronizedViewMatrix = function () {
  70. if (!_super.prototype._isSynchronizedViewMatrix.call(this))
  71. return false;
  72. return this._cache.target.equals(this._getTargetPosition()) && this._cache.alpha === this.alpha && this._cache.beta === this.beta && this._cache.radius === this.radius;
  73. };
  74. // Methods
  75. ArcRotateCamera.prototype.attachControl = function (element, noPreventDefault) {
  76. var _this = this;
  77. var previousPosition;
  78. var pointerId;
  79. // to know if pinch started
  80. var pinchStarted = false;
  81. // two pinch point on X
  82. // that will use for find if user action is pinch open or pinch close
  83. var pinchPointX1, pinchPointX2;
  84. if (this._attachedElement) {
  85. return;
  86. }
  87. this._attachedElement = element;
  88. var engine = this.getEngine();
  89. if (this._onPointerDown === undefined) {
  90. this._onPointerDown = function (evt) {
  91. if (pointerId) {
  92. return;
  93. }
  94. pointerId = evt.pointerId;
  95. previousPosition = {
  96. x: evt.clientX,
  97. y: evt.clientY
  98. };
  99. if (!noPreventDefault) {
  100. evt.preventDefault();
  101. }
  102. };
  103. this._onPointerUp = function (evt) {
  104. previousPosition = null;
  105. pointerId = null;
  106. if (!noPreventDefault) {
  107. evt.preventDefault();
  108. }
  109. };
  110. this._onPointerMove = function (evt) {
  111. if (!previousPosition) {
  112. return;
  113. }
  114. if (pointerId !== evt.pointerId) {
  115. return;
  116. }
  117. // return pinch is started
  118. if (pinchStarted) {
  119. return;
  120. }
  121. var offsetX = evt.clientX - previousPosition.x;
  122. var offsetY = evt.clientY - previousPosition.y;
  123. _this.inertialAlphaOffset -= offsetX / _this.angularSensibility;
  124. _this.inertialBetaOffset -= offsetY / _this.angularSensibility;
  125. previousPosition = {
  126. x: evt.clientX,
  127. y: evt.clientY
  128. };
  129. if (!noPreventDefault) {
  130. evt.preventDefault();
  131. }
  132. };
  133. this._onMouseMove = function (evt) {
  134. if (!engine.isPointerLock) {
  135. return;
  136. }
  137. // return pinch is started
  138. if (pinchStarted) {
  139. return;
  140. }
  141. var offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
  142. var offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
  143. _this.inertialAlphaOffset -= offsetX / _this.angularSensibility;
  144. _this.inertialBetaOffset -= offsetY / _this.angularSensibility;
  145. if (!noPreventDefault) {
  146. evt.preventDefault();
  147. }
  148. };
  149. this._wheel = function (event) {
  150. var delta = 0;
  151. if (event.wheelDelta) {
  152. delta = event.wheelDelta / (_this.wheelPrecision * 40);
  153. } else if (event.detail) {
  154. delta = -event.detail / _this.wheelPrecision;
  155. }
  156. if (delta)
  157. _this.inertialRadiusOffset += delta;
  158. if (event.preventDefault) {
  159. if (!noPreventDefault) {
  160. event.preventDefault();
  161. }
  162. }
  163. };
  164. this._onKeyDown = function (evt) {
  165. if (_this.keysUp.indexOf(evt.keyCode) !== -1 || _this.keysDown.indexOf(evt.keyCode) !== -1 || _this.keysLeft.indexOf(evt.keyCode) !== -1 || _this.keysRight.indexOf(evt.keyCode) !== -1) {
  166. var index = _this._keys.indexOf(evt.keyCode);
  167. if (index === -1) {
  168. _this._keys.push(evt.keyCode);
  169. }
  170. if (evt.preventDefault) {
  171. if (!noPreventDefault) {
  172. evt.preventDefault();
  173. }
  174. }
  175. }
  176. };
  177. this._onKeyUp = function (evt) {
  178. if (_this.keysUp.indexOf(evt.keyCode) !== -1 || _this.keysDown.indexOf(evt.keyCode) !== -1 || _this.keysLeft.indexOf(evt.keyCode) !== -1 || _this.keysRight.indexOf(evt.keyCode) !== -1) {
  179. var index = _this._keys.indexOf(evt.keyCode);
  180. if (index >= 0) {
  181. _this._keys.splice(index, 1);
  182. }
  183. if (evt.preventDefault) {
  184. if (!noPreventDefault) {
  185. evt.preventDefault();
  186. }
  187. }
  188. }
  189. };
  190. this._onLostFocus = function () {
  191. _this._keys = [];
  192. pointerId = null;
  193. };
  194. this._onGestureStart = function (e) {
  195. if (window.MSGesture === undefined) {
  196. return;
  197. }
  198. if (!_this._MSGestureHandler) {
  199. _this._MSGestureHandler = new MSGesture();
  200. _this._MSGestureHandler.target = element;
  201. }
  202. _this._MSGestureHandler.addPointer(e.pointerId);
  203. };
  204. this._onGesture = function (e) {
  205. _this.radius *= e.scale;
  206. if (e.preventDefault) {
  207. if (!noPreventDefault) {
  208. e.stopPropagation();
  209. e.preventDefault();
  210. }
  211. }
  212. };
  213. this._reset = function () {
  214. _this._keys = [];
  215. _this.inertialAlphaOffset = 0;
  216. _this.inertialBetaOffset = 0;
  217. _this.inertialRadiusOffset = 0;
  218. previousPosition = null;
  219. pointerId = null;
  220. };
  221. this._touchStart = function (event) {
  222. if (event.touches.length == 2) {
  223. //-- start pinch if two fingers on the screen
  224. pinchStarted = true;
  225. _this._pinchStart(event);
  226. }
  227. };
  228. this._touchMove = function (event) {
  229. if (pinchStarted) {
  230. //-- make scaling
  231. _this._pinchMove(event);
  232. }
  233. };
  234. this._touchEnd = function (event) {
  235. if (pinchStarted) {
  236. //-- end of pinch
  237. _this._pinchEnd(event);
  238. }
  239. };
  240. this._pinchStart = function (event) {
  241. // save origin touch point
  242. pinchPointX1 = event.touches[0].clientX;
  243. pinchPointX2 = event.touches[1].clientX;
  244. // block the camera
  245. // if not it rotate around target during pinch
  246. pinchStarted = true;
  247. };
  248. this._pinchMove = function (event) {
  249. // variable for new camera's radius
  250. var delta = 0;
  251. // variables to know if pinch open or pinch close
  252. var direction = 1;
  253. var distanceXOrigine, distanceXNow;
  254. if (event.touches.length != 2)
  255. return;
  256. // calculate absolute distances of the two fingers
  257. distanceXOrigine = Math.abs(pinchPointX1 - pinchPointX2);
  258. distanceXNow = Math.abs(event.touches[0].clientX - event.touches[1].clientX);
  259. // if distanceXNow < distanceXOrigine -> pinch close so direction = -1
  260. if (distanceXNow < distanceXOrigine) {
  261. direction = -1;
  262. }
  263. // calculate new radius
  264. delta = (_this.pinchPrecision / (_this.wheelPrecision * 40)) * direction;
  265. // set new radius
  266. _this.inertialRadiusOffset += delta;
  267. // save origin touch point
  268. pinchPointX1 = event.touches[0].clientX;
  269. pinchPointX2 = event.touches[1].clientX;
  270. };
  271. this._pinchEnd = function (event) {
  272. // cancel pinch and deblock camera rotation
  273. pinchStarted = false;
  274. };
  275. }
  276. element.addEventListener(eventPrefix + "down", this._onPointerDown, false);
  277. element.addEventListener(eventPrefix + "up", this._onPointerUp, false);
  278. element.addEventListener(eventPrefix + "out", this._onPointerUp, false);
  279. element.addEventListener(eventPrefix + "move", this._onPointerMove, false);
  280. element.addEventListener("mousemove", this._onMouseMove, false);
  281. element.addEventListener("MSPointerDown", this._onGestureStart, false);
  282. element.addEventListener("MSGestureChange", this._onGesture, false);
  283. element.addEventListener('mousewheel', this._wheel, false);
  284. element.addEventListener('DOMMouseScroll', this._wheel, false);
  285. // pinch
  286. element.addEventListener('touchstart', this._touchStart, false);
  287. element.addEventListener('touchmove', this._touchMove, false);
  288. element.addEventListener('touchend', this._touchEnd, false);
  289. BABYLON.Tools.RegisterTopRootEvents([
  290. { name: "keydown", handler: this._onKeyDown },
  291. { name: "keyup", handler: this._onKeyUp },
  292. { name: "blur", handler: this._onLostFocus }
  293. ]);
  294. };
  295. ArcRotateCamera.prototype.detachControl = function (element) {
  296. if (this._attachedElement != element) {
  297. return;
  298. }
  299. element.removeEventListener(eventPrefix + "down", this._onPointerDown);
  300. element.removeEventListener(eventPrefix + "up", this._onPointerUp);
  301. element.removeEventListener(eventPrefix + "out", this._onPointerUp);
  302. element.removeEventListener(eventPrefix + "move", this._onPointerMove);
  303. element.removeEventListener("mousemove", this._onMouseMove);
  304. element.removeEventListener("MSPointerDown", this._onGestureStart);
  305. element.removeEventListener("MSGestureChange", this._onGesture);
  306. element.removeEventListener('mousewheel', this._wheel);
  307. element.removeEventListener('DOMMouseScroll', this._wheel);
  308. // pinch
  309. element.removeEventListener('touchstart', this._touchStart);
  310. element.removeEventListener('touchmove', this._touchMove);
  311. element.removeEventListener('touchend', this._touchEnd);
  312. BABYLON.Tools.UnregisterTopRootEvents([
  313. { name: "keydown", handler: this._onKeyDown },
  314. { name: "keyup", handler: this._onKeyUp },
  315. { name: "blur", handler: this._onLostFocus }
  316. ]);
  317. this._MSGestureHandler = null;
  318. this._attachedElement = null;
  319. if (this._reset) {
  320. this._reset();
  321. }
  322. };
  323. ArcRotateCamera.prototype._update = function () {
  324. for (var index = 0; index < this._keys.length; index++) {
  325. var keyCode = this._keys[index];
  326. if (this.keysLeft.indexOf(keyCode) !== -1) {
  327. this.inertialAlphaOffset -= 0.01;
  328. } else if (this.keysUp.indexOf(keyCode) !== -1) {
  329. this.inertialBetaOffset -= 0.01;
  330. } else if (this.keysRight.indexOf(keyCode) !== -1) {
  331. this.inertialAlphaOffset += 0.01;
  332. } else if (this.keysDown.indexOf(keyCode) !== -1) {
  333. this.inertialBetaOffset += 0.01;
  334. }
  335. }
  336. // Inertia
  337. if (this.inertialAlphaOffset != 0 || this.inertialBetaOffset != 0 || this.inertialRadiusOffset != 0) {
  338. this.alpha += this.inertialAlphaOffset;
  339. this.beta += this.inertialBetaOffset;
  340. this.radius -= this.inertialRadiusOffset;
  341. this.inertialAlphaOffset *= this.inertia;
  342. this.inertialBetaOffset *= this.inertia;
  343. this.inertialRadiusOffset *= this.inertia;
  344. if (Math.abs(this.inertialAlphaOffset) < BABYLON.Engine.Epsilon)
  345. this.inertialAlphaOffset = 0;
  346. if (Math.abs(this.inertialBetaOffset) < BABYLON.Engine.Epsilon)
  347. this.inertialBetaOffset = 0;
  348. if (Math.abs(this.inertialRadiusOffset) < BABYLON.Engine.Epsilon)
  349. this.inertialRadiusOffset = 0;
  350. }
  351. // Limits
  352. if (this.lowerAlphaLimit && this.alpha < this.lowerAlphaLimit) {
  353. this.alpha = this.lowerAlphaLimit;
  354. }
  355. if (this.upperAlphaLimit && this.alpha > this.upperAlphaLimit) {
  356. this.alpha = this.upperAlphaLimit;
  357. }
  358. if (this.lowerBetaLimit && this.beta < this.lowerBetaLimit) {
  359. this.beta = this.lowerBetaLimit;
  360. }
  361. if (this.upperBetaLimit && this.beta > this.upperBetaLimit) {
  362. this.beta = this.upperBetaLimit;
  363. }
  364. if (this.lowerRadiusLimit && this.radius < this.lowerRadiusLimit) {
  365. this.radius = this.lowerRadiusLimit;
  366. }
  367. if (this.upperRadiusLimit && this.radius > this.upperRadiusLimit) {
  368. this.radius = this.upperRadiusLimit;
  369. }
  370. };
  371. ArcRotateCamera.prototype.setPosition = function (position) {
  372. var radiusv3 = position.subtract(this._getTargetPosition());
  373. this.radius = radiusv3.length();
  374. // Alpha
  375. this.alpha = Math.acos(radiusv3.x / Math.sqrt(Math.pow(radiusv3.x, 2) + Math.pow(radiusv3.z, 2)));
  376. if (radiusv3.z < 0) {
  377. this.alpha = 2 * Math.PI - this.alpha;
  378. }
  379. // Beta
  380. this.beta = Math.acos(radiusv3.y / this.radius);
  381. };
  382. ArcRotateCamera.prototype._getViewMatrix = function () {
  383. // Compute
  384. var cosa = Math.cos(this.alpha);
  385. var sina = Math.sin(this.alpha);
  386. var cosb = Math.cos(this.beta);
  387. var sinb = Math.sin(this.beta);
  388. var target = this._getTargetPosition();
  389. target.addToRef(new BABYLON.Vector3(this.radius * cosa * sinb, this.radius * cosb, this.radius * sina * sinb), this.position);
  390. if (this.checkCollisions) {
  391. this._collider.radius = this.collisionRadius;
  392. this.position.subtractToRef(this._previousPosition, this._collisionVelocity);
  393. this.getScene()._getNewPosition(this._previousPosition, this._collisionVelocity, this._collider, 3, this._newPosition);
  394. if (!this._newPosition.equalsWithEpsilon(this.position)) {
  395. this.position.copyFrom(this._previousPosition);
  396. this.alpha = this._previousAlpha;
  397. this.beta = this._previousBeta;
  398. this.radius = this._previousRadius;
  399. if (this.onCollide) {
  400. this.onCollide(this._collider.collidedMesh);
  401. }
  402. }
  403. }
  404. BABYLON.Matrix.LookAtLHToRef(this.position, target, this.upVector, this._viewMatrix);
  405. this._previousAlpha = this.alpha;
  406. this._previousBeta = this.beta;
  407. this._previousRadius = this.radius;
  408. this._previousPosition.copyFrom(this.position);
  409. return this._viewMatrix;
  410. };
  411. ArcRotateCamera.prototype.zoomOn = function (meshes) {
  412. meshes = meshes || this.getScene().meshes;
  413. var minMaxVector = BABYLON.Mesh.MinMax(meshes);
  414. var distance = BABYLON.Vector3.Distance(minMaxVector.min, minMaxVector.max);
  415. this.radius = distance * this.zoomOnFactor;
  416. this.focusOn({ min: minMaxVector.min, max: minMaxVector.max, distance: distance });
  417. };
  418. ArcRotateCamera.prototype.focusOn = function (meshesOrMinMaxVectorAndDistance) {
  419. var meshesOrMinMaxVector;
  420. var distance;
  421. if (meshesOrMinMaxVectorAndDistance.min === undefined) {
  422. meshesOrMinMaxVector = meshesOrMinMaxVectorAndDistance || this.getScene().meshes;
  423. meshesOrMinMaxVector = BABYLON.Mesh.MinMax(meshesOrMinMaxVector);
  424. distance = BABYLON.Vector3.Distance(meshesOrMinMaxVector.min, meshesOrMinMaxVector.max);
  425. } else {
  426. meshesOrMinMaxVector = meshesOrMinMaxVectorAndDistance;
  427. distance = meshesOrMinMaxVectorAndDistance.distance;
  428. }
  429. this.target = BABYLON.Mesh.Center(meshesOrMinMaxVector);
  430. this.maxZ = distance * 2;
  431. };
  432. return ArcRotateCamera;
  433. })(BABYLON.Camera);
  434. BABYLON.ArcRotateCamera = ArcRotateCamera;
  435. })(BABYLON || (BABYLON = {}));
  436. //# sourceMappingURL=babylon.arcRotateCamera.js.map