Threejs使用自定义shader

最新推荐文章于 2026-04-15 10:59:46 发布

原创

最新推荐文章于 2026-04-15 10:59:46 发布 · 6.2k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在Threejs中使用ShaderMaterial结合自定义的顶点着色器和片段着色器来实现独特视觉效果。通过将GLSL代码放入<script>标签并创建ShaderMaterial，可以改变模型的顶点颜色，使颜色与顶点位置相关。实例展示了一个基于位置颜色的旋转立方体，展示了自定义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()
} );

将上面的材质赋予模型后，模型的顶点颜色与顶点的位置相关，完整代码如下