JSFiddle - React, Tailwind, and code Playground

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": doRotate
	}).css({width: "500px"});
	$("#rotateY").slider({
		"min": minSlide,
		"max": maxSlide,
		"step": 1,
		"value": 0,
		"slide": doRotate
		
	}).css({width: "500px"});
	$("#rotateZ").slider({
		"min": minSlide,
		"max": maxSlide,
		"step": 1,
		"value": 0,
		"slide": doRotate
	}).css({width: "500px"});
  
  var prevX = 0, prevY = 0, prevZ = 0;
  function doRotate() {
			var x = toRadians($("#rotateX").slider("option", "value"));
			var y = toRadians($("#rotateY").slider("option", "value"));
			var z = toRadians($("#rotateZ").slider("option", "value"));
      
      var inverse = new THREE.Matrix4().getInverse(cube.matrix);

	    var rotation = cube.matrix;
	    var worldXAxis = new THREE.Vector3(1, 0, 0).applyMatrix4(new THREE.Matrix4().getInverse(rotation));
      var rotationWorldX = new THREE.Matrix4().makeRotationAxis(worldXAxis, x - prevX);
      rotation.multiply(rotationWorldX);
      var worldYAxis = new THREE.Vector3(0, 1, 0).applyMatrix4(new THREE.Matrix4().getInverse(rotation));
      var rotationWorldY = new THREE.Matrix4().makeRotationAxis(worldYAxis, y - prevY);
      rotation.multiply(rotationWorldY);
      var worldZAxis = new THREE.Vector3(0, 0, 1).applyMatrix4(new THREE.Matrix4().getInverse(rotation));
      var rotationWorldZ = new THREE.Matrix4().makeRotationAxis(worldZAxis, z - prevZ);
      rotation.multiply(rotationWorldZ);
      
      prevX = x;
      prevY = y;
      prevZ = z;
     
      cube.matrixAutoUpdate = false;
      cube.matrix = rotation;
  }
	
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75, width/height, 0.1, 1000 );

	var renderer = new THREE.WebGLRenderer();
	renderer.setClearColor(...