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

Author: 理子豪

examples/jsm/helpers/ViewHelper.js

@@ -155,17 +155,15 @@ class ViewHelper extends Object3D {
 			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 +175,22 @@ class ViewHelper extends Object3D {
 		const q1 = new Quaternion();
 		const q2 = new Quaternion();
 		const viewport = new Vector4();
+		const helperViewport = new Vector4( domElement.offsetWidth - 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.