# threejs-journey

**Repository Path**: mirrors-gis/threejs-journey

## Basic Information

- **Project Name**: threejs-journey
- **Description**: react  threejs-journey
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-28
- **Last Updated**: 2024-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Threejs

## README

<img src="/stage1.png" alt="Stage 1" />

👉 Visit examples at https://journey.pmnd.rs/

A community driven collection of lesson-examples from Bruno Simons [threejs-journey](https://threejs-journey.com) ported to [React](https://github.com/pmndrs/react-three-fiber). Threejs-journey is one of the best resources available for learning Threejs.

The goal is to ease the learning curve by moving from OOP to components, which reduce code and encourage clean separation. You will progress much quicker since each primitive is a separate unit that can be studied as such, as opposed to something that is connected to practically everything else across the project.

At the moment the focus is on structural patterns and the experience, these examples are reduced and will use eco-system spare parts where possible.

# Examples

## Basics

<div>
  <h3>Textures</h3>
  <a href="https://journey.pmnd.rs/basics/textures" ><img src="public/thumbnails/basics/textures.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/basics/textures)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/basics/textures)
[![](https://img.shields.io/badge/11-Lesson-705df2)](https://threejs-journey.com/lessons/11)

  </div>
</div>

<div>
  <h3>Materials</h3>
  <a href="https://journey.pmnd.rs/basics/materials" ><img src="public/thumbnails/basics/materials.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/basics/materials)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/basics/materials)
[![](https://img.shields.io/badge/12-Lesson-705df2)](https://threejs-journey.com/lessons/12)

  </div>
</div>

<div>
  <h3>3D Text</h3>
  <a href="https://journey.pmnd.rs/basics/text3d" ><img src="public/thumbnails/basics/text3d.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/basics/text3d)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/basics/text3d)
[![](https://img.shields.io/badge/13-Lesson-705df2)](https://threejs-journey.com/lessons/13)

  </div>
</div>

## Classic Techniques

<div>
  <h3>Lights</h3>
  <a href="https://journey.pmnd.rs/classic-techniques/lights" ><img src="public/thumbnails/classic-techniques/lights.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/classic-techniques/lights)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/classic-techniques/lights)
[![](https://img.shields.io/badge/15-Lesson-705df2)](https://threejs-journey.com/lessons/15)

  </div>
</div>

<div>
  <h3>Haunted House</h3>
  <a href="https://journey.pmnd.rs/classic-techniques/haunted-house" ><img src="public/thumbnails/classic-techniques/haunted-house.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/classic-techniques/haunted-house)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/classic-techniques/haunted-house)
[![](https://img.shields.io/badge/17-Lesson-705df2)](https://threejs-journey.com/lessons/17)

  </div>
</div>

<div>
  <h3>Particles</h3>
  <a href="https://journey.pmnd.rs/classic-techniques/particles" ><img src="public/thumbnails/classic-techniques/particles.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/classic-techniques/particles)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/classic-techniques/particles)
[![](https://img.shields.io/badge/18-Lesson-705df2)](https://threejs-journey.com/lessons/18)

  </div>
</div>

<div>
  <h3>Particles Animated</h3>
  <a href="https://journey.pmnd.rs/classic-techniques/particles-animated" ><img src="public/thumbnails/classic-techniques/particles-animated.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/classic-techniques/particles-animated)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/classic-techniques/particles)
[![](https://img.shields.io/badge/18-Lesson-705df2)](https://threejs-journey.com/lessons/18)

  </div>
</div>

<div>
  <h3>Galaxy Generator</h3>
  <a href="https://journey.pmnd.rs/classic-techniques/galaxy-generator" ><img src="public/thumbnails/classic-techniques/galaxy-generator.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/classic-techniques/galaxy-generator)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/classic-techniques/galaxy-generator)
[![](https://img.shields.io/badge/19-Lesson-705df2)](https://threejs-journey.com/lessons/19)

  </div>
</div>

<div>
  <h3>Raycaster</h3>
  <a href="https://journey.pmnd.rs/classic-techniques/raycaster" ><img src="public/thumbnails/classic-techniques/raycaster.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/classic-techniques/raycaster)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/classic-techniques/raycaster)
[![](https://img.shields.io/badge/20-Lesson-705df2)](https://threejs-journey.com/lessons/20)

  </div>
</div>

<div>
  <h3>Scroll Based Animation</h3>
  <a href="https://journey.pmnd.rs/classic-techniques/scroll-based-animation" ><img src="public/thumbnails/classic-techniques/scroll-based-animation.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/classic-techniques/scroll-based-animation)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/classic-techniques/scroll-based-animation)
[![](https://img.shields.io/badge/21-Lesson-705df2)](https://threejs-journey.com/lessons/21)

  </div>
</div>

## Advanced Techniques

<div>
  <h3>Physics</h3>
  <a href="https://journey.pmnd.rs/advanced-techniques/physics" ><img src="public/thumbnails/advanced-techniques/physics.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/advanced-techniques/physics)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/advanced-techniques/physics)
[![](https://img.shields.io/badge/22-Lesson-705df2)](https://threejs-journey.com/lessons/22)

  </div>
</div>

## Shaders

<div>
  <h3>Shader Patterns</h3>
  <a href="https://journey.pmnd.rs/shaders/shader-patterns" ><img src="public/thumbnails/shaders/shader-patterns.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/shaders/shader-patterns)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/shaders/shader-patterns)
[![](https://img.shields.io/badge/28-Lesson-705df2)](https://threejs-journey.com/lessons/28)

  </div>
</div>

<div>
  <h3>Raging Sea</h3>
  <a href="https://journey.pmnd.rs/shaders/raging-sea" ><img src="public/thumbnails/shaders/raging-sea.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/shaders/raging-sea)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/shaders/raging-sea)
[![](https://img.shields.io/badge/29-Lesson-705df2)](https://threejs-journey.com/lessons/29)

  </div>
</div>

<div>
  <h3>Animated Galaxy</h3>
  <a href="https://journey.pmnd.rs/shaders/animated-galaxy" ><img src="public/thumbnails/shaders/animated-galaxy.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/shaders/animated-galaxy)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/shaders/animated-galaxy)
[![](https://img.shields.io/badge/30-Lesson-705df2)](https://threejs-journey.com/lessons/30)

  </div>
</div>

<div>
  <h3>Modified Material</h3>
  <a href="https://journey.pmnd.rs/shaders/modified-material" ><img src="public/thumbnails/shaders/modified-material.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/shaders/modified-material)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/shaders/modified-material)
[![](https://img.shields.io/badge/31-Lesson-705df2)](https://threejs-journey.com/lessons/31)

  </div>
</div>

## Extra

<div>
  <h3>Post Processing</h3>
  <a href="https://journey.pmnd.rs/extra/post-processing" ><img src="public/thumbnails/extra/post-processing.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/extra/post-processing)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/extra/post-processing)
[![](https://img.shields.io/badge/32-Lesson-705df2)](https://threejs-journey.com/lessons/32)

  </div>
</div>

<div>
  <h3>Loading</h3>
  <a href="https://journey.pmnd.rs/extra/loading" ><img src="public/thumbnails/extra/loading.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/extra/loading)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/extra/loading)
[![](https://img.shields.io/badge/34-Lesson-705df2)](https://threejs-journey.com/lessons/34)

  </div>
</div>

<div>
  <h3>Mixing Html and Webgl</h3>
  <a href="https://journey.pmnd.rs/extra/mixing-html-and-webgl" ><img src="public/thumbnails/extra/mixing-html-and-webgl.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/extra/mixing-html-and-webgl)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/extra/mixing-html-and-webgl)
[![](https://img.shields.io/badge/35-Lesson-705df2)](https://threejs-journey.com/lessons/35)

  </div>
</div>

<div>
  <h3>Portal</h3>
  <a href="https://journey.pmnd.rs/extra/portal" ><img src="public/thumbnails/extra/portal.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/extra/portal)
[![](https://img.shields.io/badge/original-Sandbox-151515)](https://journey.pmnd.rs/original/extra/portal)
[![](https://img.shields.io/badge/39-Lesson-705df2)](https://threejs-journey.com/lessons/39)

  </div>
</div>

## Levels

<div>
  <h3>Level 1</h3>
  <a href="https://journey.pmnd.rs/levels/1" ><img src="public/thumbnails/levels/level1.png"  width="20%"/></a>
  <div>

[![](https://img.shields.io/badge/r3f-Sandbox-151515)](https://journey.pmnd.rs/levels/1)

  </div>
</div>