This course aims to demystify the process of developing an interactive 3D environment in the browser using three.js. By the end of the course, learners will be able to create a scene, camera, and renderer, add various meshes and lights, animate objects, implement hover effects, and integrate HTML/CSS interfaces. The teaching method includes practical demonstrations and hands-on coding sessions. This course is intended for individuals interested in web development, interactive design, and 3D graphics.
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
