threejs之如何使用着色器加工材质

本文用于学习threejs所记录，如有错误敬请指正。

在threejs中我们常使用着色器来修改材质，如果在某些情况下我们不想完全重新自定义shader着色器，而是基于threejs提供的封装好的材质方法做一定幅度的修改我们应该怎么做呢？

这时 我们就可以使用threejs提供的onBeforeCompile 来修改threejs中材质方法中的着色器。 例如

const basicMaterial = new THREE.MeshBasicMaterial({
    color: "#fff000",
    side: THREE.DoubleSide
}); 


// 在着色器编译之前执行
basicMaterial.onBeforeCompile = (shader,renderer)=>{
    console.log("顶点着色器", shader.vertexShader);
    console.log("片元着色器", shader.fragmentShader);
    // 比如修改顶点着色器位置
    shader.vertexShader = shader.vertexShader.replace(
    "#include <begin_vertex>",
    `
        #include <begin_vertex>
        transformed.x += 1;
        transformed.y += 1;
    `);

};

#include begin_vertex 代表引入文件 其中里面着色器位置变量定义