diff --git a/examples/webgl_materials_modified.html b/examples/webgl_materials_modified.html index d6c4d58c49855e..cc8bcea7405cf3 100644 --- a/examples/webgl_materials_modified.html +++ b/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,16 +48,18 @@ 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 ', [ - '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' ) ); @@ -58,6 +67,12 @@ }; + 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