Add star fields, click-activated camera movements, and seamless transitions with the full course at https://chriscourses.com/threejs-bundle
Practical three.js development is rarely taught these days, but let's see if we can fix that—this course aims to demystify the process of developing an interactive 3D environment in the browser.
🔗Links
Finished Project - https://codepen.io/chriscourses/pen/GRrWQdE
Three.js Installation Page - https://threejs.org/docs/index.html#manual/en/introduction/Installation
Three.js unpkg CDN - https://unpkg.com/[email protected]/build/three.module.js
Orbit Controls CDN - https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js
📃Table of Contents
00:00 - Install three.js & vite
17:41 - Create a scene, camera, and renderer
24:26 - Add a box mesh to the scene
30:43 - Animating and rotating the box
33:22 - Add a plane mesh
40:08 - Add directional lights
42:17 - Add depth / jaggedness to plane
52:23 - Modify to taste with dat.gui
1:07:23 - Rotate scene with OrbitControls
1:12:13 - Add hover effect
1:43:08 - Tailor hover effect to exact colors
1:44:54 - Fade out hover effect over time with GSAP
1:50:32 - Begin to set plane to exact dimensions
1:55:21 - Add randomized vertice movement
2:11:43 - Finishing exact plane dimensions
2:17:51 - Add interface with HTML and CSS