Daim Zia

Posted on Jun 9

Building an Interactive 3D Portfolio with React Three Fiber: A Step-by-Step Guide

#ai #threejs #webdev #nextjs

After years of building standard 2D websites, I decided to dive into WebGL and create something that actually stands out. Here's exactly how I built an interactive 3D portfolio with React Three Fiber - including the mistakes, performance lessons, and code patterns I wish I'd known from day one.

Why React Three Fiber?

If you've ever tried raw Three.js, you know the pain: imperative code, manual scene management, and a lot of boilerplate just to render a cube. React Three Fiber (R3F) brings Three.js into React's declarative world. You write JSX, not scene.add().

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Float } from '@react-three/drei'

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <Float speed={1.5} rotationIntensity={0.5} floatIntensity={1}>
        <icosahedronGeometry args={[1, 0]} />
        <meshStandardMaterial color="#6366f1" wireframe />
      </Float>
      <OrbitControls enableZoom={false} />
    </Canvas>
  )
}

That's it. Less than 20 lines and you have a floating, rotating 3D object with lighting and orbit controls.

Project Structure

I built a full portfolio with these key components:

1. Hero Scene

The hero section uses floating geometric shapes (octahedrons, torus knots, icosahedrons) that orbit slowly. Each shape has a subtle wireframe for visual interest.

Performance tip: Use useFrame with a shared clock rather than per-component animation loops

2. Particle System

1500 particles that react to mouse movement. The key is using Points and BufferGeometry for performance.

3. Scroll-Triggered 3D Animations

GSAP's ScrollTrigger integrates beautifully with R3F. The trick is passing scroll progress into the 3D scene.

Performance Lessons Learned

1. Mobile Fallbacks

Not all devices handle WebGL. Check for WebGL support and fall back to a static gradient.

2. Lazy Load the 3D Canvas

Do not mount R3F Canvas until it's needed. Use dynamic imports with SSR disabled.

3. Reduce Polygon Count

Complex geometries look impressive but kill framerate. Stick to basic geometries with wireframes.

4. Use Suspense from drei

Handle loading states gracefully with Suspense and Environment components.

Tech Stack Summary

Framework: Next.js 16 + TypeScript
3D: React Three Fiber + drei
Animations: GSAP ScrollTrigger + Framer Motion
Styling: Tailwind CSS v4
Build: ~56 KB gzipped (excluding 3D assets)

Where to Go From Here

The complete template is available here with all components, scenes, and the full portfolio layout: 3D Portfolio Template

But even if you don't use the template, the patterns above should help you build your own 3D web experience. The R3F + drei combo is incredibly powerful and getting better every release.

What's your experience with WebGL on the web? Have you tried React Three Fiber? I'd love to hear what you're building or what questions you have about getting started.

DEV Community