My goal is to get a working understanding of three.js/WebGL and shaders. I want to learn some basics (geometries, textures/materials, lighting, camera) – just enough to understand what’s involved and how to control it, I know I could go really deep into any of those “basics.” And then learn how to make scroll-based animations and use shaders.
I still need to come up with an actual project to apply all this to – maybe since I’m interested in product repair I could find an exploded model of a Fairphone/iPhone and have it assemble/rotate as you scroll.
- geometry: three.js Geometry classes, how to load models
- materials: three.js Material classes, how to load shader materials
- lights
- cameras & controls: three.js Camera classes, controls,
- making my own shaders: shaderpark, GLSL
three.js resources
- https://threejs.org/manual/
- https://threejs-journey.com/
three.js animation resources
- https://tympanus.net/codrops/2022/01/05/crafting-scroll-based-animations-in-three-js/
- https://sbcode.net/threejs/animate-on-scroll/
demos & guides
- https://rd.nytimes.com/research/3d-web-technology
- https://rd.nytimes.com/research/spatial-journalism
Shader resources
- https://shaderpark.com/
- https://www.shadertoy.com/
- https://shaderbooth.com/