WebXRManager: Removed getCamera() and added setUserCamera(). (#26041)

* WebXRManager: Removed getCamera() and added setCamera().

* Make sure cameraVR updates near and far.

* WebXRManager: Renamed cameraVR to cameraXR.

* WebXRManager: Added deprecated annotations.

* WebXRManager: Renamed setCamera() to setUserCamera().

* Fixed handinput examples.

examples/webxr_vr_handinput_pointerclick.html

@@ -39,8 +39,6 @@
 
 		import { World, System, Component, TagComponent, Types } from 'three/addons/libs/ecsy.module.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		class Object3D extends Component { }
 
 		Object3D.schema = {
@@ -305,7 +303,7 @@
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 			camera.position.set( 0, 1.2, 0.3 );
 
-			scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999 ) );
 
 			const light = new THREE.DirectionalLight( 0xffffff );
 			light.position.set( 0, 6, 0 );
@@ -322,8 +320,7 @@
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
-			renderer.xr.cameraAutoUpdate = false;
-
+			renderer.xr.setUserCamera( camera );
 			container.appendChild( renderer.domElement );
 
 			document.body.appendChild( VRButton.createButton( renderer ) );
@@ -518,7 +515,6 @@
 
 			const delta = clock.getDelta();
 			const elapsedTime = clock.elapsedTime;
-			renderer.xr.updateCamera( camera );
 			world.execute( delta, elapsedTime );
 			renderer.render( scene, camera );
 

examples/webxr_vr_handinput_pointerdrag.html

@@ -39,8 +39,6 @@
 
 		import { World, System, Component, TagComponent, Types } from 'three/addons/libs/ecsy.module.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		class Object3D extends Component { }
 
 		Object3D.schema = {
@@ -312,10 +310,9 @@
 
 						const offset = entity.getComponent( OffsetFromCamera );
 						const object = entity.getComponent( Object3D ).object;
-						const xrCamera = this.renderer.xr.getCamera();
-						object.position.x = xrCamera.position.x + offset.x;
-						object.position.y = xrCamera.position.y + offset.y;
-						object.position.z = xrCamera.position.z + offset.z;
+						object.position.x = camera.position.x + offset.x;
+						object.position.y = camera.position.y + offset.y;
+						object.position.z = camera.position.z + offset.z;
 						entity.removeComponent( NeedCalibration );
 
 					}
@@ -408,7 +405,7 @@
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 			camera.position.set( 0, 1.2, 0.3 );
 
-			scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999 ) );
 
 			const light = new THREE.DirectionalLight( 0xffffff );
 			light.position.set( 0, 6, 0 );
@@ -425,8 +422,7 @@
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
-			renderer.xr.cameraAutoUpdate = false;
-
+			renderer.xr.setUserCamera( camera );
 			container.appendChild( renderer.domElement );
 
 			document.body.appendChild( VRButton.createButton( renderer ) );
@@ -596,7 +592,6 @@
 
 			const delta = clock.getDelta();
 			const elapsedTime = clock.elapsedTime;
-			renderer.xr.updateCamera( camera );
 			world.execute( delta, elapsedTime );
 			renderer.render( scene, camera );
 

examples/webxr_vr_handinput_pressbutton.html

@@ -38,8 +38,6 @@
 
 		import { World, System, Component, TagComponent, Types } from 'three/addons/libs/ecsy.module.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		class Object3D extends Component { }
 
 		Object3D.schema = {
@@ -75,11 +73,6 @@
 				let buttonPressSound, buttonReleaseSound;
 				if ( this.renderer.xr.getSession() && ! this.soundAdded ) {
 
-					const xrCamera = this.renderer.xr.getCamera();
-
-					const listener = new THREE.AudioListener();
-					xrCamera.add( listener );
-
 					// create a global audio source
 					buttonPressSound = new THREE.Audio( listener );
 					buttonReleaseSound = new THREE.Audio( listener );
@@ -316,10 +309,9 @@
 
 						const offset = entity.getComponent( OffsetFromCamera );
 						const object = entity.getComponent( Object3D ).object;
-						const xrCamera = this.renderer.xr.getCamera();
-						object.position.x = xrCamera.position.x + offset.x;
-						object.position.y = xrCamera.position.y + offset.y;
-						object.position.z = xrCamera.position.z + offset.z;
+						object.position.x = camera.position.x + offset.x;
+						object.position.y = camera.position.y + offset.y;
+						object.position.z = camera.position.z + offset.z;
 						entity.removeComponent( NeedCalibration );
 
 					}
@@ -338,7 +330,9 @@
 
 		const world = new World();
 		const clock = new THREE.Clock();
+
 		let camera, scene, renderer;
+		let listener;
 
 		init();
 		animate();
@@ -365,7 +359,10 @@
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 			camera.position.set( 0, 1.2, 0.3 );
 
-			scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+			listener = new THREE.AudioListener();
+			camera.add( listener );
+
+			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999 ) );
 
 			const light = new THREE.DirectionalLight( 0xffffff );
 			light.position.set( 0, 6, 0 );
