JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="stage">
  <div class="floor"></div>
</div>

CSS

body{
  perspective:500px;
}
.stage{
  transform-style:preserve-3d;
}
.floor{
  width:1000px;
  height:1000px;
  background-color:#ff0000;
  transform:rotateX(90deg);
  position:absolute;
}

JavaScript

var lights = {};

lights.lights = Array({ x: -300, y: -300, z: -300, strength: 1000, color: '#ffffff' });
lights.objects = Array({ x: 0, y: 0, z: 0, element: $('.floor') });

lights.on = function(){

	for(light=0;light<lights.lights.length;light++){
  
  	lights.distance(
      { x: 30, y: 20, z: 16 },
      { x: 10, y: 40, z: 46 }
    );
  
  }
  
}

lights.distance = function(o1, o2){

	return Math.sqrt(Math.pow(o2.x-o1.x,2)+Math.pow(o2.y-o1.y,2)+Math.pow(o2.z-o1.z,2));
  
}

lights.distance(
	{ x: 30, y: 20, z: 16 },
  { x: 10, y: 40, z: 46 }
);