JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://aninoob.com/noobshapes/css/noob.shapes.css">
<script src="https://aninoob.com/noobshapes/js/noob.shapes.js"></script>
<div class="stage">

</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  background-color:#000;
  perspective:500px;
}

JavaScript

noobshapes.set_target($('.stage'));

noobshape_0 = noobshapes.create('cube',{"shape":"cube","opacity":1,"backface":false,"animation_name":"none","animation_delay":0,"animation_duration":1000,"animation_iteration_count":"1","animation_direction":"normal","animation_fill_mode":"forward","animation_timing_function":"ease-in-out","brightness":1,"x":0,"y":0,"z":0,"ox":0,"oy":0,"oz":0,"bg_x":0,"bg_y":0,"bg_scale_x":100,"bg_scale_y":100,"rx":0,"ry":0,"rz":0,"sx":1,"sy":1,"sz":1,"skew_x":0,"skew_y":0,"width":100,"height":100,"depth":100,"color":"#333333","texture":"none","perspective":"none","outlinecolor":"#ffffff","outlinewidth":1,"outlinestroke":"none","blend_mode":"normal","hide_top":false,"hide_bottom":false,"hide_front":false,"hide_back":false,"hide_left":false,"hide_right":false,"locked":false,"clippath":"none"});



var Vector3 = {

   distanceBetweenPoints: function( v1 , v2 ){

    return Math.sqrt(((v2.x - v1.x) * (v2.x - v1.x)) + ((v2.y - v1.y) * (v2.y - v1.y)) + ((v2.z - v1.z) * (v2.z - v1.z)));

  },
  
   angleBetweenPoints: function( v1 , v2 ){
   
     return {
    
   		rx: (Math.atan2(v2.y - v1.y, v2.z - v1.z) * 180 / Math.PI)*-1,
      ry: (Math.atan2(v2.z - v1.z, v2.x - v1.x) * 180 / Math.PI)-90
      
		 }
    
  },
  
  cartesianConversion: function(r,O,o){

	O = O * Math.PI / 180.0;
	o = o * Math.PI / 180.0;

	var x = r * Math.sin(o) * Math.cos(O);
	var y = r * Math.sin(o) * Math.sin(O);
	var z = r * Math.cos(o);
  
  return { x: x, y: y, z: z };

},
  
  nextPosition: function(v,d){
  
  	var x = v.x;
		var y = v.y;
		var z = v.z;
		var rx = v.rx;
		var ry = v.ry;
		var rz = v.rz;
    
    var p = this.cartesianConversion(d,rx,ry);
    
    
		return { x: x+p.x, y: y+p.y, z: z+p.z, rx: rx, ry: ry, rz: rz };
		
	},
  
  convertToKeyframes: function(v1,v2,frames){
  	
  	var keyframes = Array();
    
    
  	var d = this.distanceBetweenPoints(v1,v2);
    
    var i = d/frames;
    
    var a = this.angleBetweenPoints( v1 , v2 );
    
    
    var v...