Learning 3D Graphics on the Web with Three.js

On July 20, 2018

Release date:2017, July 30

Duration:02 h 51 m

Author:Engin Arslan

Skill level:Intermediate

Language:English

Exercise files:Yes

About this video
WebGL is a low-level JavaScript API that enables creation and display of 3D content inside the browser using the GPU. Three.js is a high-level library that is built on top of WebGL. With the inevitable rise of VR and AR, 3D is bound to become a larger part of our lives and three.js makes creation of this content very easy. You need to run a simple server for local development purposes when working with Three.js to be able to load assets from your hard drive into the browser. Python offers a very simple way of starting up a server. You could also use third-party solutions like live-server, which automatically refreshes the browser when the sourced files change.

Transcript
– [Narrator] WebGL is a low level JavaScript API…that enables creation and display of 3D content…inside the browser using the GPU.…It’s supported by every modem browser out there,…except for some older versions of IE and Android browser.…Unfortunately, since WebGL is a low-level API,…it can be a bit hard and tedious to use.…You need to write hundreds of lines of codes…to even perform even the simplest tasks.…Three.js on the other hand is an open-source JavaScript…library that abstracts away the complexity of WebGL…and allows us to create real-time 3D content…in a much easier manner.…

In this course, we will be learning…about this amazing technology.…Three.js have been around for a while…and have a great support and community behind it.…Visiting the Three.js website, you can check out the links…on the main page and see the amazing body of work…created using this library.…I will just quickly show you three of my favorites.…Here is a 3D data visualization…that displays the global oil imports and exports…for various countries.…

Table of Contents

0. Introduction
Welcome 55s
What you should know 35s
Using the exercise files 58s
1. Building a Simple scene
Introduction to three.js 2m 12s
Set up the environment 2m 37s
Scene essentials 5m 17s
Populate the scene 7m 42s
Create a ground plane 5m 27s
2. Three.js Scene Object
Three.js objects 1m 56s
requestAnimationFrameQ function 2m 22s
Other Object3D properties 5m 14s
Adding fog to the scene 3m 22s
3. Lights
Lighting in threejs 2m 23s
Light types 5m 25s
dat.GUI 2m 55s
Orbit controls 2m 31s
Shadows 1m 21s
Add more objects to the scene 2m 37s
SpotLight 4m 37s
DirectionalLight 4m 11s
AmbientLight 2m 37s
RectArea Light 52s
4. Animation
Random() function 2m 16s
Math.sin() and Math.cos() 4m 56s
Add noise 1m 38s
Camera 2m 14s
Animation rig 6m 19s
Animation rig, part 2 10m 35s
Tween.js 8m 13s
5. Materials and Textures
MeshBasicMaterial 1m 33s
MeshLambertMaterial and MeshPhongMaterial 4m 2s
MeshStandardMaterial 2m 27s
Texture maps 6m 27s
Roughness maps 3m 10s
Environment maps 4m 24s
6. Geometries
Primitive geometries 2 m 59s
Manipulating vertices 6m 5s
External geometries 4m 35s
7. Particles
Creating a particle system 7m 46s
Animating the particle system 6m 14s
Particle system from geometry 3m 28s
Stats.js 2m 10s
8. Post-processingng
Post-processing 1m 12s
EffectComposer 7m 48s
Other shaders 1m 25s
Conclusion
Next steps 1m 53s