JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage">
  
</div>

CSS

html,
body{
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  perspective:500px;
  background-color:#000;
  background-image:url(http://cdn.wallpapersafari.com/3/4/wJBa8W.jpg);
}
.stage{
  position:fixed;
  left:50%;
  top:50%;
  right:50%;
  bottom:50%;
  height:0px;
  width:0px;
  transform-style:preserve-3d;
}



.noob-cinema{
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  transform-style:preserve-3d;
  transform:translateZ(-500px);
  pointer-events:none;
}
.noob-cinema>.noob-cinema-frame{
  position:absolute;
  width:960px;
  height:540px;
  margin-left:-480px;
  margin-top:-270px;
  border-radius:50%;
  background-color:rgba(0,0,0,0.3);
}







.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;
  pointer-events:none;
}

.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;
  pointer-events:auto;
}
.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;
 ...

JavaScript

var noobcinema = {

	screens: Array(),
  
  target: null,
  target_selector: '.stage',
  
  create: function(o){
  
    noobcinema.target = $('.stage');
  	
    var c = $('<div class="noob-cinema"><iframe class="noob-cinema-frame" src="' + o.src + '"></iframe></div>');
    
    noobcinema.target.append(c);
    
  	noobcinema.screens.push(o)
  
  }

}


noobcinema.create({

	src: 'https://aninoob.com/particles/',
  
  point: {
  	x: 0,
  	y: 0,
  	z: 0,
    rx: 0,
    ry: 0,
    rz: 0,
    sx: 1,
    sy: 1,
    sz: 1
  }
  
});




















$('body').attr('id','launchpad');


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,
  z: 500,
  
  light: null,
  
  faces: null,
  
  lighting_shade: .7,
  lighting_tint: .1,
  
  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...