VRButtonViewModel.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. import {
  2. defaultValue,
  3. defined,
  4. destroyObject,
  5. DeveloperError,
  6. EventHelper,
  7. Fullscreen,
  8. getElement,
  9. OrthographicFrustum,
  10. } from "@cesium/engine";
  11. import knockout from "../ThirdParty/knockout.js";
  12. import NoSleep from "nosleep.js";
  13. import createCommand from "../createCommand.js";
  14. function lockScreen(orientation) {
  15. let locked = false;
  16. const screen = window.screen;
  17. if (defined(screen)) {
  18. if (defined(screen.lockOrientation)) {
  19. locked = screen.lockOrientation(orientation);
  20. } else if (defined(screen.mozLockOrientation)) {
  21. locked = screen.mozLockOrientation(orientation);
  22. } else if (defined(screen.msLockOrientation)) {
  23. locked = screen.msLockOrientation(orientation);
  24. } else if (defined(screen.orientation && screen.orientation.lock)) {
  25. locked = screen.orientation.lock(orientation);
  26. }
  27. }
  28. return locked;
  29. }
  30. function unlockScreen() {
  31. const screen = window.screen;
  32. if (defined(screen)) {
  33. if (defined(screen.unlockOrientation)) {
  34. screen.unlockOrientation();
  35. } else if (defined(screen.mozUnlockOrientation)) {
  36. screen.mozUnlockOrientation();
  37. } else if (defined(screen.msUnlockOrientation)) {
  38. screen.msUnlockOrientation();
  39. } else if (defined(screen.orientation && screen.orientation.unlock)) {
  40. screen.orientation.unlock();
  41. }
  42. }
  43. }
  44. function toggleVR(viewModel, scene, isVRMode, isOrthographic) {
  45. if (isOrthographic()) {
  46. return;
  47. }
  48. if (isVRMode()) {
  49. scene.useWebVR = false;
  50. if (viewModel._locked) {
  51. unlockScreen();
  52. viewModel._locked = false;
  53. }
  54. viewModel._noSleep.disable();
  55. Fullscreen.exitFullscreen();
  56. isVRMode(false);
  57. } else {
  58. if (!Fullscreen.fullscreen) {
  59. Fullscreen.requestFullscreen(viewModel._vrElement);
  60. }
  61. viewModel._noSleep.enable();
  62. if (!viewModel._locked) {
  63. viewModel._locked = lockScreen("landscape");
  64. }
  65. scene.useWebVR = true;
  66. isVRMode(true);
  67. }
  68. }
  69. /**
  70. * The view model for {@link VRButton}.
  71. * @alias VRButtonViewModel
  72. * @constructor
  73. *
  74. * @param {Scene} scene The scene.
  75. * @param {Element|string} [vrElement=document.body] The element or id to be placed into VR mode.
  76. */
  77. function VRButtonViewModel(scene, vrElement) {
  78. //>>includeStart('debug', pragmas.debug);
  79. if (!defined(scene)) {
  80. throw new DeveloperError("scene is required.");
  81. }
  82. //>>includeEnd('debug');
  83. const that = this;
  84. const isEnabled = knockout.observable(Fullscreen.enabled);
  85. const isVRMode = knockout.observable(false);
  86. /**
  87. * Gets whether or not VR mode is active.
  88. *
  89. * @type {boolean}
  90. */
  91. this.isVRMode = undefined;
  92. knockout.defineProperty(this, "isVRMode", {
  93. get: function () {
  94. return isVRMode();
  95. },
  96. });
  97. /**
  98. * Gets or sets whether or not VR functionality should be enabled.
  99. *
  100. * @type {boolean}
  101. * @see Fullscreen.enabled
  102. */
  103. this.isVREnabled = undefined;
  104. knockout.defineProperty(this, "isVREnabled", {
  105. get: function () {
  106. return isEnabled();
  107. },
  108. set: function (value) {
  109. isEnabled(value && Fullscreen.enabled);
  110. },
  111. });
  112. /**
  113. * Gets the tooltip. This property is observable.
  114. *
  115. * @type {string}
  116. */
  117. this.tooltip = undefined;
  118. knockout.defineProperty(this, "tooltip", function () {
  119. if (!isEnabled()) {
  120. return "VR mode is unavailable";
  121. }
  122. return isVRMode() ? "Exit VR mode" : "Enter VR mode";
  123. });
  124. const isOrthographic = knockout.observable(false);
  125. this._isOrthographic = undefined;
  126. knockout.defineProperty(this, "_isOrthographic", {
  127. get: function () {
  128. return isOrthographic();
  129. },
  130. });
  131. this._eventHelper = new EventHelper();
  132. this._eventHelper.add(scene.preRender, function () {
  133. isOrthographic(scene.camera.frustum instanceof OrthographicFrustum);
  134. });
  135. this._locked = false;
  136. this._noSleep = new NoSleep();
  137. this._command = createCommand(function () {
  138. toggleVR(that, scene, isVRMode, isOrthographic);
  139. }, knockout.getObservable(this, "isVREnabled"));
  140. this._vrElement = defaultValue(getElement(vrElement), document.body);
  141. this._callback = function () {
  142. if (!Fullscreen.fullscreen && isVRMode()) {
  143. scene.useWebVR = false;
  144. if (that._locked) {
  145. unlockScreen();
  146. that._locked = false;
  147. }
  148. that._noSleep.disable();
  149. isVRMode(false);
  150. }
  151. };
  152. document.addEventListener(Fullscreen.changeEventName, this._callback);
  153. }
  154. Object.defineProperties(VRButtonViewModel.prototype, {
  155. /**
  156. * Gets or sets the HTML element to place into VR mode when the
  157. * corresponding button is pressed.
  158. * @memberof VRButtonViewModel.prototype
  159. *
  160. * @type {Element}
  161. */
  162. vrElement: {
  163. //TODO:@exception {DeveloperError} value must be a valid HTML Element.
  164. get: function () {
  165. return this._vrElement;
  166. },
  167. set: function (value) {
  168. //>>includeStart('debug', pragmas.debug);
  169. if (!(value instanceof Element)) {
  170. throw new DeveloperError("value must be a valid Element.");
  171. }
  172. //>>includeEnd('debug');
  173. this._vrElement = value;
  174. },
  175. },
  176. /**
  177. * Gets the Command to toggle VR mode.
  178. * @memberof VRButtonViewModel.prototype
  179. *
  180. * @type {Command}
  181. */
  182. command: {
  183. get: function () {
  184. return this._command;
  185. },
  186. },
  187. });
  188. /**
  189. * @returns {boolean} true if the object has been destroyed, false otherwise.
  190. */
  191. VRButtonViewModel.prototype.isDestroyed = function () {
  192. return false;
  193. };
  194. /**
  195. * Destroys the view model. Should be called to
  196. * properly clean up the view model when it is no longer needed.
  197. */
  198. VRButtonViewModel.prototype.destroy = function () {
  199. this._eventHelper.removeAll();
  200. document.removeEventListener(Fullscreen.changeEventName, this._callback);
  201. destroyObject(this);
  202. };
  203. export default VRButtonViewModel;