Three.js Crystal Cluster — Glassy WebGL Gem Formation

<canvas id="crystalCanvas"></canvas>
<div class="cc-badge">18 gems · glass-like material</div>

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:radial-gradient(60% 60% at 50% 35%,#1a1030,#040108)}
#crystalCanvas{display:block;width:100%;height:100%;cursor:grab}
#crystalCanvas:active{cursor:grabbing}
.cc-badge{position:fixed;left:18px;bottom:18px;padding:7px 13px;border-radius:7px;background:rgba(20,10,30,0.7);border:1px solid rgba(196,132,252,0.3);color:#f3e8ff;font:12px ui-monospace,monospace;backdrop-filter:blur(6px)}

const canvas = document.getElementById('crystalCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 40);
camera.position.set(0, 1.5, 8);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.07;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.9;
controls.minDistance = 4;
controls.maxDistance = 16;

scene.add(new THREE.AmbientLight(0x2e1065, 0.6));
const key = new THREE.PointLight(0xc084fc, 2.4, 30);
key.position.set(5, 6, 5);
scene.add(key);
const rim = new THREE.PointLight(0x38bdf8, 1.6, 30);
rim.position.set(-6, -2, -4);
scene.add(rim);

const cluster = new THREE.Group();
scene.add(cluster);

const COLORS = [0xc084fc, 0x818cf8, 0x38bdf8, 0xf472b6, 0x34d399];
const GEOMETRIES = [
  () => new THREE.OctahedronGeometry(1, 0),
  () => new THREE.ConeGeometry(0.7, 1.8, 6),
  () => new THREE.IcosahedronGeometry(0.9, 0),
];

const gems = [];
const CRYSTAL_COUNT = 18;
for (let i = 0; i < CRYSTAL_COUNT; i++) {
  const geo = GEOMETRIES[i % GEOMETRIES.length]();
  const color = COLORS[i % COLORS.length];

  // A glassy, low-opacity material with high clearcoat reads as a faceted
  // crystal without needing real refraction or an environment capture —
  // a much cheaper approximation that still looks convincing at a glance.
  const material = new THREE.MeshPhysicalMaterial({
    color,
    metalness: 0.1,
    roughness: 0.15,
    clearcoat: 1,
    clearcoatRoughness: 0.1,
    transparent: true,
    opacity: 0.72,
    emissive: color,
    emissiveIntensity: 0.12,
  });

  const gem = new THREE.Mesh(geo, material);

  // Scatter gems inside a rough cluster shape rather than a perfect sphere
  // or grid — each one gets a random position within a bounded volume,
  // a random scale, and a random static rotation, so the group reads as
  // an organic mineral formation rather than an arranged pattern.
  const spread = 2.4;
  gem.position.set(
    (Math.random() - 0.5) * spread,
    (Math.random() - 0.5) * spread * 0.8,
    (Math.random() - 0.5) * spread
  );
  gem.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
  const scale = 0.35 + Math.random() * 0.5;
  gem.scale.setScalar(scale);

  cluster.add(gem);
  gems.push({ mesh: gem, spinSpeed: (Math.random() - 0.5) * 0.01, phase: Math.random() * Math.PI * 2 });
}

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

let t = 0;
function animate() {
  requestAnimationFrame(animate);
  t += 0.01;

  gems.forEach(g => {
    g.mesh.rotation.y += g.spinSpeed;
    // Each gem drifts up and down independently, on its own phase, so the
    // cluster feels alive without any gem moving in lockstep with another.
    g.mesh.position.y += Math.sin(t + g.phase) * 0.0015;
  });

  key.position.x = Math.cos(t * 0.3) * 6;
  key.position.z = Math.sin(t * 0.3) * 6;

  controls.update();
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();