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
<input type="number" id="xRotation" min="-85" max="90" value = 0 step = 5>
</div>
<div>
Y
<input type="number" id="yRotation" min="-85" max="90" value = 0 step = 5>
</div>
<div>
Z
<input type="number" id="zRotation" min="-85" max="90" value = 0 step= 5>
</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;
$("#xRotation").on("change", doRotate);
$("#yRotation").on('change', doRotate);
$("#zRotation").on('change', doRotate);
function doRotate() {
var x = toRadians($("#xRotation").val());
var y = toRadians($("#yRotation").val());
var z = toRadians($("#zRotation").val());
cube.quaternion.setFromEuler(new THREE.Euler(x, y , z));
}
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: 0x0f0f0f, wireframe: true } );
var localAxes = new THREE.AxisHelper(2);
var cube = new THREE.Mesh( geometry, material );
cube.add(localAxes);
scene.add( cube );
var light = new THREE.AmbientLight( 0xf0f0f0 ); // soft white light
scene.add( light );
var worldAxes = new THREE.AxisHelper(5);
scene.add(worldAxes);
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
render();
});