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: true, 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

    });
    
    var edgeMat = new THREE.MeshBasicMaterial({
        //vertexColors: true
        color: 0x000000
    });
    const segments = 1;
    const radialSegments = 16;
    var cylinderEdges = []
    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 = [];
        //console.log(p.count)
        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.00, y);
        cylinderGeo.rotateX(3.1415 / 2);

        var geometry = new THREE.EdgesGeometry(cylinderGeo);

        cylinderEdges.push(geometry);


        return cylinderGeo;
  ...