Creates a THREE.ShaderMaterial rendered with custom shaders.

  <ShaderMaterial :props="{ uniforms: {}, vertexShader: '...', fragmentShader: '...' }" />

Source :


As the other materials, you should use special prop props to define the following THREE.ShaderMaterial properties :

uniformsUniforms to pass to shaderObject
vertexShaderVertex shader, as stringString
fragmentShaderFragment shader, as stringString


Adding textures

You can pass textures to shaders by adding a Texture with the prop uniform as a child of the material:

<ShaderMaterial :props="{ fragmentShader: '...' }">
  <Texture src="/my/texture/src.png" uniform="myCustomTexture"/>

The texture will be set as a uniform sampler2D in the shader. The fragment shader in the example above would have access to the texture as:

uniform sampler2D myCustomTexture;

void main(){
  gl_FragColor = texture2D(myCustomTexture, /* your UV vec2 */);