diff --git a/examples/jsm/helpers/ViewHelper.js b/examples/jsm/helpers/ViewHelper.js index 5194c974799c92..dbacd190d33369 100644 --- a/examples/jsm/helpers/ViewHelper.js +++ b/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,10 +144,8 @@ 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(); @@ -155,17 +153,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 +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;