Shader Learn

08 Three.js 帮你做了什么

onBeforeCompile：改写内置材质的顶点

保留 Three.js 的光照，只往顶点 shader 里插一行。

拖动旋转
00.5
讲解

带下划线的数字可以左右拖动

// 在内置材质的顶点 shader 中加入uniform float uTime;   // 0.00uniform float uAmount; // transformed.y += sin(position.x * 5.0 + uTime)               * uAmount;// 网格线
自定义顶点计算在已有材质里加入变形；法线也需相应处理。

onBeforeCompile 往内置材质里插一段顶点代码：保留它的光照，只改形状。

试一试

  • 把变形幅度调到 0.5
  • 打开网格，看顶点真的移动了