Building a 3D Portfolio with Three.js

Building a 3D portfolio is one of the most rewarding projects a developer can take on. It combines technical skill with creative expression, and the result is a living, breathing representation of your abilities.

In this guide, I will walk through the process of integrating Three.js with Next.js 14 App Router, covering:

Setup and Configuration

First, install the dependencies:

Create a canvas component that will host your 3D scene. Use the `floating-canvas` pattern where the 3D scene sits behind your UI content with proper z-index layering.

Building the 3D Scene

Start with simple geometries and build up. A laptop model made from primitives (boxes, rounded boxes, planes) can look remarkably convincing with the right materials and lighting.

Key techniques:

• Use `MeshPhysicalMaterial` for realistic glass and metal
• Layer emissive materials for screen glow
• Animate with `useFrame` for continuous motion
• Use `PresentationControls` for drag interaction

Performance Optimization

• Use `AdaptiveDpr` to scale resolution based on device
• Keep geometry count low (under 100 meshes)
• Use instancing for repeated objects
• Limit `dpr` to 1.5 max on mobile

The result is a performant, interactive 3D experience that enhances your portfolio without overwhelming it.