JSFiddle - React, Tailwind, and code Playground

by Neil Kolban

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<div id="myView" style="width: 500px; height: 500px; border: 1px solid;">

</div>
<div>
  X
  <div id="rotateX"></div>
</div>
<div>
  Y
  <div id="rotateY"></div>
</div>
<div>
  Z
  <div id="rotateZ"></div>
</div>

JavaScript

$(function() {
	function toRadians(angle) {
		return angle * (Math.PI / 180);
	};
	
	
	var width  = $("#myView").width();
	var height = $("#myView").height();
	var maxSlide = 180;
	var minSlide = -180;
	
	$("#rotateX").slider({
		"min": minSlide,
		"max": maxSlide,
		"step": 1,
		"value": 0,
		"slide": function(event, ui) {
			var x = toRadians($("#rotateX").slider("option", "value"));
			var y = toRadians($("#rotateY").slider("option", "value"));
			var z = toRadians($("#rotateZ").slider("option", "value"));	
			cube.rotation.set(x, y , z, 'XYZ');
		}
	}).css({width: "500px"});
	$("#rotateY").slider({
		"min": minSlide,
		"max": maxSlide,
		"step": 1,
		"value": 0,
		"slide": function(event, ui) {
	
			var x = toRadians($("#rotateX").slider("option", "value"));
			var y = toRadians($("#rotateY").slider("option", "value"));
			var z = toRadians($("#rotateZ").slider("option", "value"));		
			cube.rotation.set(x, y , z, 'XYZ');
		}
		
	}).css({width: "500px"});
	$("#rotateZ").slider({
		"min": minSlide,
		"max": maxSlide,
		"step": 1,
		"value": 0,
		"slide": function(event, ui) {
			var x = toRadians($("#rotateX").slider("option", "value"));
			var y = toRadians($("#rotateY").slider("option", "value"));
			var z = toRadians($("#rotateZ").slider("option", "value"));		
			cube.rotation.set(x, y , z, 'XYZ');
		}
	}).css({width: "500px"});
	
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75, width/height, 0.1, 1000 );

	var renderer = new THREE.WebGLRenderer();
	renderer.setClearColor( 0xffffff );
	renderer.setSize(width, height);

	$("#myView").append(renderer.domElement);

	var geometry = new THREE.BoxGeometry( 1, 2, 3 );
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
	var cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

	var light = new THREE.AmbientLight( 0xf0f0f0 ); // soft white light
	scene.add( light );
	var axis = new...