What

Threejs Journey - Code along

Basics

1. vanilla
2. webpack
3. transform object - rotate scale move
4. animation
5. camera - typeof camera and controls
6. fullscreen - handle resize, fullscreen, pixel ratio (handle stair render)
7. geometrics - built-in geo & custom geo
8. debug ui - add tweaks as you go for faster development
9. texture - cover our geometries surface while keep the performance on check
10. material - cover our geometries surface with color
11. 3d text

Classic Techniques

1. lights - use light, however we might want light baking instead
2. shadow - use shadow, however we might want shadow baking instead
3. haunted house - utilise basic + classic
   • my version on vercel
4. particles - cool effect stars smoke rain dust fire sparkles :D
5. galaxy generator - mixing color, create shape
6. raycaster - test object intersect - detect wall, laser gun, simulate mouse event
7. scroll-based-animation

Advance Tech

1. physics - add effect like collision, bouncing etc
2. imported model
3. ?
4. realistic render - play with output encoding, shadow, tonemapping, antialiasing, remove shadow acne
5. code structure for complex codebase - if bigger, separate the debug classes

Shaders

Extra

Portal

React Three Fiber