JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/controls/TransformControls.js"></script>
<script src="http://eddy.cx/dev/3d/models.js"></script>

CSS

body { overflow: hidden; }

JavaScript

var inner = new THREE.Object3D(),
    arm   = new THREE.Object3D(),
    model = new THREE.Object3D();

var totalPitch = 0, totalYaw = 0, totalRoll = 0;
var prevQuat = new THREE.Quaternion();

function calculateAngles() {
	var mat = model.matrix;
	mat.transpose();
	
	var quat = new THREE.Quaternion();
	quat.setFromRotationMatrix(mat);
	
	var diff = new THREE.Quaternion();
	diff.copy(quat);
	diff.multiply(prevQuat);
	diff.normalize();
	
	var e = new THREE.Euler();
	e.setFromQuaternion(diff, 'XZY');
	totalPitch -= e.z;
	totalYaw   -= e.y;
	totalRoll  -= e.x;
	
	prevQuat.copy(quat);
	prevQuat.inverse();
	prevQuat.normalize();

	updateSimAngles(totalPitch, totalRoll);
}



////////////////////////////////////////////////
// No need to change anything below this line
////////////////////////////////////////////////
function updateSimAngles(pitch, roll) {
    if (!inner || !arm)
        return;
    
    inner.rotation.set(roll, 0, pitch, 'ZXY');
	arm.rotation.z = pitch;
	
	render();
}

var camera, scene, renderer;
var red   = new THREE.MeshPhongMaterial( { color: 0xfe0000 } );
var black = new THREE.MeshPhongMaterial( { color: 0x222222 } );

function render() {
	renderer.render(scene, camera);
}
function init() {
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.z = 15;
	camera.position.y = 5;
	camera.lookAt(new THREE.Vector3(0, 1, 0));
	
	scene = new THREE.Scene();

	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setClearColor(0xffffff);
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	
	var container = document.createElement('div');
	container.appendChild(renderer.domElement);
	document.body.appendChild(container);

	var controls = new THREE.OrbitControls(camera);
	controls.damping = 0.05;
	controls.addEventListener('change', render);
	
	window.addEventListener('resize', onWindowResize, false);
	
	// Grid
	var size = 15;
	var...