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.MeshMatcapMaterial, {
      

//       // 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;'
//       },


      material: {
        lights: false,
        side: THREE.DoubleSide
      },
      // Uniforms (will be applied to existing or added)

       uniforms: {
         diffuse: new THREE.Color(0xcc4444)
      }

      
    });

  
    
    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