JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<div id="container"></div>
<div class="infoBox">
Vert Y: <span id="info"></span>
</div>

CSS

body {
  margin: 0;
}

.infoBox {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
  color: white;
  font-family: sans-serif;
}

JavaScript

var renderer, scene, camera;
var geometry, geometryMorph, mesh, material;

var elContainer = document.getElementById( 'container' );
var elInfo = document.getElementById( 'info' );

// Basic Three JS setup
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
elContainer.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 300;

// Create two different cubes for morphing
geometry = new THREE.BoxGeometry(100, 100, 100);
geometryMorph = new THREE.BoxGeometry(200, 400, 200);

material = new THREE.MeshBasicMaterial( {color: 0xffffff, wireframe: true, morphTargets: true  } );

// Set morphtargets for cube
geometry.morphTargets[0] = {name: 't1', vertices: geometryMorph.vertices};
geometry.computeMorphNormals();

mesh = new THREE.Mesh( geometry, material );

scene.add(mesh);

// Dat gui controls
var guiControls = new function () {
  this.influence1 = 0;
  this.update = function () {
  	
    // Update morphtarget influence on change of control
    mesh.morphTargetInfluences[0] = guiControls.influence1;
    render();
  };
};

var gui = new dat.GUI();
gui.add(guiControls, 'influence1', 0, 1).onChange(guiControls.update);

function render() {
		renderer.render( scene, camera );
    
    // Outputting the Y pos of first vertex for demo purposes
    elInfo.innerHTML = geometry.vertices[0].y;
}

render();