JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
	<title>three.js-complex-interaction</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- 	<link type="text/css" rel="stylesheet" href="main.css"> -->
	<style>
		body {
			background-color: #bfe3dd;
			color: #000;
		}

		a {
			color: #2983ff;
		}
	</style>
</head>

<body>

<div id="container"></div>

<div style="position: absolute; top: 10px; right: 10px;">
	<button id="playBtn">play</button>
	<button id="resetBtn">reset</button>
</div>

<script type="module">
	// https://threejs.org/

	import * as THREE from 'https://threejs.org/build/three.module.js';

	import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';

	import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
	import { RoomEnvironment } from 'https://threejs.org/examples/jsm/environments/RoomEnvironment.js';

	import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
	import { DRACOLoader } from 'https://threejs.org/examples/jsm/loaders/DRACOLoader.js';

	let mixer;

	const clock = new THREE.Clock();
	const container = document.getElementById( 'container' );

	const stats = new Stats();
	container.appendChild( stats.dom );

	const renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.physicallyCorrectLights = true;
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.outputEncoding = THREE.sRGBEncoding;
	container.appendChild( renderer.domElement );

	const pmremGenerator = new THREE.PMREMGenerator( renderer );

	const scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xbfe3dd );
	scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

	const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
	camera.position.set( 5, 2, 8 );
	//...

CSS

body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: transparent;
		border: 0;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 4px;
		color: #ffffff;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}