云澜组件库 Clyune Component Gallery着色器变形球 · 原理与代码
ShaderMaterial 变形球体。
运行逻辑
访问 `/threejs/shader` 时，DemoHost 按 registry 的 `mod: 'shader-blob'` 懒加载 `demos/shader-blob.js`，调用 `mountShaderBlob(host, { variant: 'shader' })`。 `createThreeStage` 创建 WebGLRenderer、Scene、PerspectiveCamera 与 OrbitControls，并接上信息面板。 模块用 `S.onFrame` 注册每帧回调。 每个 `requestAnimationFrame`：读取控件值，按速度缩放模拟时钟（dt 上限 50 ms），执行帧回调绘制；返回的读数写入信息面板。 改变参数：颜色/速度/大小等即时生效，需要重建的参数触发重新挂载；离开页面时取消 rAF、移除监听并释放资源。
运行环境
Canvas 2D: 2D 画布绘图; WebGL (three.js): three.js 通过 WebGLRenderer 使用 WebGL; requestAnimationFrame: 与屏幕刷新同步的动画循环; ResizeObserver: 画布随容器尺寸自适应; Pointer Events: 鼠标/触摸/触控笔统一事件; devicePixelRatio: HiDPI 清晰渲染（上限 2×） · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21, three 0.170.0
引入的组件与依赖
three 0.170.0, three/addons/controls/OrbitControls.js 0.170.0, react 18.3.1
引入的组件函数
createThreeStage — 共享 Three.js 舞台：WebGLRenderer、场景、透视相机、OrbitControls、自适应取景与渲染循环; THREE — three.js 命名空间; fmt — 数字格式化（固定小数位）; F — 公式块 HTML; S.onFrame — 注册每帧回调，返回值进入信息面板读数; THREE.Color — 颜色对象; THREE.ShaderMaterial — 自定义 GLSL 材质; THREE.IcosahedronGeometry — 二十面体几何体; THREE.Mesh — 网格物体（几何体 + 材质）
本 demo 代码
frontend/src/demos/shader-blob.js: shader-blob.js (L1-L59)
代码解释
L4-11: `PARAMS_SPEC`（常量/表）。 L12-27: `DOC`（常量/表）；数学计算用到 `Math.sin`。 L29-59: `mountShaderBlob`（函数）；创建 three.js 对象 `Color`, `ShaderMaterial`, `IcosahedronGeometry`, `Mesh`；数学计算用到 `Math.sin`；返回读数 `t`, `s`, `f`, `d0`, `verts`, `mix` 给信息面板。
原理
p′ = p + n · s · sin(uTime + f · p.y) 颜色 = mix(A, B, 0.5 + 0.5·sin(3·p.y + uTime)) 亮度 = 0.5 + 0.5 · (N · L) 着色器（Shader） 是直接跑在显卡上的小程序。 顶点着色器 决定每个顶点画在哪：这里把每个顶点沿法线 n 推出去一段距离 d，d 随高度 y 和时间变化，于是球面像水波一样鼓起、凹下。 片元着色器 决定每个像素的颜色：在颜色 A 和 B 之间按正弦来回混合，再乘上简单的光照系数。 uTime 是 JavaScript 每帧传给显卡的 uniform 变量，所有顶点共享。