JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="stage">
<div class="sun"></div>
</div>
<div class="cockpit">
<div class="cockpit-light-left"></div>
<div class="cockpit-light-top"></div>
<div class="cockpit-light-right"></div>
<div class="cockpit-light-bottom"></div>
</div>
<div class="console">DISTANCE: 180</div>
CSS
body{
background-color:#000;
}
.console{
color:#fff;
z-index:9999;
position:fixed;
}
.stage{
perspective:500px;
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.stage .sun{
background-image:url(http://www.pngall.com/wp-content/uploads/2016/07/Sun-PNG-HD.png);
width:547px;
height:548px;
position:absolute;
margin-top:-274px;
margin-left:-274px;
top:50%;
left:50%;
cursor:move;
}
.cockpit{
background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit.png);
top:0px;
left:0px;
bottom:0px;
right:0px;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:fixed;
pointer-events:none;
}
.cockpit>div{
width:100%;
height:100%;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
opacity:0;
transition:all 0s;
}
.cockpit .cockpit-light-left{
background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-left.png);
}
.cockpit .cockpit-light-top{
background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-top.png);
}
.cockpit .cockpit-light-right{
background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-right.png);
}
.cockpit .cockpit-light-bottom{
background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-bottom.png);
}
JavaScript
var cockpit = {
// properties for configuration
lightingdegree: .5,
maxlightdistance: 5000,
minbrightness: 0.3,
init: function(){
cockpit.position = { x: 0, y: 0, z: 0, rx: 0, ry: 0, rz: 0 };
cockpit.lightposition = { x: -3000, y: 0, z: -1000, rx: 0, ry: 0, rz: 0 };
cockpit.pit = $('.cockpit');
cockpit.light = $('.sun');
cockpit.console = $('.console');
cockpit.width = cockpit.pit.width();
cockpit.height = cockpit.pit.height();
cockpit.light_west = $('.cockpit .cockpit-light-left');
cockpit.light_north = $('.cockpit .cockpit-light-top');
cockpit.light_east = $('.cockpit .cockpit-light-right');
cockpit.light_south = $('.cockpit .cockpit-light-bottom');
$(document).mousemove(function(evt){
var x = evt.pageX - cockpit.pit.offset().left;
var y = evt.pageY - cockpit.pit.offset().top;
cockpit.render_lighting(x,y);
});
cockpit.positionlight();
cockpit.render_lighting();
setTimeout(function(){
cockpit.movelight({ x: 2000, y: 0, z: -2000, rx: 0, ry: 0, rz: 0 },2000);
setTimeout(function(){
cockpit.movelight({ x: 1000, y: -1000, z: -1000, rx: 0, ry: 0, rz: 0 },2000);
setTimeout(function(){
cockpit.movelight({ x: -1000, y: 0, z: 1000, rx: 0, ry: 0, rz: 0 },2000);
},2000);
},2000);
},100);
$('.sun').draggable({ update: function(evt){
var x = evt.pageX - cockpit.pit.offset().left;
var y = evt.pageY - cockpit.pit.offset().top;
}})
},
positionlight:function(){
cockpit.light.css('transform','translateX(' + cockpit.lightposition.x + 'px) translateY(' + cockpit.lightposition.y + 'px) translateZ(' + cockpit.lightposition.z + 'px) rotateX(' + cockpit.lightposition.rx + 'deg) rotateY(' + cockpit.lightposition.ry + 'deg) rotateZ(' + cockpit.lightposition.rz + 'deg)');
},
...