Learning 3D Graphics on the Web with Three.js
2h 52mIntermediate2017-06-30
Authors
Engin Arslan
Front-End Developer and a former Visual Effects Artist
Course details
3D graphics are a core part of data visualization, virtual reality, augmented reality, and gaming—all fields that are growing fast! Learn to use the three.js JavaScript library to create 3D graphics for the web. Discover how to create 3D objects and customize their properties, work with different types of lights, animate your scene, add materials and textures, and build particle systems. Author Engin Arslan also teaches students how to render the scene, adding in post-processing effects and shaders. This course will give you the technical and conceptual understanding for creating advanced visuals with three.js, and working with 3D graphics in general.
Learning objectives
Building a simple scene
Creating three.js 3D objects
Adding light and shadows
Animating with Tween.js
Working with materials and textures
Editing and importing geometries
Creating a particle system
Post-processing with effects and shaders
Learning objectives
Building a simple scene
Creating three.js 3D objects
Adding light and shadows
Animating with Tween.js
Working with materials and textures
Editing and importing geometries
Creating a particle system
Post-processing with effects and shaders
Skills covered
Mobile Game DevelopmentJavaScript FrameworksJavaScriptMobile DevelopmentOracleLearningWeb Development
Concepts
0. Introduction
- 01 - Welcome
- 02 - What you should know
- 03 - Using the exercise files
1. Building a Simple Scene
- 04 - Introduction to three.js
- 05 - Set up the environment
- 06 - Scene essentials
- 07 - Populate the scene
- 08 - Create a ground plane
2. Three.js Scene Object
- 09 - Three.js objects
- 10 - requestAnimationFrame() function
- 11 - Other Object3D properties
- 12 - Adding fog to the scene
3. Lights
- 13 - Lighting in three.js
- 14 - Light types
- 15 - dat.GUI
- 16 - Orbit controls
- 17 - Shadows
- 18 - Add more objects to the scene
- 19 - SpotLight
- 20 - DirectionalLight
- 21 - AmbientLight
- 22 - RectAreaLight
4. Animation
- 23 - Random() function
- 24 - Math.sin() and Math.cos()
- 25 - Add noise
- 26 - Camera
- 27 - Animation rig
- 28 - Animation rig, part 2
- 29 - Tween.js
5. Materials and Textures
- 30 - MeshBasicMaterial
- 31 - MeshLambertMaterial and MeshPhongMaterial
- 32 - MeshStandardMaterial
- 33 - Texture maps
- 34 - Roughness maps
- 35 - Environment maps
6. Geometries
- 36 - Primitive geometries
- 37 - Manipulating vertices
- 38 - External geometries
7. Particles
- 39 - Creating a particle system
- 40 - Animating the particle system
- 41 - Particle system from geometry
- 42 - Stats.js
8. Post-Processing
- 43 - Post-processing
- 44 - EffectComposer
- 45 - Other shaders
Conclusion
- 46 - Next steps