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

Three.js Tutorial Crash Course - 2021

Chris Courses
Add to list
0:00 / 0:00