@@ -382,8 +379,7 @@
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
-			renderer.xr.cameraAutoUpdate = false;
-
+			renderer.xr.setUserCamera( camera );
 			container.appendChild( renderer.domElement );
 
 			document.body.appendChild( VRButton.createButton( renderer ) );
@@ -575,7 +571,6 @@
 
 			const delta = clock.getDelta();
 			const elapsedTime = clock.elapsedTime;
-			renderer.xr.updateCamera( camera );
 			world.execute( delta, elapsedTime );
 			renderer.render( scene, camera );
 

examples/webxr_vr_rollercoaster.html

@@ -35,15 +35,6 @@
 
 			let mesh, material, geometry;
 
-			const renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.xr.enabled = true;
-			renderer.xr.setReferenceSpaceType( 'local' );
-			document.body.appendChild( renderer.domElement );
-
-			document.body.appendChild( VRButton.createButton( renderer ) );
-
 			//
 
 			const scene = new THREE.Scene();
@@ -188,6 +179,16 @@
 
 			//
 
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.xr.enabled = true;
+			renderer.xr.setReferenceSpaceType( 'local' );
+			renderer.xr.setUserCamera( camera );
+			document.body.appendChild( renderer.domElement );
+
+			document.body.appendChild( VRButton.createButton( renderer ) );
+
 			window.addEventListener( 'resize', onWindowResize );
 
 			function onWindowResize() {

src/renderers/WebGLRenderer.js

@@ -1048,9 +1048,7 @@ class WebGLRenderer {
 
 			if ( xr.enabled === true && xr.isPresenting === true ) {
 
-				if ( xr.cameraAutoUpdate === true ) xr.updateCamera( camera );
-
-				camera = xr.getCamera(); // use XR camera for rendering
+				camera = xr.updateCameraXR( camera ); // use XR camera for rendering
 
 			}
 

src/renderers/webxr/WebXRManager.js

@@ -45,6 +45,8 @@ class WebXRManager extends EventDispatcher {
 
 		//
 
+		let userCamera = null;
+
 		const cameraL = new PerspectiveCamera();
 		cameraL.layers.enable( 1 );
 		cameraL.viewport = new Vector4();
@@ -55,20 +57,28 @@ class WebXRManager extends EventDispatcher {
 
 		const cameras = [ cameraL, cameraR ];
 
-		const cameraVR = new ArrayCamera();
-		cameraVR.layers.enable( 1 );
-		cameraVR.layers.enable( 2 );
+		const cameraXR = new ArrayCamera();
+		cameraXR.layers.enable( 1 );
+		cameraXR.layers.enable( 2 );
 
 		let _currentDepthNear = null;
 		let _currentDepthFar = null;
 
 		//
 
-		this.cameraAutoUpdate = true;
+		this.cameraAutoUpdate = true; // @deprecated, r153
 		this.enabled = false;
 
 		this.isPresenting = false;
 
+		this.getCamera = function () {}; // @deprecated, r153
+
+		this.setUserCamera = function ( value ) {
+
+			userCamera = value;
+
+		};
+
 		this.getController = function ( index ) {
 
 			let controller = controllers[ index ];
@@ -505,31 +515,37 @@ class WebXRManager extends EventDispatcher {
 
 		}
 
-		this.updateCamera = function ( camera ) {
+		this.updateCameraXR = function ( camera ) {
+
+			if ( session === null ) return camera;
+
+			if ( userCamera ) {
 
-			if ( session === null ) return;
+				camera = userCamera;
+
+			}
 
-			cameraVR.near = cameraR.near = cameraL.near = camera.near;
-			cameraVR.far = cameraR.far = cameraL.far = camera.far;
+			cameraXR.near = cameraR.near = cameraL.near = camera.near;
+			cameraXR.far = cameraR.far = cameraL.far = camera.far;
 
-			if ( _currentDepthNear !== cameraVR.near || _currentDepthFar !== cameraVR.far ) {
+			if ( _currentDepthNear !== cameraXR.near || _currentDepthFar !== cameraXR.far ) {
 
 				// Note that the new renderState won't apply until the next frame. See #18320
 
 				session.updateRenderState( {
-					depthNear: cameraVR.near,
-					depthFar: cameraVR.far
+					depthNear: cameraXR.near,
+					depthFar: cameraXR.far
 				} );
 
-				_currentDepthNear = cameraVR.near;
-				_currentDepthFar = cameraVR.far;
+				_currentDepthNear = cameraXR.near;
+				_currentDepthFar = cameraXR.far;
 
 			}
 
 			const parent = camera.parent;
-			const cameras = cameraVR.cameras;
+			const cameras = cameraXR.cameras;
 
-			updateCamera( cameraVR, parent );
+			updateCamera( cameraXR, parent );
 
 			for ( let i = 0; i < cameras.length; i ++ ) {
 
@@ -541,33 +557,41 @@ class WebXRManager extends EventDispatcher {
 
 			if ( cameras.length === 2 ) {
 
-				setProjectionFromUnion( cameraVR, cameraL, cameraR );
+				setProjectionFromUnion( cameraXR, cameraL, cameraR );
 
 			} else {
 
 				// assume single camera setup (AR)
 
-				cameraVR.projectionMatrix.copy( cameraL.projectionMatrix );
+				cameraXR.projectionMatrix.copy( cameraL.projectionMatrix );
 
 			}
 
 			// update user camera and its children
 
-			updateUserCamera( camera, cameraVR, parent );
+			if ( userCamera ) {
+
+				updateUserCamera( cameraXR, parent );
+
+			}
+
+			return cameraXR;
 
 		};
 
-		function updateUserCamera( camera, cameraVR, parent ) {
+		function updateUserCamera( cameraXR, parent ) {
+
+			const camera = userCamera;
 
 			if ( parent === null ) {
 
-				camera.matrix.copy( cameraVR.matrixWorld );
+				camera.matrix.copy( cameraXR.matrixWorld );
 
 			} else {
 
 				camera.matrix.copy( parent.matrixWorld );
 				camera.matrix.invert();
-				camera.matrix.multiply( cameraVR.matrixWorld );
+				camera.matrix.multiply( cameraXR.matrixWorld );
 
 			}
 
@@ -582,8 +606,8 @@ class WebXRManager extends EventDispatcher {
 
 			}
 
-			camera.projectionMatrix.copy( cameraVR.projectionMatrix );
-			camera.projectionMatrixInverse.copy( cameraVR.projectionMatrixInverse );
+			camera.projectionMatrix.copy( cameraXR.projectionMatrix );
+			camera.projectionMatrixInverse.copy( cameraXR.projectionMatrixInverse );
 
 			if ( camera.isPerspectiveCamera ) {
 
@@ -594,12 +618,6 @@ class WebXRManager extends EventDispatcher {
 
 		}
 
-		this.getCamera = function () {
-
-			return cameraVR;
-
-		};
-
 		this.getFoveation = function () {
 
 			if ( glProjLayer === null && glBaseLayer === null ) {
@@ -659,14 +677,14 @@ class WebXRManager extends EventDispatcher {
 
 				}
 
-				let cameraVRNeedsUpdate = false;
+				let cameraXRNeedsUpdate = false;
 
-				// check if it's necessary to rebuild cameraVR's camera list
+				// check if it's necessary to rebuild cameraXR's camera list
 
-				if ( views.length !== cameraVR.cameras.length ) {
+				if ( views.length !== cameraXR.cameras.length ) {
 
-					cameraVR.cameras.length = 0;
-					cameraVRNeedsUpdate = true;
+					cameraXR.cameras.length = 0;
+					cameraXRNeedsUpdate = true;
 
 				}
 
@@ -718,14 +736,14 @@ class WebXRManager extends EventDispatcher {
 
 					if ( i === 0 ) {
 
-						cameraVR.matrix.copy( camera.matrix );
-						cameraVR.matrix.decompose( cameraVR.position, cameraVR.quaternion, cameraVR.scale );
+						cameraXR.matrix.copy( camera.matrix );
+						cameraXR.matrix.decompose( cameraXR.position, cameraXR.quaternion, cameraXR.scale );
 
 					}
 
-					if ( cameraVRNeedsUpdate === true ) {
+					if ( cameraXRNeedsUpdate === true ) {
 
-						cameraVR.cameras.push( camera );
+						cameraXR.cameras.push( camera );
 
 					}