Three.js Depth Portrait
Recreate the interactive depth portrait effect popularized by modern portfolio websites using Three.js and WebGL.
Three.js Depth Portrait
A source-code study and tutorial playground for recreating the interactive pseudo-3D portrait effect inspired by the Lando Norris website.
About The Project
The idea is simple: take a flat portrait and make it feel alive. Instead of using a full 3D model, this experiment uses image maps, shader logic and motion input to create a lightweight pseudo-3D parallax illusion in the browser.
Want To Build This?
This repository is the starting point for a practical guide on building a Three.js depth portrait effect with WebGL, React Three Fiber, GLSL shaders, depth maps and real-time interaction.
The first version of the guide is available in English:
The documentation will grow over time and split into two paths:
- Quick guide: a direct step-by-step path for people who want to recreate the effect as fast as possible.
- Architecture notes: a deeper breakdown of the shader decisions, texture maps, input systems, scene structure and trade-offs behind the implementation.
For now, the project works as a source-code reference, live demo and starting point for the practical guide.
Getting Started
If you want to inspect the implementation locally, install the dependencies and start the development server:
git clone https://github.com/flavioow/threejs-depth-portrait.git
cd threejs-depth-portrait
bun install
bun run dev
After that, open http://localhost:3000 and move your cursor around the portrait. On mobile devices, the experience can react to device orientation when supported by the browser.
What It Includes
- Pseudo-3D portrait rendering with Three.js and WebGL
- Custom GLSL shader for a depth-based parallax effect
- Texture-map support for diffuse, depth, normal, roughness and alpha layers
- Pointer interaction for desktop devices
- Gyroscope/device orientation interaction for mobile devices
- Smooth damped motion for a more natural interactive feel
- A Next.js and React Three Fiber structure ready to explore
Inspiration
Inspired by the interactive portrait effect used on landonorris.com. This project was independently developed as an educational reference implementation after research into depth-based portrait rendering techniques.
Special thanks to Syntax/Wes Bos for sharing the logic behind texture maps and shaders.