materialRotation
materialRotation
提供对 `SpriteMaterial` 材质上 `rotation` 属性的访问,该值定义了精灵(Sprite)围绕其中心点的 2D 旋转角度。
核心优势
将 `SpriteMaterial` 的旋转逻辑与 TSL 无缝集成,允许在 GPU 端高效地处理成千上万个精灵的旋转,而无需手动管理 Uniform,这对于粒子系统等性能敏感的场景至关重要。
常见用途
在顶点着色器中旋转精灵的顶点,以实现标准的精灵旋转。
通过在 JS 中动画化 `material.rotation` 属性,创建旋转的 UI 图标或加载指示器。
在 2D 粒子系统中,作为桥梁将每个粒子独立的旋转状态传递给 GPU。
作为 UV 变换的因子,用于旋转精灵内部的纹理而不是其边界。
如何调整
通过在 JavaScript 中修改 `SpriteMaterial` 的 `rotation` 属性(一个以弧度为单位的数字)来调整。正值使其顺时针旋转,负值使其逆时针旋转。在动画循环中持续改变该值可产生平滑的旋转动画。
代码示例
1// 在顶点着色器中,使用 materialRotation 构建一个 2D 旋转矩阵
2const c = cos( materialRotation );
3const s = sin( materialRotation );
4const rotationMatrix = mat2( c, s, -s, c );
5
6// 将旋转应用到精灵的顶点位置上
7const rotatedPosition = rotationMatrix.mul( position.xy );