JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

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

CSS

body {
  margin: 0;
}

canvas {
  display: block;
}

JavaScript

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

// Camera setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer setup
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Function to create an icosidodecahedron geometry
function createIcosidodecahedronGeometry() {
  const vertices = [
    -1, -1, -1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, -1, -1, 1, -1, 1, 1, 1, -1, 1, 1, 1,
    0, -0.618, -1.618, 0, -0.618, 1.618, 0, 0.618, -1.618, 0, 0.618, 1.618, -0.618, -1.618, 0, -0.618, 1.618, 0, 0.618, -1.618, 0, 0.618, 1.618, 0,
    -1.618, 0, -0.618, -1.618, 0, 0.618, 1.618, 0, -0.618, 1.618, 0, 0.618
  ];

  const indices = [
    0, 8, 4, 0, 4, 16, 0, 16, 2, 0, 2, 10, 0, 10, 8, 1, 9, 5, 1, 5, 17, 1, 17, 3, 1, 3, 11, 1, 11, 9,
    2, 14, 6, 2, 6, 18, 2, 18, 10, 3, 15, 7, 3, 7, 19, 3, 19, 11, 4, 8, 14, 4, 14, 6, 5, 9, 15, 5, 15, 7,
    6, 18, 10, 7, 19, 11, 8, 14, 16, 9, 15, 17, 10, 18, 12, 11, 19, 13, 12, 18, 16, 12, 16, 14, 12, 14, 8,
    12, 8, 10, 13, 19, 17, 13, 17, 15, 13, 15, 9, 13, 9, 11, 16, 18, 6, 17, 19, 7
  ];

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  geometry.setIndex(indices);
  geometry.computeVertexNormals();

  return geometry;
}

const geometry = createIcosidodecahedronGeometry();
const material = new THREE.MeshPhongMaterial({
  color: 0xff69b4,
  flatShading: true
});
const icosidodecahedron = new THREE.Mesh(geometry, material);
scene.add(icosidodecahedron);

// Lighting setup
const ambientLight = new THREE.AmbientLight(0x404040, 2); // Soft white ambient light
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

// Animation loop
function animate()...