3D Text
Beautiful 3D text effect using Three.js and React Three Fiber
Install dependencies
npm install @react-three/fiber @react-three/drei threeAdd the component
The component uses a Geist font from the public folder.
npx shadcn@latest add https://glsilk.vercel.app/r/text-3d.jsonQuick Start
import { Text3DComponent } from "@/components/ui/text-3d";
export default function Home() {
return (
<Text3DComponent
text="3D
Text"
size={0.8}
height={0.3}
rotation={[-0.5, -0.25, 0]}
color="#f5f5f5"
materialType="standard"
/>
);
}Examples
Default
Open in<Text3DComponent
text="Text 3D"
size={0.8}
height={0.3}
bevelEnabled={true}
bevelSize={0.02}
bevelThickness={0.05}
rotation={[-0.5, -0.25, 0]}
heightContainer={400}
color="#f5f5f5"
materialType="standard"
/>Material Types
gradient: Smooth multi-color gradient using vertex colors (requiresgradientColorsprop, notcolor).standard(default): Single color with PBR lighting.normal: Color with specular highlights and phong shading.basic: Color but unlit (flat appearance).lambert: Color with lambert shading (diffuse lighting).toon: Color with cartoon/toon shading effect.physical: Color with advanced PBR properties (metallic, roughness, etc.).
All materials except gradient use the color prop. The gradient material uses gradientColors for multi-color effects.
Gradient
Open in<Text3DComponent
text="Text 3D"
size={0.8}
height={0.3}
bevelEnabled={true}
bevelSize={0.02}
bevelThickness={0.05}
rotation={[-0.5, -0.25, 0]}
heightContainer={400}
gradientColors={["#06b6d4", "#2196f3", "#8b5cf6", "#ec4899"]}
materialType="gradient"
/>Advanced Playground
Open inExperiment with all props using the interactive controls:
// Use the advanced demo to customize all properties
// and copy the generated codeAPI Reference
Prop
Type
Height vs Bevel Thickness
Both height and bevelThickness control depth effects. height controls extrusion depth while bevelThickness controls the beveled edge depth. For a pronounced distinction, increase height to 0.5-1.0 and keep bevel values small (< 0.1).
Credits
- React Three Fiber: docs.pmnd.rs/react-three-fiber
- Drei: github.com/pmndrs/drei
- Three.js: threejs.org