try THREEx in jsfiddle
2D (uv, time) texture
by jmchen
HTML
<div id="info">Noise 2D Texture</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
<script src='http://jyunming-chen.github.io/tutsplus/js/threex.noiseshadermaterial.js'></script>
CSS
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
text-align: center;
color: #ffff00
}
body {
overflow: hidden;
}
JavaScript
var renderer, scene, camera, controls, mesh;
var clock;
init();
animate();
function init() {
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.z = 3;
controls = new THREE.OrbitControls(camera, renderer.domElement);
//////////////////////////////////////////////////////////////////////////////////
// add an object and make it move //
//////////////////////////////////////////////////////////////////////////////////
//var geometry = new THREE.SphereGeometry( 0.5, 32, 32);
var geometry = new THREE.PlaneGeometry(1,1);
//var geometry = new THREE.TorusKnotGeometry(1.0, 0.3, 100, 32);
var material = new THREEx.NoiseShaderMaterial()
material.side = THREE.DoubleSide;
mesh = new THREE.Mesh( geometry, material );
geometry.computeBoundingSphere();
// mesh.material.uniforms[ "scale" ].value = geometry.boundingSphere.radius;
scene.add( mesh );
}
function animate() {
var delta = clock.getDelta();
mesh.material.uniforms[ "time" ].value += delta/15;
mesh.material.uniforms[ "offset" ].value.x += delta/10;
mesh.material.uniforms[ "offset" ].value.y += delta/10;
requestAnimationFrame (animate);
controls.update();
renderer.render( scene, camera );
}