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 );
    camera.position.set( 2, 2, 4 );
    camera.lookAt(new THREE.Vector3(0,0,0));

    controls = new THREE.OrbitControls( camera );
    
    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 ) );
    
  
  

    var geometry = new THREE.TorusBufferGeometry( 1, 0.2, 16, 100 );
  
  
    // Extend a standard material
    var material = THREE.ShaderMaterial.extend(THREE.MeshPhongMaterial, {
      

      // Will be prepended to vertex and fragment code

      header: 'varying vec3 vNN; varying mat3 NM; varying vec3 vEye;',


      // Insert code lines by hinting at a existing

      vertex: {
        // Inserts the line after #include <fog_vertex>
        '#include <fog_vertex>': `
          vNN = normalize(transformedNormal);
          NM = normalMatrix;
          vEye = normalize(transformed-cameraPosition);`
      },
      fragment: {
        'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : 'gl_FragColor.rgb += diffuseColor.rgb * pow(1.0 - abs(dot(normalize(NM*vEye), vNN )), 2.5) * 2.0;'
      },


      // Uniforms (will be applied to existing or added)

      uniforms: {
        diffuse: new THREE.Color('gray')
      }

      
    });

  
    
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
    // Extend a shader material
    material = THREE.ShaderMaterial.extend(material, {
      
      vertex: {
        'project_vertex': {
            '@vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );':
              'vec4 mvPosition = modelViewMatrix * vec4( transformed * 0.5, 1.0 );'
        }
      }
      
    });
  

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );


    // Patch via onBeforeCompile

    material = new THREE.MeshPhongMaterial({
      
      onBeforeCompile: function(shader) {
        
        THREE.patchShader(shader, {
          
          header: 'uniform vec3 tint;',
          
          fragment: {
              '#include <fog_fragment>': 'gl_FragColor.rgb *= tint;'  
          },
          
          vertex: {
            'project_vertex': {
                '@vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );':
                  'vec4 mvPosition = modelViewMatrix * vec4( transformed * 0.25, 1.0 );'
            }
          },
          
          uniforms: {
            tint: new THREE.Color('orange')
          }
          
        });
        
      }
    });

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

  function animate() {

      requestAnimationFrame( animate );

      renderer.render( scene, camera );

  }



animate();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://threejs.org/build/three.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?v4