Examples: Use PBR material in webxr_ar_lighting again. (#23171)

examples/jsm/webxr/XREstimatedLight.js

@@ -69,6 +69,8 @@ class SessionLightProbe {
 
 				textureProperties.__webglTexture = cubeMap;
 
+				this.xrLight.environment.needsPMREMUpdate = true;
+
 			}
 
 		}

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 );
 
 				//
@@ -63,7 +64,7 @@
 					// The estimated lighting also provides an environment cubemap, which we can apply here.
 					if ( xrLight.environment ) {
 
-						updateEnvironment( xrLight.environment );
+						scene.environment = xrLight.environment;
 
 					}
 
@@ -76,7 +77,7 @@
 					scene.remove( xrLight );
 
 					// Revert back to the default environment.
-					updateEnvironment( defaultEnvironment );
+					scene.environment = defaultEnvironment;
 
 				} );
 
@@ -90,7 +91,7 @@
 
 						defaultEnvironment = texture;
 
-						updateEnvironment( defaultEnvironment );
+						scene.environment = defaultEnvironment;
 
 					} );
 
@@ -105,16 +106,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 +170,6 @@
 
 			}
 
-			function updateEnvironment( envMap ) {
-
-				scene.traverse( function ( object ) {
-
-					if ( object.isMesh ) object.material.envMap = envMap;
-
-
-				} );
-
-			}
-
-
 		</script>
 	</body>
 </html>