Skip to content

The ultimate Three.js course whether you are a beginner or a more advanced developer.

Notifications You must be signed in to change notification settings

PineappleBeer/threejs-journey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Three.js Journey

The ultimate Three.js course by Bruno Simon.

Learn in https://threejs-journey.xyz

What will you learn?

The course is complete, yet accessible for beginners. We will start by discovering what WebGL is and why using the Three.js library is a must. We will then discover the various components of Three.js and once the basics are acquired, we will move on to more advanced techniques to display millions of particles, add physics, add interactions, create a galaxy, animate a raging sea, etc.

At the end of the course, you will have a deep understanding of Three.js and enough experience to start your own projects.

As a bonus, we will also learn how to use the 3D software Blender to be able to create our own models.

Basics

Create your first scene and understand fundamentals like cameras, geometries, materials, textures.

Add a debug panel to tweak your environment and animate everything.

  1. Introduction
  2. What is WebGL and why using Three.js
  3. Basic scene
  4. Webpack
  5. Transforms objects
  6. Animations
  7. Cameras
  8. Fullscreen and resizing
  9. Geometries
  10. Debug UI
  11. Textures
  12. Materials
  13. 3D Text

Classic techniques

Illuminate your scene with various lights, start practicing environment creation and create millions of particles.

  1. Lights
  2. Shadows
  3. Haunted House
  4. Particles
  5. Galaxy Generator
  6. Raycaster

Advanced techniques

Add physics to your world so that objects start to collide and stumble. Then import your own model made with Blender and make it look as realistic as possible.

  1. Physics
  2. Imported models
  3. Custom model with Blender
  4. Realistic render

Shaders

Using Three.js materials is great but creating your owns is even better.

Learn the shader language to unleash the true power of WebGL and create stunning looking experiences!

  1. Shaders
  2. Shader patterns
  3. Raging sea
  4. Animated galaxy
  5. Modified materials

Extra

Creating a cool WebGL experience is useless if most computers can’t run it.

Learn how to monitor and optimize performances to achieve the best possible frame rate.

  1. Post-processing
  2. Performance tips
  3. Intro and loading progress
  4. Mixing HTML and WebGL
  5. The end

About

The ultimate Three.js course whether you are a beginner or a more advanced developer.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published