JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="launchpad">
  <div class="stage">
    <div class="object">
    
    </div>
  </div>
</div>

CSS

html,body{
  margin:0px;
  height:100%;
}
#launchpad{
  height:100%;
  position:relative;
  perspective:500px;
}
#launchpad .stage{
  position:absolute;
  left:50%;
  top:50%;
  width:0px;
  height:0px;
  transform-style:preserve-3d;
}
#launchpad .stage .object{
  width:200px;
  height:200px;
  position:absolute;
  top:0px;
  left:0px;
  margin-top:-100px;
  margin-left:-100px;
  background-color:#ff0000;
}
.headtrackingmouse-options{
  position:fixed;
  z-index:99999999999999999999;
  top:0px;
  right:0px;
  left:0px;
  bottom:0px;
  background-color:rgba(0,0,0,0.7);
  transition:all .7s;
}

.headtrackingmouse-options .headtrackingmouse-buttons{
  width:300px;
  position:absolute;
  left:50%;
  top:50%;
  height:140px;
  margin-left:-150px;
  margin-top:-70px;
  background-color:#000;
  border-radius:10px;
  text-align:center;
  transition:all .7s;
}
.headtrackingmouse-options .headtrackingmouse-buttons button{
  background-color:#666;
  color:#fff;
  padding:12px;
  width:140px;
  border:none;
  text-transform:uppercase;
  margin:1px;
  cursor:pointer;
  transition:all .4s;
  outline:none;
}
.headtrackingmouse-options .headtrackingmouse-buttons button:hover{
  background-color:#33cc33;
}
.headtrackingmouse-options .headtrackingmouse-buttons button.cancel:hover{
  background-color:#ff0000;
}
.headtrackingmouse-options p{
  color:#fff;
  font-family:helvetica;
  font-size:17px;
  text-align:center;
}
.headtrackingmouse-options p.pointerlock-error{
  color:#ff0000;
  font-family:helvetica;
  font-size:17px;
  text-align:center;
}
.headtrackingmouse-options.minimized{
  pointer-events:none;
  background-color:transparent;
}
.headtrackingmouse-options.locked{
  display:none;
}
.headtrackingmouse-options.minimized .headtrackingmouse-buttons{
  width:32px;
  height:24px;
  left:0%;
  top:0%;
  margin:0px;
  border-radius:0px;
  pointer-events:auto !important;
  cursor:pointer;
}
.headtrackingmouse-options.minimized .headtrackingmouse-buttons...

JavaScript

var headtrackingmouse = {

	locked: false,
  
  invert_pitch: false,
  
  context: 'launchpad', // id of the main content holder
  
  movementX: 0,
  movementY: 0,
  
  debugger: $('.pointerlock-debugger'),
  
  component: null,
  stage: $('.stage'),
  
  rx: 0,
  ry: 0,
  
  sensitivity: 0.1,
  
  start: function(stage){
  
  	headtrackingmouse.stage = stage;
  
  	// start by locking the pointer - must be human interaction so show a button set of options allowing them to lock or cancel
    
    headtrackingmouse.component = $('<div class="headtrackingmouse-options"><div class="headtrackingmouse-buttons"><p>Headtracker Mouse Options</p><p>Sensitivity: <input type="number" min="0.01" max="0.2" step="0.01" value="' + headtrackingmouse.sensitivity + '" /></p><button class="confirm">Lock Pointer</button><button class="cancel">Cancel</button><p class="pointerlock-error"></p><p class="pointerlock-debugger"></p></div></div>');
    
    $('body').append(headtrackingmouse.component);
    
    $('.headtrackingmouse-options .confirm').on('click',function(){
    
    	headtrackingmouse.lockpointer();
    
    });
    
    $('.headtrackingmouse-options input').on('change',function(){
    
    	headtrackingmouse.sensitivity = parseFloat($(this).val());
      
      });
    
    $('.headtrackingmouse-options .cancel').on('click',function(){
    
    	headtrackingmouse.component.addClass('minimized');
      
    });
    
    headtrackingmouse.debugger = $('.pointerlock-debugger');
    
  },
  lockpointer: function(){
  
    var element = document.getElementById(headtrackingmouse.context);

    element.requestPointerLock = element.requestPointerLock ||
    element.mozRequestPointerLock ||
    element.webkitRequestPointerLock;
    // Ask the browser to lock the pointer
    element.requestPointerLock();

    document.addEventListener('pointerlockerror', headtrackingmouse.lockError, false);
    document.addEventListener('mozpointerlockerror', headtrackingmouse.lockError, false);
  ...