VoronoiShatter

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6 
7import {
8  SceneContainer,
9  type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12  useShadcnTheme,
13  type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15 
16const RADIUS = 1.6
17const THICKNESS = 0.34
18 
19type Vec = [number, number, number]
20 
21type Shard = {
22  geometry: THREE.BufferGeometry
23  centroid: THREE.Vector3
24  axis: THREE.Vector3
25  spin: number
26}
27 
28/** Evenly spread N points on a sphere (Fibonacci lattice) as fracture sites. */
29function fibonacciSites(n: number) {
30  const sites: THREE.Vector3[] = []
31  const golden = Math.PI * (3 - Math.sqrt(5))
32  for (let i = 0; i < n; i++) {
33    const y = n === 1 ? 0 : 1 - (i / (n - 1)) * 2
34    const r = Math.sqrt(Math.max(0, 1 - y * y))
35    const t = golden * i
36    sites.push(new THREE.Vector3(Math.cos(t) * r, y, Math.sin(t) * r))
37  }
38  return sites
39}
40 
41function pushTri(out: number[], a: Vec, b: Vec, c: Vec) {
42  out.push(a[0], a[1], a[2], b[0], b[1], b[2], c[0], c[1], c[2])
43}
44 
45/**
46 * Break an icosphere into Voronoi shards (faces assigned to their nearest
47 * site), then give every shard real thickness by extruding it toward the
48 * center — so each fragment reads as a solid chunk, not a paper-thin shell.
49 */
50function buildShards(count: number): Shard[] {
51  const base = new THREE.IcosahedronGeometry(RADIUS, 3)
52  const nonIndexed = base.toNonIndexed()
53  base.dispose()
54  const arr = (nonIndexed.getAttribute("position") as THREE.BufferAttribute)
55    .array as Float32Array
56  const sites = fibonacciSites(count)
57  const buckets: number[][] = Array.from({ length: count }, () => [])
58  const f = (RADIUS - THICKNESS) / RADIUS
59  const c = new THREE.Vector3()
60 
61  for (let i = 0; i < arr.length; i += 9) {
62    // Nearest fracture site for this face (by its normalized centroid).
63    c.set(
64      (arr[i] + arr[i + 3] + arr[i + 6]) / 3,
65      (arr[i + 1] + arr[i + 4] + arr[i + 7]) / 3,
66      (arr[i + 2] + arr[i + 5] + arr[i + 8]) / 3
67    ).normalize()
68    let best = 0
69    let bestDot = -Infinity
70    for (let s = 0; s < sites.length; s++) {
71      const d = c.dot(sites[s])
72      if (d > bestDot) {
73        bestDot = d
74        best = s
75      }
76    }
77    const out = buckets[best]
78 
79    // Outer triangle (on the sphere) and its inward-extruded copy.
80    const p: Vec[] = [
81      [arr[i], arr[i + 1], arr[i + 2]],
82      [arr[i + 3], arr[i + 4], arr[i + 5]],
83// … truncated