3D Components

Working with Three.js and React Three Fiber in templates.

Which Templates Use 3D?

• Sentinel - Interactive 3D globe
• AI Chat - 3D orb visualization
• Intention - Noise field background
• Folio - 3D hero element

Forge has no 3D dependencies, making it the lightest template.

Lazy Loading

All 3D components are dynamically imported with SSR disabled to prevent hydration issues and keep initial page load fast:

import dynamic from "next/dynamic";

const Globe = dynamic(
  () => import("@/components/landing/globe"),
  { ssr: false }
);

Dependencies

Templates with 3D use these packages:

• three ^0.182.0
• @react-three/fiber ^9.5.0
• @react-three/drei ^10.7.7

Removing 3D

You can safely remove any 3D component by deleting its import and JSX from the page. Then uninstall the Three.js packages to reduce bundle size:

npm uninstall three @react-three/fiber @react-three/drei

The rest of the template will continue to work without changes.

Hydration Safety

Random values (like particle positions) can differ between server and client. Templates use a mounted state pattern to avoid mismatches:

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);

// Render neutral state during SSR
// Animate only after mount