Three.js Tutorial Crash Course - 2021

Three.js Tutorial Crash Course - 2021

Chris Courses via YouTube Direct link

- Finishing exact plane dimensions

15 of 16

15 of 16

- Finishing exact plane dimensions

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Three.js Tutorial Crash Course - 2021

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Install three.js & vite
  2. 2 - Create a scene, camera, and renderer
  3. 3 - Add a box mesh to the scene
  4. 4 - Animating and rotating the box
  5. 5 - Add a plane mesh
  6. 6 - Add directional lights
  7. 7 - Add depth / jaggedness to plane
  8. 8 - Modify to taste with dat.gui
  9. 9 - Rotate scene with OrbitControls
  10. 10 - Add hover effect
  11. 11 - Tailor hover effect to exact colors
  12. 12 - Fade out hover effect over time with GSAP
  13. 13 - Begin to set plane to exact dimensions
  14. 14 - Add randomized vertice movement
  15. 15 - Finishing exact plane dimensions
  16. 16 - Add interface with HTML and CSS

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.