threejs 着色器修改内置材质

想要修改内置材质需要在编译shader程序之前执行修改操作,我们用到material下的onBeforeCompile

创建材质

我们先将shader打印出来看下都有哪些内容,可以看到顶点着色器有以下内容

接着去threejs源码里面看下begin_vertex对应的代码.如下:

可以看出有定义transformed变量,我们可以对transformed进行更改,使用replace直接替换shader里面的部分代码,代码如下

const material = new THREE.MeshStandardMaterial({
 color:0xff0000
});
material .onBeforeCompile = (shader) => {
  console.log(shader); // 打印查看shader下的内容
  shader.uniforms.uStep = { value: 10 };
  shader.vertexShader = 'uniform float uStep;\n' + shader.vertexShader; // 将uStep添加进去
  shader.vertexShader = shader.vertexShader.replace(
    '#include <begin_vertex>', // 以 "#include <begin_vertex>"为标识,替换此处代码
    [
      '#include <begin_vertex>', // 由于需要用到transformed变量,所以begin_vertex是必不可少的
      `transformed.x += uStep;`, // 修改x轴坐标,移动10个像素
    ].join('\n'); // 最后转成字符串
  );
};

const mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(10,10),material )
scene.add(mesh)

最终结果如下图, 平面像x轴移动了10个像素: