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>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<p>x:<span id="x">0</span><div class="slide-x"></div></p>
<p>y:<span id="y">0</span><div class="slide-y"></div></p>
<p>z:<span id="z">0</span><div class="slide-z"></div></p>

<div class="light"></div>
<div class="cockpit">
</div>

CSS

body{
  background-color:#000;
  color:#fff;
  font-family:arial;
  margin:0px;
  padding:10px;
  perspective:500px;
  height:100%;
}
html{
  height:100%;
}
.light{
  position:absolute;
  width:100px;
  height:100px;
  margin-left:-50px;
  margin-top:-50px;
  background-color:#ffcc00;
  border-radius:50%;
  top:50%;
  left:50%;
}
.cockpit{
  background-image:url(http://aninoob.com/particles/assets/cockpit/cockpit.png);
  top:150px;
  left:0px;
  bottom:0px;
  right:0px;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:fixed;
  pointer-events:none;
  z-index:-1;
  transform-style:preserve-3d;
  transition:all 0s;
  transform-origin: 50% 50% 300px;
  transform: translateZ(1000px) rotateX(15deg);
}

JavaScript

var odl = {

	effected: $('.cockpit'),
  light: $('.light'),
  
  minimum_brightness: .3,
  
  lightposition: {x: 0, y: 0, z: -1000 },
	position: {x: 0, y: 0, z: 0 },
  
   movelight:function(vector3d,time){
  
  	odl.lightposition = vector3d;
  
  	odl.render_lighting(time);
    
  },
  calculate_ry: function(){
  
  	var p1 = odl.position;

    var p2 = odl.lightposition;

    // angle in degrees
    return (Math.atan2(p2.z - p1.z, p2.x - p1.x) * 180 / Math.PI)+90;

  },
  calculate_rx: function(){
  
  	var p1 = odl.position;

    var p2 = odl.lightposition;

    // angle in degrees
    return (Math.atan2(odl.calculate_base(),p2.y - p1.y) * 180 / Math.PI)-90;

  },
  calculate_base: function(){
  
  	var a = odl.position.x - odl.lightposition.x;
		var b = odl.position.z - odl.lightposition.z;
  	return Math.sqrt( a*a + b*b );
  
  },
  render_lighting: function(){
  
  	var rx = odl.calculate_rx();
    var ry = odl.calculate_ry();
    
    var brightness1 = (1+odl.minimum_brightness)-Math.abs((ry-180)/100);
    var brightness2 = (1+odl.minimum_brightness)-Math.abs((rx-180)/100);
    
    console.log("RX: " + rx);
    //console.log("RY: " + ((ry-180)*-1));
    // base on just ry for now
    
     odl.effected.css('filter','brightness(' + Math.max(brightness1,brightness2) + ')');
  
  	odl.light.css('transform','translateX(' + odl.lightposition.x + 'px) translateY(' + odl.lightposition.y + 'px) translateZ(' + odl.lightposition.z + 'px)');
  }

}

$( ".slide-x" ).slider({
	min: -1000,
  max: 1000,
  value: 0,
  slide: function(event, ui){
  	
    $('#x').text(ui.value);
    odl.lightposition.x = ui.value;
  	odl.render_lighting();
    
  }
});
$( ".slide-y" ).slider({
	min: -1000,
  max: 1000,
  value: 0,
  slide: function(event, ui){
  	
    $('#y').text(ui.value);
    odl.lightposition.y = ui.value;
  	odl.render_lighting();
    
  }
});
$( ".slide-z" ).slider({
	min: -1000,
  max: 1000,
  value: 0,
  slide: function(event, ui){
  	
    $('#z').text(ui.value);
...