JSFiddle - React, Tailwind, and code Playground

by Browork

HTML

<button style="position:absolute">Start</button>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"
import {
  BufferGeometryUtils
} from 'https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js';

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.01, 10000);
camera.position.set(100, 100, 500);
camera.up.set(0,0,1);
var c;
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: false, stencil: false, depth: true
});
renderer.setSize(innerWidth, innerHeight)
renderer.setClearColor("#f0ebdd", 1);;
document.body.appendChild(renderer.domElement);
document.querySelector("button").addEventListener("click", () => {
    init();
})
function init() {
    const controls = new OrbitControls(camera, renderer.domElement);

    var cylinderMaterial = new THREE.MeshBasicMaterial({
        vertexColors: true
    });
    const segments = 1;
    const radialSegments = 16;

    function createCylinder(radius, x, y, scale) {
        // index is 192, thus there are 64 faces;
        // position has 100 vertices;
      const cylinderGeo = new THREE.CylinderBufferGeometry(
        radius,
        radius,
        scale,
        radialSegments,
        segments
      );
      const p = cylinderGeo.getAttribute("position");
      const c = [];
      for (let i = 0; i < p.count; i++) {
        c.push(1, 0, 0);
      }
      cylinderGeo.setAttribute("color", new THREE.Float32BufferAttribute(c, 3));
      cylinderGeo.translate(x, 12-scale/2+0.005, y);
      return cylinderGeo;
    }

    let cylinders = [];
    for (let i = -4; i < 5; i++) {
        for (let j = -4; j < 5; j++) {
            let radius = Math.floor(Math.random() * 10) + 1;
            let cylinder = createCylinder(radius, -200+j * 40, -100+i * 20, j*8);
            cylinders.push(cylinder);
        }
    }

    let merged =...