Globe

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 
16/** Evenly distribute `count` points on a unit sphere (Fibonacci sphere). */
17function fibonacciSphere(count: number, radius: number) {
18  const positions = new Float32Array(count * 3)
19  const golden = Math.PI * (3 - Math.sqrt(5))
20  for (let i = 0; i < count; i++) {
21    const y = 1 - (i / Math.max(count - 1, 1)) * 2
22    const r = Math.sqrt(1 - y * y)
23    const theta = golden * i
24    positions[i * 3] = Math.cos(theta) * r * radius
25    positions[i * 3 + 1] = y * radius
26    positions[i * 3 + 2] = Math.sin(theta) * r * radius
27  }
28  return positions
29}
30 
31function GlobeMesh({
32  dots,
33  speed,
34  size,
35  theme,
36}: {
37  dots: number
38  speed: number
39  size: number
40  theme: ThemeMode
41}) {
42  const groupRef = React.useRef<THREE.Group>(null)
43  const { primaryColor, mutedColor } = useShadcnTheme(theme)
44  const positions = React.useMemo(() => fibonacciSphere(dots, 2), [dots])
45 
46  useFrame((_, delta) => {
47    if (groupRef.current) groupRef.current.rotation.y += delta * 0.25 * speed
48  })
49 
50  return (
51    <group ref={groupRef} rotation={[0.4, 0, 0.15]}>
52      {/* dotted surface */}
53      <points>
54        <bufferGeometry>
55          <bufferAttribute attach="attributes-position" args={[positions, 3]} />
56        </bufferGeometry>
57        <pointsMaterial
58          color={primaryColor}
59          size={size}
60          sizeAttenuation
61          transparent
62          opacity={0.9}
63        />
64      </points>
65 
66      {/* faint inner sphere for depth */}
67      <mesh>
68        <sphereGeometry args={[1.97, 32, 32]} />
69        <meshBasicMaterial color={mutedColor} transparent opacity={0.06} />
70      </mesh>
71 
72      {/* orbit rings */}
73      <mesh rotation={[Math.PI / 2, 0, 0]}>
74        <torusGeometry args={[2.35, 0.006, 12, 120]} />
75        <meshBasicMaterial color={primaryColor} transparent opacity={0.4} />
76      </mesh>
77      <mesh rotation={[Math.PI / 2.4, 0.6, 0]}>
78        <torusGeometry args={[2.6, 0.005, 12, 120]} />
79        <meshBasicMaterial color={mutedColor} transparent opacity={0.3} />
80      </mesh>
81    </group>
82  )
83}
84 
85export type GlobeProps = {
86  /** Number of surface dots. */
87  dots?: number
88  /** Rotation speed multiplier. */
89  speed?: number
90  /** Dot size. */
91// … truncated