JSFiddle - React, Tailwind, and code Playground

HTML

<div>KeyInfo: 'X' rotation around X-Axis, 'Y': rotation around Y-Axis, 'Z': rotation around Z-Axis, 'Arrow-Up': Increase angle, 'Arrow-Down': Decrease angle</div>
 <span id=angleXHTML style="color: white;"></span>
 <span id=angleYHTML style="color: white;"></span>
 <span id=angleZHTML style="color: white;"></span>
 <span> (in degrees) </span>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
  color: white;
}

JavaScript

// Simple three.js example

var mesh, renderer, scene, camera, controls;
var currentRotationAxis;
var rotationSpeed = 0.025, rotMat, rotQuat;
var angleX, angleY, angleZ;

init();
animate();

window.addEventListener( 'keyup', function ( event ) {
	switch ( event.keyCode ) {
  	case 82:
    	if (rotationSpeed === 0.0005) {
      	rotationSpeed = 0.025;
      } else {
      	rotationSpeed = 0.0005;
      }
      break;
		case 88: // X
			console.log('X was pressed');
			camera.position.set( 30, 0, 0 );
      camera.lookAt(mesh.position);
			mesh.quaternion.set(0, 0, 0, 1);
			mesh.matrixWorldNeedsUpdate = true;
			currentRotationAxis = 'X';
			break;
		case 89: // Y
			console.log('Y was pressed');
			camera.position.set( 0, 30, 0 );
      camera.lookAt(mesh.position);
			mesh.quaternion.set(0, 0, 0, 1);
			mesh.matrixWorldNeedsUpdate = true;
			currentRotationAxis = 'Y';
			break;
		case 90: // Z
			console.log('Z was pressed');
			camera.position.set( 0, 0, 30 );
      camera.lookAt(mesh.position);
			mesh.quaternion.set(0, 0, 0, 1);
			mesh.matrixWorldNeedsUpdate = true;
			currentRotationAxis = 'Z';
			break;
	}
} );

window.addEventListener( 'keydown', function ( event ) {
	switch ( event.which ) {
		case 38: // Arrow Up
			// console.log('Arrow Up');
			rotateOnAxis(true);
			break;
		case 40: // Arrow Down
			rotateOnAxis(false);
			break;
	}
} );

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 30, 0 );

    controls = new THREE.OrbitControls(camera);
    controls.keys = [];
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
   ...