ThreeJS开发的火焰贴图动画和水波贴图动画着色器源码【Shader-animation动画】

本源码演示了使用Threejs结合WebGL的着色器编程实现火焰贴图材质的燃烧动感材质和水波流动的贴图材质动画， 场景中包括两个正方形平面，分别显示了火焰和水波，贴图采用着色器绘制具有动画质感，并且具有半透明质感；.包括全部源码，可以自行后续开发；可用于WEBGL互动开发学习，非常值得学习。部分源码

	//载入贴图
	var noiseTexture = new THREE.ImageUtils.loadTexture( 'images/cloud.png' );
	noiseTexture.wrapS = noiseTexture.wrapT = THREE.RepeatWrapping; 
		
	var lavaTexture = new THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
	lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping; 
	
	// use "this." to create global object
	this.customUniforms = {
		baseTexture: 	{ type: "t", value: lavaTexture },
		baseSpeed: 		{ type: "f", value: 0.05 },
		noiseTexture: 	{ type: "t", value: noiseTexture },
		noiseScale:		{ type: "f", value: 0.5337 },
		alpha: 			{ type: "f", value: 1.0 },
		time: 			{ type: "f", value: 1.0 }
	};
	
	// create custom material from the shader code above
	//   that is within specially labeled script tags
	var customMaterial = new THREE.ShaderMaterial( 
	{
	    uniforms: customUniforms,
		vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
		fragmentShader: document.getElementById( 'fragmentShader' ).textContent
	}   );

	// other material properties
	customMaterial.side = THREE.DoubleSide;

	// apply the material to a surface
	var flatGeometry = new THREE.PlaneGeometry( 100, 100 );
    var surface = new THREE.Mesh( flatGeometry, customMaterial );
	surface.position.set(-60,50,150);
	scene.add( surface );
	
	/////////////////////////////////
	// again, but for water!
	
	var waterTexture = new THREE.ImageUtils.loadTexture( 'images/water.jpg' );
	waterTexture.wrapS = waterTexture.wrapT = THREE.RepeatWrapping; 

注：threejs/WebGL开发，非常值得学习。本地预览建议部署WEB服务器，配置运行服务器等网络访问地址运行，建议用火狐浏览器，谷歌浏览器等。