Back to videos

Build a 3D Portfolio with React Three Fiber - Blender Baking

Overview

In this tutorial, we will walk through the process of building a professional-looking 3D portfolio using Three.js and React Three Fiber. Inspired by the sleek style of David Heckhoff’s portfolio, we’ll put our own spin on it with interactive features like avatar animations.

Blender Baking

This episode focuses on creating a custom 3D office scene with Blender, baking realistic lighting, and integrating it into our project. By following along, you'll learn essential skills for building immersive and performant 3D web experiences.

Insights and Skills

In this tutorial, you’ll learn:

• Learn the basics of Blender for scene creation

• Import and arrange free 3D assets to furnish the space

• Use baking techniques to optimize lighting and shadows

• Export and load 3D models into a React Three Fiber project

• Apply baked textures to maintain high visual quality with better performance

Tech Stack

• React Three Fiber

• Three.js

• RGLTF/GLB Format

Code links

• Starter pack 🔗

• Final code 🔗

Resources

• Our main inspiration for the final portfolio

• Poly Haven PBR Textures

• Blender Donuts Tutorial

• Blender Room tutorial

• React Three Fiber documentation

• R3F Drei

  #threejs #portfolio #r3f

Need help with this tutorial? Join our Discord community!