How to prevent page scrolling while manipulating webgl by touch events

[Vousk-prod.]

Hello you,

When my WebGL canvas is in the middle of a long HTML page, the touch events which rotate the camera also scroll the HTML page.

I know the CSS command "touch-action: non" applied on canvas should prevent this behaviour, but this line has no effect in the mobile browsers I tested (android default browser, Firefox, Chrome beta).

 

Do you know how to prevent the page from scrolling when user touches the canvas (but still rotating the camera) ?

[ericjbasti]

You'll want to look into using this event.preventDefault() on your touch events. This will cancel the default behavior. https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

[Dad72]

body

{

    position:fixed;

}

 

 

can solve your problem.

[GameMonetize]

If you are using Hand.js, it will preventDefault for you freely

[Vousk-prod.]

I'm currently using Hand.js, but since event handling is done inside babylon.js I don't know how to preventDefault behaviour.

Do you have an example I can follow ?

[gwenael]

I expect that you remember the answer you posted http://www.html5gamedevs.com/topic/5023-problem-with-webgl-compatibility-check-and-touch-events-capture/?p=34315 . Otherwise I don't have an answer for you, sorry.

[Vousk-prod.]

Yes, I remember my answer

But I don't get the link beetween both topic :\

[gwenael]

It was just to be sure that you called hand.js before calling babylon.js and not the opposite way.

[Vousk-prod.]

Up, please.

 

Knowing that I'm using a standard ArcRotateCamera and my code to attach control is simply :

orbitalCamera.attachControl(canvas, true);

(true option is to be able to scroll the website with the mousewheel)

 

how can I use preventDefault method to prevent web page scrolling while manipulating something in the canvas, but still maintaining the ability to scroll the web page when user swipes his finger outside the canvas ?

(for now, when user rotates the camera with touch events, the whole web page is scrolling up and down at the same time, not very convenient...)

 

Can I do this simply there, or do I need to change some code in ArcRotateCamera or somewhere else ?

[GameMonetize]

you then use orbitalCamera.attachControl(canvas, false);

 

false means that the canvas won't transmit to window events handle by the camera but only INSIDE the canvas

[Vousk-prod.]

Ok, thanks for your quick answer.

My problem is that if I put false the page scrolling is not possible anymore with the mouse wheel, even when the mouse is outside the canvas...

[GameMonetize]

arg.. I see this is because the wheel is attached on the window

 

I'll fix that for the next version but right now you can just edit arcrotatecamera.js and change the addEventListener from window to canvas

[Vousk-prod.]

Great ! Thank you.

If I modify something in arcRotateCamera, I then just have to include the modified .js file right after including babylon.js to have the changes taken in account ?

[GameMonetize]

Yes

[Vousk-prod.]

Sorry, I'm pretty new to html5 and javascript concepts, I'm certainly missing some obvious things but when I do :

<script src="hand.minified-1.3.4.js"></script><script src="babylon.1.10.0.js"></script><script src="babylon.arcRotateCamera.js"></script>

var engine = new BABYLON.Engine(canvas, true);(...)BABYLON.SceneLoader.Load(objectPath, babylonObjectName, engine, function (scene) {scene.executeWhenReady( function () {(...)   var orbitalCamera = new BABYLON.ArcRotateCamera("CameraOrbit", (Math.PI * cam_startRoll / 180), (Math.PI * cam_startPitch / 180), 8, targetCam, scene);   orbitalCamera.attachControl(canvas, false);

I get :

 

TypeError: this.getEngine is not a function - babylon.arcRotateCamera.js:83

 

Concerned lines in arcRotateCamera :

ArcRotateCamera.prototype.attachControl = function (element, noPreventDefault) {            var _this = this;            var previousPosition;            var pointerId;            if (this._attachedElement) {                return;            }            this._attachedElement = element;line 83     var engine = this.getEngine();(...)

What is the problem ?

[GameMonetize]

I can suggest you to create a arcRorateCamera2 to get rid of this problem 

[Vousk-prod.]

I tried to do what you suggest :

 

I replaced each occurrence of ArcRotateCamera by ArcRotateCamera2 in a babylon.arcRotateCamera2.js.

I included this new file in HTML and instanciated my orbital camera with new BABYLON.ArcRotateCamera2(...)

 

but exact same error in console...

 

It would be interesting for me to manage to solve this (for my own understanding of javascript behaviours), but I have many other things to do so for now I think I will simply wait for the next babylon release containing your fix.

[GameMonetize]

Could you link me a site with you code on it? I will find out what is going wrong

[Vousk-prod.]

I'm now using BJS 1.11, where wheel event is attached to element and not to window anymore in arcRotateCamera, but there still are problems

 

Little recap :

•  orbitalCamera.attachControl(canvas, false);

- on PC : interactions inside canvas are correct (we can rotate with mouse drag and zoom with mouse wheel) but mouse wheel does not scroll html page (neither inside nor outside canvas) and wheel outside canvas also zoom the camera

- on touch devices : everything is ok, we can scroll html page with swipes outside the canvas and rotate camera with swipes inside the canvas (without scrolling html page)

 

( test scene with attachControl set to false )

 

•  orbitalCamera.attachControl(canvas, true);

- on PC : interactions inside canvas are correct (we can rotate with mouse drag and zoom with mouse wheel) and mouse wheel outside canvas scrolls the html page, but mouse wheel outside canvas also zoom the camera

- on touch devices : swipes outside canvas scroll the html page, swipes inside canvas also scroll html page and rotate camera on randomly wrong axes (in fact, on vertical swipes sometimes the way the camera rotates is ok, sometimes it's inverted, and on horizontal swipes it seems that there is a conflict as if the camera wanted to turn simultaneously both ways, resulting in not rolling the scene at all or very little, in one or other way randomly)

 

( test scene with attachControl set to true)

[Vousk-prod.]

(I know that to prevent zooming I can specifiy camera's lower and upper radius limits, but I need to be able to zoom inside canvas, and also this wouldn't fix the fact that swipes to rotate camera on touch devices also scroll html page)

[GameMonetize]

did you try with babylonjs 1.12beta?

[Vousk-prod.]

I've just tried... and guess what... it WORKS !!!!!

Many thanks, you're the best !

[Thierry Mil]

On 01/05/2014 at 2:36 AM, Deltakosh said:

you then use orbitalCamera.attachControl(canvas, false);

--> I add this Problem with my UniversalCamera : The arrows keys moved both:

- the 3D Camera forward in my 3D scene (in may 3D canvs)  (good)

- But also the html panel up and down, thus the 3D-canves moved up ans down (bad).

 

And,as you said I changed this line :

  orbitalCamera.attachControl(canvas, true);

to

orbitalCamera.attachControl(canvas,

On 01/05/2014 at 2:36 AM, Deltakosh said:

you then use orbitalCamera.attachControl(canvas, false);

 

false means that the canvas won't transmit to window events handle by the camera but only INSIDE the canvas

);

 

And now When I have the focus on my 3D-canvas, the arrows keys does not move the panel html-up or down anymore.

This is wonderfull !

Tanks for the tip !

 

 

T

On 01/05/2014 at 2:36 AM, Deltakosh said:

 

 

 

 

false means that the canvas won't transmit to window events handle by the camera but only INSIDE the canvas