有的时候我们写three.js自定义shaderMaterial的时候希望看一下three自带材质的着色器代码,但是源码里面都是代码片段,有时候读起来不是那么方便,这个时候可以在引入的源码或者node_modules里通过修改代码输出查看:

1: 打开引用的three.js或者node_modules下的three/build/three.module.js文件

搜索'*FRAGMENT*'

源码位置:

...
    const vertexGlsl = versionString + prefixVertex + vertexShader;
    const fragmentGlsl = versionString + prefixFragment + fragmentShader;

    // console.log( '*VERTEX*', vertexGlsl );
    // console.log( '*FRAGMENT*', fragmentGlsl );

    const glVertexShader = WebGLShader( gl, 35633, vertexGlsl );
    const glFragmentShader = WebGLShader( gl, 35632, fragmentGlsl );
...

取消注释即可 (VERTEX:顶点着色器,FRAGMENT:片元着色器)