body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}


var mesh, renderer, scene, camera, controls;



    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );

    controls = new THREE.OrbitControls( camera, document.body );
    
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 80, 80, 80 );
    scene.add( light );
  
    scene.add( new THREE.AxesHelper( 20 ) );
    
  
  
  const loader = new THREE.TextureLoader;

    var geometry = new THREE.SphereBufferGeometry( 20, 12, 12 );
  


    // Applies THREE.MaterialCallback to onBeforeRender of Mesh and SkinnedMesh

    THREE.MaterialCallback.use();


    // Patches

    const TestPatch = {
      compile: function( shader, plugin, object ) {
      
          const color = new THREE.Color;
        
          if ( object )
            color.copy( object.tint );
        
          THREE.patchShader(shader, {
            
            uniforms: {
              tintColor: color,
              noiseStrength: 0.0
            },
            
            header: `
uniform vec3 tintColor;
uniform float noiseStrength;

float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}

`,
            vertex: {
              '#include <begin_vertex>': 'transformed += noise(transformed / 20.0) * noiseStrength;'
            },
            fragment: {
                '#include <fog_fragment>': 'gl_FragColor.rgb *= tintColor;'
            }

          });

      },
      render: function( object, uniforms, context ) {
        
        context.set( uniforms.tintColor, object.tint );
        context.set( uniforms.noiseStrength, object.noise );
        
      }
    };
    



    var material = new THREE.MeshPhongMaterial({
      map: loader.load('https://threejs.org/examples/textures/brick_diffuse.jpg')
    });


    material.onBeforeCompile = [ TestPatch ];

    mesh = new THREE.Mesh( geometry, material );
    mesh.tint = new THREE.Color('red');
    mesh.noise = 0;
    scene.add( mesh );

    mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = 50;
    mesh.tint = new THREE.Color('green');
    mesh.noise = 10;
    scene.add( mesh );



    // Storing per-mesh properties with a custom class (optimal)

    function SpecialMesh( geometry, material ) {

      THREE.Mesh.call( this, geometry, material );
    
      this.tint = new THREE.Color;
      
    }

    Object.assign( SpecialMesh.prototype, {
      ...THREE.Object3D.prototype,
      ...THREE.Mesh.prototype,
      ...THREE.EventDispatcher.prototype,
      
      noise: 0.0
    });

    mesh = new SpecialMesh( geometry, material );
    mesh.position.x = 100;
    mesh.tint.set('blue');
    scene.add( mesh );

  let f = 0.0;
  function animate() {
    
      f += 0.1;
    
      mesh.noise = Math.sin(f) * 30;

      requestAnimationFrame( animate );

      renderer.render( scene, camera );

  }

    camera.position.set( 50, 100, 150 );
    camera.lookAt(new THREE.Vector3(50, 0, 0));


animate();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://mevedia.com/share/three.min.js
  2. https://threejs.org/examples/js/controls/OrbitControls.js
  3. https://threejs.org/examples/js/controls/TransformControls.js
  4. https://mevedia.com/share/ShaderMaterialExtend.js
  5. https://mevedia.com/share/MaterialPlugin.js?noCache1