SHARE
TWEET

Untitled

a guest Jul 23rd, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <!-- Modified version of pointer lock code to lock on click from the main loop, works on Safari -->
  3. <html lang="en"><head>
  4.   <title>Pointer Lock Test</title>
  5.  </head>
  6.  <body onload="startup()">
  7.  
  8. <div id="status-element" style="background-color: #FEE; white-space: pre-wrap;">dragx=0, dragy=0
  9. double clicks: 0</div>
  10. <script>
  11.   /* eslint no-bitwise:off, no-unused-expressions:off, vars-on-top:off, no-implicit-coercion:off */
  12. // The element we'll make pointer locked.
  13. var dragx=0;
  14. var dragy=0;
  15. var doubleclicks=0;
  16. var down_mask = 0;
  17. var pointerLock;
  18. // An immediate-mode, frame-based engine, like GLOV.js
  19. var engine = { global_frame_index: 0 };
  20.  
  21. function updateStatus() {
  22.   document.getElementById('status-element').textContent = 'dragx=' + dragx + ', dragy=' + dragy +
  23.     '\ndouble clicks: ' + doubleclicks + ' down=' + down_mask;
  24. }
  25.  
  26. function assert(exp) {
  27.   if (!exp) {
  28.     throw new Error('Assertion failed');
  29.   }
  30. }
  31.  
  32. function pointerLockCreate(elem) {
  33.   var deferred_lock_id = 0;
  34.   var want_lock_async = false;
  35.   var trying_direct_lock = 0;
  36.   var direct_lock_works = false; // unknown at start
  37.   var direct_lock_disabled = false;
  38.   var async_pointer_lock_start_frame = 0;
  39.  
  40.   function isLocked() {
  41.     return !!document.pointerLockElement;
  42.   }
  43.  
  44.   function exitLock() {
  45.     document.exitPointerLock();
  46.   }
  47.  
  48.   function onPointerLockChange() {
  49.     if (document.pointerLockElement || document.mozPointerLockElement || document.webkitPointerLockElement) {
  50.       console.log('Pointer Lock was successful.');
  51.       if (trying_direct_lock) {
  52.         console.log('Direct lock works!');
  53.         direct_lock_works = true;
  54.         trying_direct_lock = 0;
  55.       }
  56.     } else {
  57.       console.log('Pointer Lock was lost.');
  58.     }
  59.   }
  60.  
  61.   function onPointerLockError() {
  62.     console.log('Error while locking pointer.');
  63.     if (trying_direct_lock) {
  64.       direct_lock_disabled = true;
  65.       want_lock_async = true;
  66.       trying_direct_lock = 0;
  67.     }
  68.   }
  69.  
  70.   function asyncPointerLockCheck() {
  71.     deferred_lock_id = 0;
  72.     // If we asked for a lock, and direct locks are disabled, lock it
  73.     if (want_lock_async) {
  74.       want_lock_async = false;
  75.       console.log('Async pointer lock watcher executing lock');
  76.       elem.requestPointerLock();
  77.       return;
  78.     }
  79.     // If we successfully locked through any means, stop
  80.     if (direct_lock_works) {
  81.       console.log('Async pointer lock watcher canceled, direct lock worked');
  82.       return;
  83.     }
  84.     if (trying_direct_lock) {
  85.       // If we tried a direct lock 2+ frames ago, lock it, disable direct locks
  86.       if (engine.global_frame_index - trying_direct_lock >= 1) {
  87.         console.log('2 frames since attempting a direct pointer lock, assuming failed');
  88.         direct_lock_disabled = true;
  89.         trying_direct_lock = 0;
  90.         elem.requestPointerLock();
  91.         return;
  92.       }
  93.     } else if (engine.global_frame_index !== async_pointer_lock_start_frame) {
  94.       // tick has happened, no request for lock, stop watching
  95.       console.log('Async pointer lock watcher done, no lock request');
  96.       return;
  97.     }
  98.     deferred_lock_id = setTimeout(asyncPointerLockCheck, 1);
  99.   }
  100.  
  101.   function enterLock() {
  102.     // Assert that we got a mouse down event recently, otherwise this won't work
  103.     assert(engine.global_frame_index - async_pointer_lock_start_frame <= 2);
  104.     // If direct locks are disabled, just ask for async lock
  105.     if (direct_lock_disabled) {
  106.       console.log('Requesting async pointer lock');
  107.       want_lock_async = true;
  108.       return;
  109.     }
  110.     console.log('Trying direct pointer lock');
  111.     if (!direct_lock_works) { // if we don't know yet
  112.       trying_direct_lock = engine.global_frame_index;
  113.     }
  114.     elem.requestPointerLock();
  115.   }
  116.  
  117.   function allowAsync() {
  118.     async_pointer_lock_start_frame = engine.global_frame_index;
  119.     // If we know direct locks work, do nothing, otherwise start watcher
  120.     if (!direct_lock_works) {
  121.       console.log('Starting async pointer lock watcher');
  122.       if (deferred_lock_id) {
  123.         clearTimeout(deferred_lock_id);
  124.       }
  125.       deferred_lock_id = setTimeout(asyncPointerLockCheck, 1);
  126.     } else {
  127.       console.log('Direct lock works, not starting async watcher');
  128.     }
  129.   }
  130.  
  131.   elem.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock ||
  132.     elem.webkitRequestPointerLock || function () { /* nop */ };
  133.   document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock ||
  134.     document.webkitExitPointerLock || function () { /* nop */ };
  135.  
  136.   document.addEventListener('pointerlockchange', onPointerLockChange, false);
  137.   document.addEventListener('mozpointerlockchange', onPointerLockChange, false);
  138.   document.addEventListener('webkitpointerlockchange', onPointerLockChange, false);
  139.  
  140.   document.addEventListener('pointerlockerror', onPointerLockError, false);
  141.   document.addEventListener('mozpointerlockerror', onPointerLockError, false);
  142.   document.addEventListener('webkitpointerlockerror', onPointerLockError, false);
  143.  
  144.   return {
  145.     isLocked: isLocked,
  146.     allowAsync: allowAsync,
  147.     enter: enterLock,
  148.     exit: exitLock,
  149.   };
  150. }
  151.  
  152.  
  153. document.addEventListener('mousemove', function (e) {
  154.   var movementX = e.movementX ||
  155.                   e.mozMovementX ||
  156.                   e.webkitMovementX ||
  157.                   0;
  158.   var movementY = e.movementY ||
  159.                   e.mozMovementY ||
  160.                   e.webkitMovementY ||
  161.                   0;
  162.  
  163.   // Print the mouse movement delta values
  164.   if (pointerLock.isLocked()) {
  165.     dragx += movementX;
  166.     dragy += movementY;
  167.     updateStatus();
  168.     //console.log('movementX=' + movementX, 'movementY=' + movementY);
  169.   }
  170. }, false);
  171.  
  172. var had_click = false;
  173. function ondown(event) {
  174.   had_click = event.which;
  175.   down_mask |= (1 << event.which);
  176.   updateStatus();
  177.   pointerLock.allowAsync(); // Put this in any event handler that may indirectly cause a lock
  178. }
  179. function onup(event) {
  180.   down_mask &= ~(1 << event.which);
  181.   // if (!down_mask) {
  182.   //   exitLock();
  183.   // }
  184.   updateStatus();
  185.   pointerLock.allowAsync(); // Put this in any event handler that may indirectly cause a lock
  186. }
  187.  
  188. document.addEventListener('mousedown', ondown, false);
  189. document.addEventListener('mouseup', onup, false);
  190. document.addEventListener('dblclick', function () {
  191.   ++doubleclicks;
  192.   updateStatus();
  193. }, false);
  194.  
  195. function tick() {
  196.   ++engine.global_frame_index;
  197.   requestAnimationFrame(tick);
  198.   if (had_click === 1 && !pointerLock.isLocked()) {
  199.     pointerLock.enter();
  200.   } else if (had_click === 3) {
  201.     pointerLock.exit();
  202.   }
  203.   had_click = 0;
  204. }
  205.  
  206. function startup() {
  207.   pointerLock = pointerLockCreate(document.getElementById('status-element'));
  208.  
  209.   requestAnimationFrame(tick);
  210. }
  211.  
  212. </script>
  213. </body></html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top