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>
<div class="helmet">
  
</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;
}

.helmet{
  position:fixed;
  left:50%;
  top:50%;
  right:50%;
  bottom:50%;
  height:0px;
  width:0px;
  transform-style:preserve-3d;
}

.nooblighting-light{
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  transform-style:preserve-3d;
}
.nooblighting-light>.nooblighting-point-of-light{
  position:absolute;
  width:100px;
  height:100px;
  margin-left:-50px;
  margin-top:-50px;
  border-radius:50%;
  background-color:rgba(255,255,255,0.3);
  transform:translateZ(-500px);
  -webkit-box-shadow: 0 0 30px 0 #ffffff;
  box-shadow: 0 0 30px 0 #ffffff;
}
.nooblighting-light>.nooblighting-point-of-focus{
  position:absolute;
  width:100px;
  height:100px;
  margin-left:-50px;
  margin-top:-50px;
  border-radius:50%;
  background-color:rgba(255,0,0,0.3);
  transform:translateZ(2500px);
}






.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{
 ...

JavaScript

var nooblighting = {

	lights: Array(),
  
  target: $('.helmet'),
  
  point: { x: 0, y: 0, z: 0 },
  
  create: function(o){
  
  
  	
    var l = $('<div class="nooblighting-light"><div class="nooblighting-point-of-light"></div><div class="nooblighting-point-of-focus"></div></div>');
    
    l.find('.nooblighting-point-of-light').css('background-color',o.light_color).css('box-shadow',' 0 0 ' + o.light_haze + 'px 0 ' + o.light_haze_color).css('transform','translateZ(' + o.light_distance + 'px) scale(' + o.light_size + ')');
      
      l.find('.nooblighting-point-of-focus').css('transform','translateZ(' + o.focus_distance + 'px) scale(' + o.focus_size + ')').css('background-color',o.focus_color).css('box-shadow',' 0 0 ' + o.focus_haze + 'px 0 ' + o.focus_haze_color);
      
    nooblighting.target.append(l);
  	
    	
    o.element = l;
    
    nooblighting.lights.push(o);
    
    if(nooblighting.lights.length == 1){
    
    	setTimeout(function(){
      
      	nooblighting.render(nooblighting.point);
    	
      },1000);
      
    }
    
  },
  
  render: function(point){
  
  
  	for(i=0;i<nooblighting.lights.length;i++){
    	
  		var d = nooblighting.distance(point, nooblighting.lights[i].point);
      
      var rx = nooblighting.direction(point.x, point.y, nooblighting.lights[i].point.x, nooblighting.lights[i].point.y);
      var ry = nooblighting.direction(point.x, point.z, nooblighting.lights[i].point.x, nooblighting.lights[i].point.z);
     
      
      nooblighting.lights[i].element.css('transform','rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)');
      
    }
    
    requestAnimationFrame(function(){
    
    	//nooblighting.point = {x: nooblighting.point.x + 5, y: nooblighting.point.y - 0, z: nooblighting.point.z + 5 };
      
      nooblighting.render(nooblighting.point);
    
    });
  
  },
  
  direction: function(x1, y1, x2, y2) {
  
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    
    
    return angle;
    
	},
  
 ...