Use customProgramCacheKey in modified material example

Author: Oletus

examples/webgl_materials_modified.html

@@ -18,6 +18,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
@@ -26,6 +27,12 @@
 
 			var materialShader;
 
+			var params = {
+
+				wavesInYDimension: true
+
+			};
+
 			init();
 			animate();
 
@@ -41,23 +48,31 @@
 
 					shader.uniforms.time = { value: 0 };
 
+					var dimension = params.wavesInYDimension ? 'y' : 'z';
+
 					shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
 					shader.vertexShader = shader.vertexShader.replace(
 						'#include <begin_vertex>',
 						[
-							'float theta = sin( time + position.y ) / 2.0;',
-							'float c = cos( theta );',
-							'float s = sin( theta );',
-							'mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );',
-							'vec3 transformed = vec3( position ) * m;',
-							'vNormal = vNormal * m;'
+							`float theta = sin( time + position.${ dimension } ) / 2.0;
+							float c = cos( theta );
+							float s = sin( theta );
+							mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );
+							vec3 transformed = vec3( position ) * m;
+							vNormal = vNormal * m;`
 						].join( '\n' )
 					);
 
 					materialShader = shader;
 
 				};
 
+				material.customProgramCacheKey = function() {
+
+					return params.wavesInYDimension ? '1' : '0';
+
+				};
+
 				var loader = new GLTFLoader();
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
@@ -79,6 +94,13 @@
 
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
+				
+				var gui = new GUI();
+				gui.add( params, 'wavesInYDimension' ).onChange( function() {
+
+					material.needsUpdate = true;
+
+				});
 
 				// EVENTS