ViewHelper: Customize the viewport size and fix renderer.autoClear settings

Author: 理子豪

examples/jsm/helpers/ViewHelper.js

@@ -34,9 +34,9 @@ class ViewHelper extends Object3D {
 	 * Constructs a new view helper.
 	 *
 	 * @param {Camera} camera - The camera whose transformation should be visualized.
-	 * @param {HTMLDOMElement} [domElement] - The DOM element that is used to render the view.
+	 * @param {WebGLRenderer|WebGPURenderer} renderer - The renderer that is used to render the view.
 	 */
-	constructor( camera, domElement ) {
+	constructor( camera, renderer ) {
 
 		super();
 
@@ -144,28 +144,24 @@ class ViewHelper extends Object3D {
 		/**
 		 * Renders the helper in a separate view in the bottom-right corner
 		 * of the viewport.
-		 *
-		 * @param {WebGLRenderer|WebGPURenderer} renderer - The renderer.
 		 */
-		this.render = function ( renderer ) {
+		this.render = function () {
 
 			this.quaternion.copy( camera.quaternion ).invert();
 			this.updateMatrixWorld();
 
 			point.set( 0, 0, 1 );
 			point.applyQuaternion( camera.quaternion );
 
-			//
-
-			const x = domElement.offsetWidth - dim;
-			const y = renderer.isWebGPURenderer ? domElement.offsetHeight - dim : 0;
-
 			renderer.clearDepth();
 
 			renderer.getViewport( viewport );
-			renderer.setViewport( x, y, dim, dim );
+			renderer.setViewport( helperViewport.x, helperViewport.y, helperViewport.z, helperViewport.w );
 
+			const autoClear = renderer.autoClear;
+			renderer.autoClear = false;
 			renderer.render( this, orthoCamera );
+			renderer.autoClear = autoClear;
 
 			renderer.setViewport( viewport.x, viewport.y, viewport.z, viewport.w );
 
@@ -177,8 +173,22 @@ class ViewHelper extends Object3D {
 		const q1 = new Quaternion();
 		const q2 = new Quaternion();
 		const viewport = new Vector4();
+		const helperViewport = new Vector4( renderer.domElement.offsetWidth - dim, renderer.isWebGPURenderer ? renderer.domElement.offsetHeight - dim : 0, dim, dim );
 		let radius = 0;
 
+		/**
+		 * Sets the viewport for the helper.
+		 * @param {number} x viewport x
+		 * @param {number} y viewport y
+		 * @param {number} width viewport width
+		 * @param {number} height viewport height
+		 */
+		this.setViewport = function ( x, y, width, height ) {
+
+			helperViewport.set( x, y, width, height );
+
+		};
+
 		/**
 		 * This method should be called when a click or pointer event
 		 * has happened in the app.
@@ -190,9 +200,9 @@ class ViewHelper extends Object3D {
 
 			if ( this.animating === true ) return false;
 
-			const rect = domElement.getBoundingClientRect();
-			const offsetX = rect.left + ( domElement.offsetWidth - dim );
-			const offsetY = rect.top + ( domElement.offsetHeight - dim );
+			const rect = renderer.domElement.getBoundingClientRect();
+			const offsetX = rect.left + ( renderer.domElement.offsetWidth - dim );
+			const offsetY = rect.top + ( renderer.domElement.offsetHeight - dim );
 			mouse.x = ( ( event.clientX - offsetX ) / ( rect.right - offsetX ) ) * 2 - 1;
 			mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;