Lesson 16 · 4 exercises
封装材质库
从图形学原理走到可复用的实际效果。每题都有源码、操作与验收条件。
01 / ⭐
渐变材质工厂
调用 createGradientMaterial() 后画面显示双色渐变；两个网格可分别创建和释放材质。
02 / ⭐⭐颜色速度方向参数
颜色、速度、方向控件会立即改变预览；速度为 0 时动画停止，方向切换改变色带方向。
03 / ⭐⭐⭐React Three Fiber 组件
静态预览可运行；随题提供的 R3F 组件能在 React 项目中以 props 控制颜色、速度、方向并在卸载时释放材质。
04 / ⭐⭐⭐⭐材质包本地打包与消费
npm pack --dry-run 列出 JS 与 Shader 源码；npm pack 生成 tgz，独立消费项目可导入并渲染；包内容不含演示 HTML。