JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://yume.human-interactive.org/examples/audio/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<div id="overlay">
  <div>
    <button id="startButton">Click to Play</button>
    <p>Automatic audio playback requires a user interaction.</p>
  </div>
</div>
<div id="container"></div>
<div id="info">
  <a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio timing |
  sound effect by <a href="https://freesound.org/people/michorvath/sounds/269718/" target="_blank" rel="noopener noreferrer">michorvath</a>
</div>

CSS

body {
  background:#777;
  padding:0;
  margin:0;
  overflow:hidden;
  font-family: Monospace;
}

#info {
  position: absolute;
  z-index: 2;
  top: 0px;
  width: 100%;
  color: #ffffff;
  padding: 5px;

  font-size:13px;
  text-align:center;
  font-weight: bold;
}

a {
  color: #ffffff;
}

#overlay {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background-color: #000000;
  color: #ffffff;
}

#overlay > div {
  text-align: center;
}

#overlay > div > button {
  height: 20px;
  width: 100px;
  background: transparent;
  color: #ffffff;
  outline: 1px solid #ffffff;
  border: 0px;
  cursor: pointer;
}

#overlay > div > p {
  color: #777777;
  font-size: 12px;
}

JavaScript

var scene, camera, renderer, audio;

var objects = [];

var startButton = document.getElementById( 'startButton' );
startButton.addEventListener( 'click', init );

function init() {

  var overlay = document.getElementById( 'overlay' );
  overlay.remove();

  var container = document.getElementById( 'container' );

  scene = new THREE.Scene();

  //

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
  camera.position.set( 7, 3, 7 );

  // lights

  var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
  scene.add( ambientLight );

  var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
  directionalLight.position.set( 0, 5, 5 );
  scene.add( directionalLight );

  var d = 5;
  directionalLight.castShadow = true;
  directionalLight.shadow.camera.left = - d;
  directionalLight.shadow.camera.right = d;
  directionalLight.shadow.camera.top = d;
  directionalLight.shadow.camera.bottom = - d;

  directionalLight.shadow.camera.near = 1;
  directionalLight.shadow.camera.far = 20;

  directionalLight.shadow.mapSize.x = 1024;
  directionalLight.shadow.mapSize.y = 1024;

  // audio

  var audioLoader = new THREE.AudioLoader();

  var listener = new THREE.AudioListener();
  camera.add( listener );

  // floor

  var floorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
  var floorMaterial = new THREE.MeshLambertMaterial( { color: 0x4676b6 } );

  var floor = new THREE.Mesh( floorGeometry, floorMaterial );
  floor.rotation.x = Math.PI * - 0.5;
  floor.receiveShadow = true;
  scene.add( floor );

  // objects

  var count = 5;
  var radius = 3;

  var ballGeometry = new THREE.SphereBufferGeometry( 0.3, 32, 16 );
  ballGeometry.translate( 0, 0.3, 0 );
  var ballMaterial = new THREE.MeshLambertMaterial( { color: 0xcccccc } );

  // create objects when audio buffer is loaded

  audioLoader.load( 'https://threejs.org/examples/sounds/ping_pong.mp3', function ( buffer ) {

    for ( var i = 0; i < count; i ++ ) {

...