Dive into a comprehensive 2-hour and 35-minute tutorial on Three.js, covering everything from installation to creating interactive 3D environments in the browser. Learn to set up a scene with cameras and renderers, add and animate meshes, implement lighting, and create depth. Explore advanced techniques like using dat.gui for customization, implementing OrbitControls for scene rotation, and adding hover effects. Master GSAP for smooth animations, work with precise plane dimensions, and add randomized vertex movements. Conclude by integrating your 3D environment with HTML and CSS for a polished interface. Access additional resources, including the finished project on CodePen and essential Three.js documentation links, to enhance your learning experience.
Overview
Syllabus
- Install three.js & vite
- Create a scene, camera, and renderer
- Add a box mesh to the scene
- Animating and rotating the box
- Add a plane mesh
- Add directional lights
- Add depth / jaggedness to plane
- Modify to taste with dat.gui
- Rotate scene with OrbitControls
- Add hover effect
- Tailor hover effect to exact colors
- Fade out hover effect over time with GSAP
- Begin to set plane to exact dimensions
- Add randomized vertice movement
- Finishing exact plane dimensions
- Add interface with HTML and CSS
Taught by
Chris Courses
