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
This Pen doesn't use any external CSS resources.