JSFiddle - React, Tailwind, and code Playground

by aitheorem

HTML

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  <head>
    <title>Shapes</title>
    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

    </style>
  </head>

  <body>

    <div id="output">
    </div>

  </body>

</html>

JavaScript

const COLOR_BLUE = 0x2194ce;
var container = document.getElementById('output');
var raycaster = new THREE.Raycaster();
var scene = new THREE.Scene();
var mouse = new THREE.Vector2();
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var lineMaterial = new THREE.LineBasicMaterial({
  color: COLOR_BLUE
});
var camera, geometry;
var trimaterial = new THREE.MeshBasicMaterial({
  color: COLOR_BLUE,
  wireframe: true
});
var geometry = new THREE.Geometry();

var controls = {};


renderer.setSize(window.innerWidth, window.innerHeight);


raycaster.linePrecision = 3;

camera = new THREE.OrthographicCamera(window.innerWidth / -7, window.innerWidth / 7, window.innerHeight / 7, window.innerHeight / -7, 1, 1000);
camera.zoom = 35;
camera.position.x = 2.5;
camera.position.y = -100;
camera.position.z = 8;
camera.lookAt(scene.position);

camera.updateProjectionMatrix();


container.appendChild(renderer.domElement);
scene.add(new THREE.AmbientLight(0xffffff));

drawTri();
drawQuad();

geometry.computeBoundingBox();
geometry.computeBoundingSphere();

document.addEventListener('mouseup', onMouseUp, true);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.copy(geometry.boundingSphere.center);
controls.nozoom = true;

animate();

function drawTri() {


  var vecs = [];
  var length;
  var color = new THREE.Color("rgb(255,0,0)");
  var triangles;

  vecs[0] = new THREE.Vector3(1, 0, 3);
  vecs[1] = new THREE.Vector3(0, 0, 3);
  vecs[2] = new THREE.Vector3(0.5, 0, 4);
  vecs[3] = new THREE.Vector3(3, 0, 3);
  vecs[4] = new THREE.Vector3(2, 0, 3);
  vecs[5] = new THREE.Vector3(2.5, 0, 4);
  vecs[6] = new THREE.Vector3(5, 0, 3);
  vecs[7] = new THREE.Vector3(4, 0, 3);
  vecs[8] = new THREE.Vector3(4.5, 0, 4);



  for (var vecPointer = 0; vecPointer < vecs.length; vecPointer += 3) {

    for (var i = 0; i < 3; i++) {
      geometry.vertices.push(vecs[i + vecPointer]);
    }

    length = geometry.vertices.length;

    geometry.faces.push(new...