Learning 3D Graphics on the Web with Three.js

Learn to use the three.js JavaScript library to create 3D graphics for the web.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. Building a Simple Scene

• Introduction to three.js
• Set up the environment
• Scene essentials
• Populate the scene
• Create a ground plane

2. Three.js Scene Object

• Three.js objects
• requestAnimationFrame() function
• Other Object3D properties
• Adding fog to the scene

3. Lights

• Lighting in three.js
• Light types
• dat.GUI
• Orbit controls
• Shadows
• Add more objects to the scene
• SpotLight
• DirectionalLight
• AmbientLight
• RectAreaLight

4. Animation

• Random() function
• Math.sin() and Math.cos()
• Add noise
• Camera
• Animation rig
• Animation rig, part 2
• Tween.js

5. Materials and Textures

• MeshBasicMaterial
• MeshLambertMaterial and MeshPhongMaterial
• MeshStandardMaterial
• Texture maps
• Roughness maps
• Environment maps

6. Geometries

• Primitive geometries
• Manipulating vertices
• External geometries

7. Particles

• Creating a particle system
• Animating the particle system
• Particle system from geometry
• Stats.js

8. Post-Processing

• Post-processing
• EffectComposer
• Other shaders

Conclusion

• Next steps