Metaballs

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import { MarchingCube, MarchingCubes } from "@react-three/drei"
6import * as THREE from "three"
7 
8import {
9  SceneContainer,
10  type SceneContainerProps,
11} from "@/components/threecn/scene-container"
12import {
13  useShadcnTheme,
14  type ThemeMode,
15} from "@/components/hooks/use-shadcn-theme"
16 
17type BlobSeed = {
18  ax: number
19  ay: number
20  az: number
21  px: number
22  py: number
23  pz: number
24}
25 
26function seedBlobs(count: number): BlobSeed[] {
27  return Array.from({ length: count }, () => ({
28    ax: 0.7 + Math.random() * 0.7,
29    ay: 0.7 + Math.random() * 0.7,
30    az: 0.7 + Math.random() * 0.7,
31    px: Math.random() * Math.PI * 2,
32    py: Math.random() * Math.PI * 2,
33    pz: Math.random() * Math.PI * 2,
34  }))
35}
36 
37function Blobs({
38  blobs,
39  speed,
40  resolution,
41  roughness,
42  theme,
43}: {
44  blobs: number
45  speed: number
46  resolution: number
47  roughness: number
48  theme: ThemeMode
49}) {
50  const { primaryColor, accentColor } = useShadcnTheme(theme)
51  const refs = React.useRef<(THREE.Object3D | null)[]>([])
52  const seeds = React.useMemo(() => seedBlobs(blobs), [blobs])
53 
54  // drei feeds each ball's WORLD position into the field as
55  // `0.5 + worldPos * 0.5`, and the balls are children of the scaled
56  // MarchingCubes mesh. So local position × SCALE must stay well inside
57  // [-1, 1] (≈ [0, 1] in field space) or the blobs clip flat against the cube.
58  const AMP = 0.2
59 
60  useFrame(({ clock }) => {
61    const t = clock.getElapsedTime() * speed
62    for (let i = 0; i < seeds.length; i++) {
63      const o = refs.current[i]
64      if (!o) continue
65      const s = seeds[i]
66      o.position.set(
67        Math.sin(t * s.ax + s.px) * AMP,
68        Math.cos(t * s.ay + s.py) * AMP,
69        Math.sin(t * s.az + s.pz) * AMP
70      )
71    }
72  })
73 
74  return (
75    <MarchingCubes
76      resolution={resolution}
77      maxPolyCount={60000}
78      enableUvs={false}
79      enableColors={false}
80      scale={2.6}
81    >
82      {seeds.map((_, i) => (
83        <MarchingCube
84          key={i}
85          ref={(el: THREE.Object3D | null) => {
86            refs.current[i] = el
87          }}
88          strength={0.5}
89          subtract={12}
90        />
91      ))}
92      <meshStandardMaterial
93        color={primaryColor}
94        emissive={accentColor}
95        emissiveIntensity={0.25}
96        roughness={roughness}
97        metalness={0.25}
98      />
99    </MarchingCubes>
100  )
101}
102 
103export type MetaballsProps = {
104  /** Number of blobs. */
105// … truncated