Keep mouse wheel scrolling html page instead of zooming arcRotateCamera

[Vousk-prod.]

Hi all,

 

Maybe this is not a Babylon related point at all... you'll tell me.

 

My 3D canvas is located at the end of a quite long HTML page, so to reach it some kind of frenetic finger scrolling is required.

Unfortunatly, when mouse wheel is used to scroll the page, the website isn't moving a muscle, while in the canvas, far out of view, arcRotateCamera is joyfully changing its radius.

This happens in chrome and, since Babylon 1.9.0, also in Firefox (just to notice : before 1.9.0, in Firefox - sending DOMMouseScroll event instead of mousewheel - changing arcRotateCamera's radius with mouse wheel didn't work, whereas scrolling page worked).

 

How can I tell my browser to always scroll page on mouse wheel event, instead of zooming camera in the Babylon canvas ?

And also, how to make the zooming stuff only happened when canvas has the focus, and page scrolling stuff happened otherwise ?

[Vousk-prod.]

New piece of info.

By commenting 

//scene.activeCamera.attachControl(canvas);

page scrolling functionnality is back in town. But (of course) it's now impossible to move arcRotateCamera in any way.

So this is not totally what I need... but maybe then by rewriting explicitly mouse events catching ?

[Dad72]

or to temporarily deactivate the camera in order to activate later 

if( event scrool){    scene.activeCamera.detachControl(canvas); //For detach the control of the camera}else {    scene.activeCamera.attachControl(canvas);}

[Vousk-prod.]

erm... keep talking to myself while searching some hints...

 

For HTML elements, we can catch events with :

element.addEventListener(type, listener, useCapture);

I don't fully understand the useCapture parameter (http://www.w3.org/TR/DOM-Level-3-Events/#interface-EventTarget) but for what I get, maybe if Babylon.js has set useCapture to true the canvas could have caught the event before page and kept it for itself ? No ?

[Vousk-prod.]

 

or to temporarily deactivate the camera in order to activate later 

if( event scrool){    scene.activeCamera.detachControl(canvas); //For detach the control of the camera}else {    scene.activeCamera.attachControl(canvas);}

 

I've already tried with :

canvas.addEventListener("pointerenter", onPointerEnter, false);canvas.addEventListener("pointerout", onPointerLeave, false);var onPointerEnter = function(evt) { event.preventDefault(); orbitalCamera.attachControl(canvas); };var onPointerLeave = function(evt) { event.preventDefault(); orbitalCamera.detachControl(canvas); };

The code works perfectly, but the behaviour is not ok for me, because when html page reaches the canvas part, since my canvas covers full size of the viewport no scroll is possible anymore.

In fact what I really need is to keep all kind of events caught by the canvas (to be able manipulate the 3D) except for mousewheel, which only had to take care of quietly scrolling the page.

So your suggestion to detect scroll event would be the perfect solution, but for now I didn't manage to do that.

I tried this : 

canvas.addEventListener('mousewheel', onMouseWheel, false);var onMouseWheel = function(evt) { log("wheel is used"); };

But nothing logged... As if mousewheel event doesn't even exist.

I don't know why. I know that Babylon.js is using Hand.js to enable touch events, maybe some things are deactivated then, or redirected somewhere...

[Temechon]

Hello, 

 

When you zoom with the mouse wheel in Babylon, this method is called : 

this._wheel = function (event) {    var delta = 0;    if (event.wheelDelta) {        delta = event.wheelDelta / 120;    } else if (event.detail) {        delta = -event.detail / 3;    }    if (delta) that.inertialRadiusOffset += delta;    if (event.preventDefault) {        if (!noPreventDefault) {            event.preventDefault();        }    }};

You can see line 10 that the wheel event is stuck in this method, and not given away to the browser to scroll (noPreventDefault is a variable defined in babylon - set to false by default)

 

To allow the browser to scroll AND to zoom in your scene, just set this value to 'true' when the camera is attached to the canvas : 

camera.attachControl(canvas, true);

Now, you are able to scroll your page and to zoom.

 

To remove the zoom, you just have to remove the camera radius update, or better : to limit its range, like this : 

camera.lowerRadiusLimit = camera.radius;camera.upperRadiusLimit = camera.radius;

This way, the radius will be stucked to its init value.

 

 

TLDR : Just add this to your code : 

camera.attachControl(canvas, true);camera.lowerRadiusLimit = camera.radius;camera.upperRadiusLimit = camera.radius;

Hope that helps ! 

 

Cheers, 

[Vousk-prod.]

I've already added

orbitalCamera.lowerRadiusLimit =  orbitalCamera.upperRadiusLimit = orbitalCamera.radius;

to my code to "disable" zooming function.

 

The code :

camera.attachControl(canvas, true);

solved my problem !!

 

Thanks a lot.

[Vousk-prod.]

Is there a variable we can set to change the zoom factor ?

For my scene the speed is really too fast when scrolling mouse wheel.

 

Or I have to change the hardcoded value "120" in the babylon file mentionned above ?

 

 -- question moved in a new dedicated post