Three.js OrbitControls how prevent Vivaldi from changing page?

545 views Asked by At

I recently tried out Vivaldi browser on my laptop for running some self-built THREE.js apps. The app performs much faster on Vivaldi than on Opera which I normally use, or on Firefox.

I have found a problem though. When using Orbit Controls and trying to move (translate) the camera viewpoint using mouse-right-button-click + drag. This works OK in Opera and Firefox. But in Vivaldi a left or right drag sometimes causes the browser to move to the previous or next page. In the debugger I got a message "Unable to preventDefault inside passive event listener invocation."

My original addEventListener initiation code was this:-

document.addEventListener( 'touchstart', onDocumentTouchStart,false  ); 
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener  ( 'resize', onWindowResize, false );   

The relevant invocation code was/is as follows:-

//... Allows OrbitControls to do drag origin by preventing default reaction (prev/next page)
function onDocumentTouchStart( event ) {
    if ( event.touches.length === 1 ) {
        event.preventDefault();
        mouseX = event.touches[ 0 ].pageX - windowHalfX;
        mouseY = event.touches[ 0 ].pageY - windowHalfY;
    }
}
//... Allows OrbitControls to do drag origin by preventing default reaction (prev/next page)
function onDocumentTouchMove( event ) {
    if ( event.touches.length === 1 ) {
        event.preventDefault();
        mouseX = event.touches[ 0 ].pageX - windowHalfX;
        mouseY = event.touches[ 0 ].pageY - windowHalfY;
    }
}

I followed a link provided to https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and changed my initiationcode to the following:-

var passiveSupported = false;

try 
{
  var options = {
    get passive() { // This function will be called when the browser
                    //     attempts to access the passive property.
      passiveSupported = true;
    }
};

  window.addEventListener("test", options, options);
  window.removeEventListener("test", options, options);


} 
catch(err) 
{
  passiveSupported = false;
}   
//MY MODIFIED STUFF
    document.addEventListener( 'touchstart', onDocumentTouchStart, passiveSupported
                               ? { passive: true } : false);
    document.addEventListener( 'touchmove', onDocumentTouchMove, passiveSupported
                               ? { passive: true } : false);
    document.addEventListener( 'mousemove', onDocumentMouseMove, options );
    window.addEventListener  ( 'resize', onWindowResize, options ); 

Now Vivaldi reports that passiveSupported = true but the error message and the problem remain.

I'd be grateful if anyone could cast light on what is happening here as I would like to use Vivaldi but this page jumping problem makes it unusable for some of my apps.

0

There are 0 answers