Skip to main content

Adding 3D Effects to Your Portfolio with React Three Fiber

· 2 min read
Thinh Le
Thinh Le
Digital Product Developer

When most developers think of adding visual flair to a portfolio, they reach for CSS animations or Framer Motion. But for a truly unforgettable experience, React Three Fiber (R3F) — a React renderer for Three.js — opens up the entire world of interactive 3D graphics, right in the browser.

3D Abstract Background

Why React Three Fiber?​

Three.js is the most popular WebGL library for the web, but its imperative API can feel out of place inside a React component tree. React Three Fiber solves this with a declarative, component-based approach that makes complex 3D scenes as composable as your regular UI:

import { Canvas } from '@react-three/fiber';
import { OrbitControls, Sphere, MeshDistortMaterial } from '@react-three/drei';

export default function AnimatedSphere() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} intensity={1} />
      <Sphere args={[1, 100, 200]} scale={2}>
        <MeshDistortMaterial
          color="#f59e0b"
          attach="material"
          distort={0.5}
          speed={1.5}
        />
      </Sphere>
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
}

Key Libraries in the Ecosystem​

The @react-three/drei helper library is where the real power is. It provides a collection of ready-made abstractions:

  • <OrbitControls> — Mouse-driven camera controls.
  • <Environment> — HDR lighting environments for realistic materials.
  • <Text3D> — 3D text with full font support.
  • <MeshDistortMaterial> — Animated, morphing shader materials.
  • <Stars> — A beautiful star-field particle system.

Performance Considerations​

3D graphics are computationally intensive, so a few rules apply:

  1. Lazy-load your Canvas: Wrap it with React.lazy or conditionally render it to avoid blocking the initial page load.
  2. Use useFrame wisely: Only put animation logic in useFrame; avoid re-renders at all costs.
  3. Respect reduced-motion preferences: Check prefers-reduced-motion and disable animations for users who need it.
  4. Dispose resources: Three.js geometries and materials must be disposed of when a component unmounts to prevent memory leaks.

What I Built​

For this portfolio, I used R3F to create the interactive 3D showcase on the homepage. The scene features custom geometries and environment-mapped materials, giving it a premium, live feel while keeping the bundle cost manageable through careful tree-shaking and code splitting.

If you haven't explored R3F yet, it's a genuinely fun way to level up your frontend projects. The learning curve pays off quickly.