Three.js Journey

 
Click to view all Live Demos
 

• 01 - Basics

  • 03 - Basic Scene   Live Demo
  • 05 - Transform Objects   Live Demo
  • 06 - Animations   Live Demo
  • 07 - Camera   Live Demo
  • 08 - Fullscreen and Resizing   Live Demo
  • 09 - Geometries   Live Demo
  • 10 - Debug UI   Live Demo
  • 11 - Textures   Live Demo
  • 12 - Materials   Live Demo
  • 13 - 3D Text   Live Demo

• 02 - Classic Techniques

  • 15 - Lights   Live Demo
  • 16 - Shadows   Live Demo
  • 17 - Haunted House   Live Demo
  • 18 - Particles   Live Demo
  • 19 - Galaxy Generator   Live Demo
  • 20 - Raycaster   Live Demo
  • 21 - Scroll Based Animations   Live Demo

• 03 - Advanced Techniques

  • 22 - Physics   Live Demo
  • 23 - Imported Modules   Live Demo
  • 24 - Custom model w/ Blender   Live Demo
  • 25 - Realistic Render   Live Demo
  • 26 - Code Structuring for Bigger Projects   Live Demo

• 04 - Shaders

  • 27 - Shaders   Live Demo
  • 28 - Shader Patterns   Live Demo
  • 29 - Raging Sea   Live Demo
  • 30 - Animated Galaxy   Live Demo
  • 31 - Modified Materials   Live Demo

• 05 - Extra

  • 32 - Post Processing   Live Demo
  • 33 - Performance Tips   Live Demo
  • 34 - Intro & Loading Progress   Live Demo
  • 35 - Mixing HTML & WebGL   Live Demo

• 07 - React Three Fiber

  • 42 - First R3F Application   Live Demo
  • 43 - Drei   Live Demo
  • 44 - Debug   Live Demo
  • 45 - Environment & Staging   Live Demo
  • 46 - Load Models   Live Demo
  • 47 - 3D Text   Live Demo
  • 49 - Mouse Events   Live Demo
  • 50 - Post Processing   Live Demo
  • 52 - Physics   Live Demo

Building from Source

• Fetch latest source code from master branch.

rajput-hemant@arch:~$ git clone https://github.com/rajput-hemant/threejs-journey

• Move to desired module directory.

rajput-hemant@arch:~$ cd threejs-journey/
rajput-hemant@arch:~/threejs-journey$ cd 03-basic-scene/

• Install dependencies and run dev server.

rajput-hemant@arch:~/threejs-journey/03-basic-scene$ npm install
rajput-hemant@arch:~/threejs-journey/03-basic-scene$ npm run dev

Course: Three.js Journey By Bruno Simon