JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 3, 5);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
//renderer.setClearColor(0xffffff)
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.25));

let v2 = new THREE.Vector2();
let v2center = new THREE.Vector2();
let pts = new Array(48).fill().map((p, idx) => {
  return new THREE.Vector3().copy(v2.set(0, -1).rotateAround(v2center, Math.PI * 2 / 24 * idx)).setZ(idx >= 24 ? -1 : 1);
})
pts.forEach(p => {
  pts.push(p.clone())
}); //for top and bottom
let index = [];
new Array(24).fill().forEach((p, idx) => {
  //side strip
  let a = idx + 0;
  let b = idx + 1;
  b = b === 24 ? 0 : b;
  let c = idx + 24;
  let d = idx + 25;
  d = d === 48 ? 24 : d;
  index.push(a, c, b);
  index.push(c, d, b);

  // top
  if (idx > 0 && idx < 23) {
    let ta = 48;
    let tb = 48 + idx;
    let tc = 48 + idx + 1;
    index.push(ta, tb, tc);

    let ba = 72;
    let bb = 72 + idx + 1;
    let bc = 72 + idx;
    index.push(ba, bb, bc);
  }
})
let g = new THREE.BufferGeometry().setFromPoints(pts);
g.setIndex(index);
g.computeVertexNormals();

let o = new THREE.Mesh(g, new THREE.MeshLambertMaterial({
  color: "aqua",
  wireframe: false,
  transparent: true,
  opacity: 0.5
}));

let p = new THREE.Points(g, new THREE.PointsMaterial({
  size: 0.05,
  color:...