https://github.com/flavioow/threejs-depth-portrait

Recreate the interactive depth portrait effect popularized by modern portfolio websites using Three.js and WebGL.
https://github.com/flavioow/threejs-depth-portrait

3d 3d-effect depth-map frontend gyroscope hover-effect interactive normal-map parallax portrait shader three-js typescript webgl

Last synced: 3 days ago
JSON representation

Recreate the interactive depth portrait effect popularized by modern portfolio websites using Three.js and WebGL.

• Host: GitHub
• URL: https://github.com/flavioow/threejs-depth-portrait
• Owner: flavioow
• License: mit
• Created: 2026-02-27T20:51:49.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2026-05-30T22:14:18.000Z (17 days ago)
• Last Synced: 2026-05-30T22:15:49.885Z (17 days ago)
• Topics: 3d, 3d-effect, depth-map, frontend, gyroscope, hover-effect, interactive, normal-map, parallax, portrait, shader, three-js, typescript, webgl
• Language: TypeScript
• Homepage: https://flavioow.github.io/threejs-depth-portrait/
• Size: 32.4 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
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.





  Live demo

  ·

  Video preview





  

  

  

  

  

  

  

  

  

  





  

    

  



## 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:

- [Read the documentation](docs/en/README.md)

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:

```bash

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](https://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](https://youtu.be/HzL65tTeANs?si=JPuKwMPhki2_Mu1D) for sharing the logic behind texture maps and shaders.