Skip to content

Instantly share code, notes, and snippets.

@ayamflow
Last active December 17, 2020 10:11
Show Gist options
  • Save ayamflow/eb276a92f1796669bc3e16c707686245 to your computer and use it in GitHub Desktop.
Save ayamflow/eb276a92f1796669bc3e16c707686245 to your computer and use it in GitHub Desktop.
Extend threejs material
import { ShaderMaterial } from 'three'
import { Color } from 'three'
import { mergeUniforms } from 'three/src/renderers/shaders/UniformsUtils'
import { ShaderLib } from 'three/src/renderers/shaders/ShaderLib'
// Simple example juste replacing the diffuse color with a new uniform
// defines and light: true are important!
export class CustomMaterial extends ShaderMaterial {
constructor(options = {}) {
super({
vertexShader: ShaderLib.standard.vertexShader,
fragmentShader: ShaderLib.standard.fragmentShader
.replace('void main() {', `
uniform vec3 uColor;
void main() {
`)
.replace('vec4 diffuseColor = vec4( diffuse, opacity );', `
vec3 diffuse = uColor;
vec4 diffuseColor = vec4( diffuse, opacity );
`),
uniforms: mergeUniforms([
ShaderLib.standard.uniforms, {
uColor: { value: new Color(0x5E5E5E) }
}
]),
defines: { 'STANDARD': '' }, // /!\ Important
isMeshStandardMaterial: true, // /!\ Important
lights: true
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment