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()
let SPEED = .5
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 orbit = new THREE.OrbitControls( camera, renderer.domElement );
//orbit.enableZoom = false;
var machineMaterial = new THREE.MeshNormalMaterial({ color: 0x000088, 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.SceneUtils.createMultiMaterialObject(machine, [machineMaterial.clone(), textMaterials['Read']])
let readMat = new THREE.Mesh( geo, machineMaterial );
readMat.name = 'machine-read'
...