JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

	<body>

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

		<div id="info">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

    <input type="button" onClick="go()" value="click me"></input>
		<script>

      let machineGroup = new THREE.Group()
      const duration = 1

      let clock = new THREE.Clock()
      // Create an empty scene
      var scene = new THREE.Scene();
      let mixer = new THREE.AnimationMixer(scene)

      // Create a basic perspective camera
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
      camera.position.set(300,10,300);
      camera.lookAt(0,0,0);

      // Create a renderer with Antialiasing
      var renderer = new THREE.WebGLRenderer({antialias:true});

      // Configure renderer clear color
      renderer.setClearColor("#ffffff");

      // Configure renderer size
      renderer.setSize( window.innerWidth, window.innerHeight );

      // Append Renderer to DOM
      document.body.appendChild( renderer.domElement );

      var machineMaterial = new THREE.MeshNormalMaterial({  transparent: true, opacity: 0.5, depthWrite: false })
      var pole = new THREE.BoxGeometry(10, 10, 100)

      let zero = new THREE.Mesh( pole, machineMaterial );
      zero.position.set(0, 0, 100)
      scene.add(zero)

      let onefifty = new THREE.Mesh( pole, machineMaterial );
      onefifty.position.set(0, -150, 100)
      scene.add(onefifty)

      animate()

      function createBlock() {

        machineGroup.name = 'machineGroup'

        var geo = new THREE.BoxGeometry(150, 150, 150)

        let readMat = new THREE.Mesh( geo, machineMaterial );
        readMat.name = 'machine-read'
        readMat.position.set(0, 0, 0)
        machineGroup.add(readMat)
      }

      createBlock()
      scene.add(machineGroup)

      function asyncAnimate(tracks) {
        return new Promise((resolve, reject) => {
          let clip =  new...