Use VRDisplays's requestAnimationFrame if VR headset connected (#9252)

examples/js/effects/VREffect.js

@@ -233,6 +233,20 @@ THREE.VREffect = function ( renderer, onError ) {
 
 	};
 
+	this.requestAnimationFrame = function ( f ) {
+
+		if ( ! isDeprecatedAPI && vrHMD !== undefined ) {
+
+			vrHMD.requestAnimationFrame( f );
+
+		} else {
+
+			window.requestAnimationFrame( f );
+
+		}
+
+	};
+
 	// render
 
 	var cameraL = new THREE.PerspectiveCamera();

examples/webvr_cubes.html

@@ -170,7 +170,7 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
+				effect.requestAnimationFrame( animate );
 				render();
 
 			}

examples/webvr_panorama.html

@@ -145,7 +145,7 @@
 
 			effect.render( scene, camera );
 
-			requestAnimationFrame( animate );
+			effect.requestAnimationFrame( animate );
 
 		}
 

examples/webvr_rollercoaster.html

@@ -206,7 +206,7 @@
 
 			function animate( time ) {
 
-				requestAnimationFrame( animate );
+				effect.requestAnimationFrame( animate );
 
 				for ( var i = 0; i < funfairs.length; i ++ ) {
 
@@ -239,7 +239,7 @@
 
 			};
 
-			requestAnimationFrame( animate );
+			effect.requestAnimationFrame( animate );
 
 		</script>
 

examples/webvr_shadow.html

@@ -111,7 +111,7 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
+				effect.requestAnimationFrame( animate );
 				render();
 
 			}

examples/webvr_video.html

@@ -172,7 +172,7 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
+				effect.requestAnimationFrame( animate );
 				render();
 
 			}

examples/webvr_vive.html

@@ -130,19 +130,19 @@
 					material.metalnessMap.wrapS = THREE.RepeatWrapping;
 					material.normalMap.wrapS = THREE.RepeatWrapping;
 
-					group.traverse( function ( child ) {
+					group.traverse( function ( child ) {
 
-						if ( child instanceof THREE.Mesh ) {
+						if ( child instanceof THREE.Mesh ) {
 
-							child.material = material;
+							child.material = material;
 
-						}
+						}
 
 					} );
 
 					group.position.y = - 2;
-					group.rotation.y = - Math.PI / 2;
-					room.add( group );
+					group.rotation.y = - Math.PI / 2;
+					room.add( group );
 
 				} );
 
@@ -219,7 +219,7 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
+				effect.requestAnimationFrame( animate );
 				render();
 
 			}