JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>

CSS

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

JavaScript

// three.js info box follows shape
var renderer, scene, camera;
var angle = 0;

init();
animate();

function init() {
  // info
  var info = document.createElement('div');
  info.style.position = 'absolute';
  info.style.top = '30px';
  info.style.width = '100%';
  info.style.textAlign = 'center';
  info.style.color = '#fff';
  info.style.fontWeight = 'bold';
  info.style.backgroundColor = 'transparent';
  info.style.zIndex = '1';
  info.style.fontFamily = 'Monospace';
  info.innerHTML = "three.js - hole in buffer geometry";
  document.body.appendChild(info);

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

  // scene
  scene = new THREE.Scene();

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

  // line material
  var material = new THREE.LineBasicMaterial({
    color: 0xffffff
  });

  vertices = [
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(10, 0, 0),
    new THREE.Vector3(20, 0, 0),
    new THREE.Vector3(30, 0, 0),
    new THREE.Vector3(40, 0, 0),
    new THREE.Vector3(50, 0, 0),
    
    new THREE.Vector3(0, 10, 0),
    new THREE.Vector3(10, 10, 0),
    new THREE.Vector3(20, 10, 0),
    new THREE.Vector3(30, 10, 0),
    new THREE.Vector3(40, 10, 0),
    new THREE.Vector3(50, 10, 0),
    
    new THREE.Vector3(0, 20, 0),
    new THREE.Vector3(10, 20, 0),
    new THREE.Vector3(20, 20, 0),
    new THREE.Vector3(30, 20, 0),
    new THREE.Vector3(40, 20, 0),
    new THREE.Vector3(50, 20, 0),
  ];

  var positions = new Float32Array(vertices.length * 3);

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

    positions[i * 3] = vertices[i].x;
    positions[i * 3 + 1] = vertices[i].y;
    positions[i * 3 + 2] = vertices[i].z;

  }

  indices = [0, 1, 1, 2, 2, 3, 3, 4,4, 5, 
  					6,  7, 7, 8, 8, 9, 9,...