Text3D

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import { Center, Text3D as DreiText3D } 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 
17/**
18 * Default typeface (three.js `typeface.json` format), served from the jsDelivr
19 * npm mirror so the scene works out of the box. To go fully offline, drop a
20 * font JSON in `/public/fonts` and pass it via the `font` prop, e.g.
21 * `font="/fonts/inter_bold.json"`.
22 */
23const DEFAULT_FONT =
24  "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/fonts/helvetiker_bold.typeface.json"
25 
26type GlyphsProps = {
27  text: string
28  size: number
29  depth: number
30  font: string
31  theme: ThemeMode
32}
33 
34function Glyphs({ text, size, depth, font, theme }: GlyphsProps) {
35  const groupRef = React.useRef<THREE.Group>(null)
36  const { primaryColor, foregroundColor } = useShadcnTheme(theme)
37 
38  useFrame((state) => {
39    const group = groupRef.current
40    if (!group) return
41    const t = state.clock.elapsedTime
42    group.position.y = Math.sin(t * 0.9) * 0.12
43    group.rotation.y = Math.sin(t * 0.4) * 0.18
44    group.rotation.x = Math.cos(t * 0.3) * 0.06
45  })
46 
47  return (
48    <group ref={groupRef}>
49      <Center>
50        <DreiText3D
51          font={font}
52          size={size}
53          height={depth}
54          curveSegments={8}
55          bevelEnabled
56          bevelThickness={0.02}
57          bevelSize={0.012}
58          bevelSegments={4}
59          letterSpacing={-0.02}
60        >
61          {text}
62          <meshStandardMaterial
63            color={primaryColor}
64            emissive={primaryColor}
65            emissiveIntensity={0.18}
66            metalness={0.55}
67            roughness={0.25}
68          />
69        </DreiText3D>
70      </Center>
71      <ambientLight color={foregroundColor} intensity={0.05} />
72    </group>
73  )
74}
75 
76export type Text3DProps = {
77  text: string
78  size?: number
79  depth?: number
80  /** Path/URL to a three.js typeface JSON. Defaults to the bundled Inter Bold. */
81  font?: string
82  className?: string
83  theme?: ThemeMode
84  environment?: SceneContainerProps["environment"]
85}
86 
87/**
88 * Extruded, slowly floating 3D text rendered with drei's `<Text3D>`. The
89 * glyph material uses your `--primary` color.
90 */
91export function Text3D({
92  text,
93  size = 1,
94  depth = 0.3,
95  font = DEFAULT_FONT,
96  className,
97// … truncated