The Architecture of a 3D Portfolio Element
I treat the 3D element as progressive enhancement — the page should look good and work correctly without it. The Canvas renders on top of the regular HTML/CSS layout, and if WebGL isn't available (or the device is too slow), the user sees the base layout. Never make 3D load-bearing for content or navigation.
For performance: limit polygon count (Sphere args of [64, 64] is overkill for most portfolio elements — [32, 32] is usually indistinguishable), keep the scene simple, and use MeshStandardMaterial with an Environment preset instead of complex custom lighting setups. The performance cost of Environment versus three separate directional lights is negligible for the visual quality difference.
Camera, Lighting, and the Six Decisions You'll Change
I always change these six times before settling: camera position and FOV, the primary light position, the ambient light intensity, the mesh material's roughness and metalness values, and whether the 3D element uses Float (gentle floating animation) or is static. These six variables control 90% of how the final element looks.
For web portfolios specifically: subtle is better than dramatic. A slowly rotating, subtly distorting metallic sphere conveys craft without demanding the viewer's attention. The goal is atmosphere, not spectacle.
Key takeaways
- Treat 3D as progressive enhancement — the page must work and look good without the Canvas rendering, for devices and browsers where WebGL fails or is slow
- Performance budget for portfolio 3D: limit geometry detail (32×32 sphere is usually enough), use Drei's Environment for lighting (one component, great results), and test on mobile before finalising
- The six adjustments you'll make: camera position/FOV, light position, ambient intensity, material roughness, material metalness, and animation speed — iterate on these, not on geometry complexity
Conclusion
3D on the web is a tool for atmosphere and craft signalling, not for showcasing technical complexity. The most effective 3D portfolio elements are subtle — they create a feeling without making the viewer work to process them.
Enjoyed this article?
Vivek Kumar Singh
Technical Expert · Full Stack Cloud Engineer · Tokyo, Japan
