Examples: Enhance env maps demo. (#27787)

examples/webgl_materials_envmaps.html

@@ -31,7 +31,7 @@
 
 			let controls, camera, scene, renderer;
 			let textureEquirec, textureCube;
-			let sphereMesh, sphereMaterial;
+			let sphereMesh, sphereMaterial, params;
 
 			init();
 			animate();
@@ -84,7 +84,7 @@
 
 				//
 
-				const params = {
+				params = {
 					Cube: function () {
 
 						scene.background = textureCube;
@@ -101,10 +101,14 @@
 						sphereMaterial.needsUpdate = true;
 
 					},
-					Refraction: false
+					Refraction: false,
+					backgroundRotationX: false,
+					backgroundRotationY: false,
+					backgroundRotationZ: false,
+					syncMaterial: false
 				};
 
-				const gui = new GUI();
+				const gui = new GUI( { width: 300 } );
 				gui.add( params, 'Cube' );
 				gui.add( params, 'Equirectangular' );
 				gui.add( params, 'Refraction' ).onChange( function ( value ) {
@@ -124,6 +128,10 @@
 					sphereMaterial.needsUpdate = true;
 
 				} );
+				gui.add( params, 'backgroundRotationX' );
+				gui.add( params, 'backgroundRotationY' );
+				gui.add( params, 'backgroundRotationZ' );
+				gui.add( params, 'syncMaterial' );
 				gui.open();
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -151,6 +159,30 @@
 
 			function render() {
 
+				if ( params.backgroundRotationX ) {
+
+					scene.backgroundRotation.x += 0.001;
+
+				}
+
+				if ( params.backgroundRotationY ) {
+
+					scene.backgroundRotation.y += 0.001;
+
+				}
+
+				if ( params.backgroundRotationZ ) {
+
+					scene.backgroundRotation.z += 0.001;
+
+				}
+
+				if ( params.syncMaterial ) {
+
+					sphereMesh.material.envMapRotation.copy( scene.backgroundRotation );
+
+				}
+
 				camera.lookAt( scene.position );
 				renderer.render( scene, camera );
 
@@ -159,4 +191,4 @@
 		</script>
 
 	</body>
-</html>
+</html>