diff --git a/examples/screenshots/webxr_ar_lighting.jpg b/examples/screenshots/webxr_ar_lighting.jpg
index 7df07f7a991655..2e190ae16a90a4 100644
Binary files a/examples/screenshots/webxr_ar_lighting.jpg and b/examples/screenshots/webxr_ar_lighting.jpg differ
diff --git a/examples/webxr_ar_lighting.html b/examples/webxr_ar_lighting.html
index 0824864772601c..b12fc35047a502 100644
--- a/examples/webxr_ar_lighting.html
+++ b/examples/webxr_ar_lighting.html
@@ -36,7 +36,8 @@
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
 
-				const defaultLight = new THREE.AmbientLight( 0xffffff );
+				const defaultLight = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
+				defaultLight.position.set( 0.5, 1, 0.25 );
 				scene.add( defaultLight );
 
 				//
@@ -60,12 +61,7 @@
 					scene.add( xrLight );
 					scene.remove( defaultLight );
 
-					// The estimated lighting also provides an environment cubemap, which we can apply here.
-					if ( xrLight.environment ) {
-
-						updateEnvironment( xrLight.environment );
-
-					}
+					scene.environment = null;
 
 				} );
 
@@ -76,7 +72,7 @@
 					scene.remove( xrLight );
 
 					// Revert back to the default environment.
-					updateEnvironment( defaultEnvironment );
+					scene.environment = defaultEnvironment;
 
 				} );
 
@@ -90,7 +86,7 @@
 
 						defaultEnvironment = texture;
 
-						updateEnvironment( defaultEnvironment );
+						scene.environment = defaultEnvironment;
 
 					} );
 
@@ -105,16 +101,17 @@
 				const ballGroup = new THREE.Group();
 				ballGroup.position.z = - 2;
 
-				const rows = 1;
-				const cols = 4;
+				const rows = 3;
+				const cols = 3;
 
 				for ( let i = 0; i < rows; i ++ ) {
 
 					for ( let j = 0; j < cols; j ++ ) {
 
-						const ballMaterial = new THREE.MeshPhongMaterial( {
+						const ballMaterial = new THREE.MeshStandardMaterial( {
 							color: 0xdddddd,
-							reflectivity: j / cols
+							roughness: i / rows,
+							metalness: j / cols
 						} );
 						const ballMesh = new THREE.Mesh( ballGeometry, ballMaterial );
 						ballMesh.position.set( ( i + 0.5 - rows * 0.5 ) * 0.4, ( j + 0.5 - cols * 0.5 ) * 0.4, 0 );
@@ -168,18 +165,6 @@
 
 			}
 
-			function updateEnvironment( envMap ) {
-
-				scene.traverse( function ( object ) {
-
-					if ( object.isMesh ) object.material.envMap = envMap;
-
-
-				} );
-
-			}
-
-
 		</script>
 	</body>
 </html>