Extend threejs material

custom-material.js

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
      })
  }
}