Threejs使用自定义shader

Threejs中的ShaderMaterial可以使用自定义的shader，参数vertexShader和fragmentShader分别对应顶点着色器和片段着色器的内容（由GLSL写成）。

顶点着色器和片段着色器的内容可以分别放到一个<script>标签内

<script id="vs" type="x-shader/x-vertex">
varying vec4 vPosition;
void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    vPosition = gl_Position;
}
</script>
<script id="fs" type="x-shader/x-fragment">
varying vec4 vPosition;
void main() {
    gl_FragColor = vec4(vPosition.x+0.5,vPosition.y+0.5,vPosition.z+0.5,1.0);
}
</script>

然后可以通过下面的方式创建ShaderMaterial

var material = new THREE.ShaderMaterial( {
    vertexShader: document.getElementById( 'vs' ).textContent.trim(),
    fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );

将上面的材质赋予模型后，模型的顶点颜色与顶点的位置相关