Add star fields, click-activated camera movements, and seamless transitions with the full course at 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 - codepen.io/chriscourses/pen/G...
Three.js Installation Page - threejs.org/docs/index.html#m...
Three.js unpkg CDN - unpkg.com/three@0.126.1/build...
Orbit Controls CDN - unpkg.com/three@0.126.1/examp...
📃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
Негізгі бет Learn Three.js from Scratch: Crash Course Tutorial
Пікірлер: 194