DnaHelix

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 
16type Node = {
17  y: number
18  angle: number
19  a: [number, number, number]
20  b: [number, number, number]
21}
22 
23function buildHelix(count: number, radius: number, height: number): Node[] {
24  const nodes: Node[] = []
25  const turns = 2.2
26  for (let i = 0; i < count; i++) {
27    const t = count === 1 ? 0 : i / (count - 1)
28    const angle = t * Math.PI * 2 * turns
29    const y = (t - 0.5) * height
30    nodes.push({
31      y,
32      angle,
33      a: [Math.cos(angle) * radius, y, Math.sin(angle) * radius],
34      b: [Math.cos(angle + Math.PI) * radius, y, Math.sin(angle + Math.PI) * radius],
35    })
36  }
37  return nodes
38}
39 
40function Helix({
41  count,
42  speed,
43  radius,
44  theme,
45}: {
46  count: number
47  speed: number
48  radius: number
49  theme: ThemeMode
50}) {
51  const groupRef = React.useRef<THREE.Group>(null)
52  const { primaryColor, accentColor, mutedColor } = useShadcnTheme(theme)
53  const nodes = React.useMemo(
54    () => buildHelix(count, radius, 6),
55    [count, radius]
56  )
57 
58  useFrame((_, delta) => {
59    if (groupRef.current) groupRef.current.rotation.y += delta * 0.5 * speed
60  })
61 
62  return (
63    <group ref={groupRef}>
64      {nodes.map((n, i) => (
65        <group key={i}>
66          <mesh position={n.a}>
67            <sphereGeometry args={[0.13, 20, 20]} />
68            <meshStandardMaterial
69              color={primaryColor}
70              emissive={primaryColor}
71              emissiveIntensity={0.25}
72              metalness={0.5}
73              roughness={0.25}
74            />
75          </mesh>
76          <mesh position={n.b}>
77            <sphereGeometry args={[0.13, 20, 20]} />
78            <meshStandardMaterial
79              color={accentColor}
80              emissive={accentColor}
81              emissiveIntensity={0.15}
82              metalness={0.5}
83              roughness={0.25}
84            />
85          </mesh>
86          {i % 2 === 0 ? (
87            <mesh position={[0, n.y, 0]} rotation={[0, -n.angle, 0]}>
88              <boxGeometry args={[radius * 2, 0.05, 0.05]} />
89              <meshStandardMaterial
90                color={mutedColor}
91                transparent
92                opacity={0.6}
93              />
94            </mesh>
95          ) : null}
96        </group>
97      ))}
98// … truncated