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();

// Problem is in this function:
function calculateAngles() {
	var mat = model.matrix;
    
    var a = THREE.Math.clamp(-mat.elements[6], -1, 1);
    var xPitch = Math.asin(a);
    var yYaw = 0;
    var zRoll = 0;
    if (Math.cos(xPitch) > 0.0001)
    {
      zRoll = -Math.atan2(mat.elements[4], mat.elements[5]);
      yYaw = -Math.atan2(mat.elements[2], mat.elements[10]);
    }
    else
    {
      zRoll = -Math.atan2(-mat.elements[1], mat.elements[0]);
    }
	
	updateSimAngles(xPitch, yYaw, zRoll);
}






////////////////////////////////////////////////
// No need to change anything below this line
////////////////////////////////////////////////
function updateSimAngles(pitch, yaw, roll) {
    if (!inner || !arm)
        return;
    
    inner.rotation.set(pitch, yaw, roll, 'XZY');
	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 geometry = new THREE.Geometry();
	var material = new...