JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
		<div id="info">
			<span class="link" id="transform">transform triangle</span>
		</div>

CSS

body {
				font-family: Monospace;
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display: block;
			}

			div.floating {
				color : #ffffff;
				background : #000000;
				opacity : 0.8;
				width : 80%;
				height : 80%;
				position : absolute;
				left : 10%;
				top : 10%;
				border : 1px solid #555555;
				padding : 10px;
				display : none;
				overflow : auto;
				z-index: 100;
			}

			span.link {
				color: skyblue;
				cursor: pointer;
				text-decoration : underline;
			}

			a {
				color: skyblue
			}

JavaScript

var camera, scene, light, renderer;
			var floatingDiv;
			var mouseX = 0, mouseY = 0;
			var geometry = null;
			var vertesyCount = 0;
			
			function addTriangle(x1, y1, x2, y2, x3, y3){
				geometry.vertices.push( new THREE.Vector3( x1, y1, 0 ) );
				geometry.vertices.push( new THREE.Vector3(  x2, y2, 0 ) );
				geometry.vertices.push( new THREE.Vector3(  x3,  y3, 0 ) );
				var face = new THREE.Face3( vertesyCount, vertesyCount + 1, vertesyCount + 2 );
				vertesyCount += 3;
				geometry.faces.push( face );
			}
			
			function addGeometry( type ) {

				for( var i = 0; i < scene.children.length; i++ ) {

					var current = scene.children[ i ];

					if( current instanceof THREE.Mesh ) {

						current.geometry.dispose();
						scene.remove( current );
						i--;

					}

				}

				var material = new THREE.MeshBasicMaterial( { wireframe : true} );

				geometry = new THREE.Geometry();
				addTriangle(-50, -50, 50, -50, 50, 50);
				//addTriangle(-50, -50, -50, 50, 50, 50); // UNCOMMENT TO TEST WHAT FINAL OUTPUT SHOULD LOOK LIKE.

				scene.add( new THREE.Mesh( geometry, material ) );

			}
				
			//THIS CODE ATTEMPTS TO ADD ADDITIONAL FACES TO THE MESH.
			function addTriangleFace(){
				addTriangle(-50, -50, -50, 50, 50, 50);
				geometry.verticesNeedUpdate = true;
				geometry.elementsNeedUpdate = true;
			}
			
			function init() {

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 0, 0, 400 );

				scene = new THREE.Scene();

				light = new THREE.DirectionalLight( 0xffffff );
				scene.add( light );

				addGeometry( 1 );

				window.addEventListener( 'click', onWindowClick, false );
				window.addEventListener( 'resize', onWindowResize, false...