Jump to content

How to use babylon in app custom webview just include touch events?


gzlock
 Share

Recommended Posts

html env: app custom webview

js env: like JavaScriptCore 

Babylon.js version: 3.1.1

That app custom webview just can use touch events, so all of the features that rely on pointer events are not working!

So, how to let the babylon.js adapt the events change?

My test results: 

canvas.addEventListener('pointerdown', () => {
	console.log('Pointer down!')
});
canvas.addEventListener('touchstart', () => {
	console.log('Touch Start!')
});

image.png.782c85be6ba96d0073e555b6d0cd82da.png

Link to comment
Share on other sites

9 hours ago, brianzinn said:

Are you using hand.js or PEP.js?  Also, what is the 'touch-action' CSS for your canvas.  I think you will find that you would want to use a polyfill instead of handling pointer events yourself.

This is a phone app of the  html5 game platform, just support custom touch events. No other input events.

image.png.665f25ca915c95f810d492a933a6c63c.png

And hand.js not working.

image.png.79208507cf94be0c23286f3b8c9db80e.png

 

btw: I posted 2 replies to the 【Report post】 button ???

Link to comment
Share on other sites

What you want is not directly supported as you have found.  There is a way to simulate a pointerDown event:
https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L1271
https://doc.babylonjs.com/classes/3.1/scene#simulatepointerdown-pickresult-rarr-scene-classes-3-1-scene-

So, probably there is better advice, but I would just simulate pointer down events if touchStart was followed by touchEnd and they were close enough together.  I'm assuming you have the x,y coordinates to use a scene.pick:
https://doc.babylonjs.com/classes/3.1/scene#pick-x-y-predicate-fastcheck-camera-rarr-nullable-lt-pickinginfo-classes-3-1-pickinginfo-gt-

edit: If you can't find the x,y share what is output by this:

canvas.addEventListener('touchstart', (evt) => { console.log('Touch Start!', evt) });

 

Link to comment
Share on other sites

  • 3 months later...
On 2018/1/1 at 1:02 AM, brianzinn said:

What you want is not directly supported as you have found.  There is a way to simulate a pointerDown event:
https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L1271
https://doc.babylonjs.com/classes/3.1/scene#simulatepointerdown-pickresult-rarr-scene-classes-3-1-scene-

So, probably there is better advice, but I would just simulate pointer down events if touchStart was followed by touchEnd and they were close enough together.  I'm assuming you have the x,y coordinates to use a scene.pick:
https://doc.babylonjs.com/classes/3.1/scene#pick-x-y-predicate-fastcheck-camera-rarr-nullable-lt-pickinginfo-classes-3-1-pickinginfo-gt-

edit: If you can't find the x,y share what is output by this:


canvas.addEventListener('touchstart', (evt) => { console.log('Touch Start!', evt) });

 

I have been doing other projects some time ago.

The custom environment does not have the PointerEvent Object, so use the scene.simulatePointerDown method throw this error.

image.png.3f3c3f0c745c88b7f55f8a9740b5f5b1.png

 

 

Link to comment
Share on other sites

On 2018/1/1 at 1:02 AM, brianzinn said:

What you want is not directly supported as you have found.  There is a way to simulate a pointerDown event:
https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L1271
https://doc.babylonjs.com/classes/3.1/scene#simulatepointerdown-pickresult-rarr-scene-classes-3-1-scene-

So, probably there is better advice, but I would just simulate pointer down events if touchStart was followed by touchEnd and they were close enough together.  I'm assuming you have the x,y coordinates to use a scene.pick:
https://doc.babylonjs.com/classes/3.1/scene#pick-x-y-predicate-fastcheck-camera-rarr-nullable-lt-pickinginfo-classes-3-1-pickinginfo-gt-

edit: If you can't find the x,y share what is output by this:


canvas.addEventListener('touchstart', (evt) => { console.log('Touch Start!', evt) });

 

My custom camera input class is referenced from ArcRotateCameraPointersInput, it can the rotation of the camera.

Now, my ArcRotateCameraTouchInput class can only control the camera rotation, can not  trigger Babylon.UI events, like Babylon.UI.Button.onPointerUpObservable.

And I know it missing this part, but i don't know how to implement at the custom environment without the PointerEvent object.

 

this._pointerInput= ()=> {}//I don't know how to implement ?
this.camera.getScene().onPointerObservable.add(this._pointerInput, BABYLON.PointerEventTypes.POINTERDOWN | BABYLON.PointerEventTypes.POINTERUP | BABYLON.PointerEventTypes.POINTERMOVE | BABYLON.PointerEventTypes._POINTERDOUBLETAP);
//My Custom Input class
module.exports = BABYLON => {
    class ArcRotateCameraTouchInput {
        constructor() {
            this.angularSensibilityX = 1000.0;
            this.angularSensibilityY = 1000.0;
            this.screenX = 0;
            this.screenY = 0;
            this.movementX = 0;
            this.movementY = 0;
            console.log('init TouchInput')
        }

        getTypeName() {
            return 'ArcRotateCameraTouchInput';
        }

        getSimpleName() {
            return 'touch';
        }

        attachControl(element, noPreventDefault) {
            // console.log('attachControl', element);
            let scene = this.camera.getScene();

            this.__touchStart = evt => {
                console.log('__touchStart');
                this.screenX = evt.touches[0].screenX;
                this.screenY = evt.touches[0].screenY;
                scene.simulatePointerDown(scene.pick(this.screenX, this.screenY))
            };

            this.__touchMove = evt => {
                this.movementX = evt.touches[0].screenX - this.screenX;
                this.movementY = evt.touches[0].screenY - this.screenY;
                this.screenX = evt.touches[0].screenX;
                this.screenY = evt.touches[0].screenY;
            };

            this.__touchEnd = evt => {
                this.movementX = 0;
                this.movementY = 0;
            };

            element.addEventListener('touchstart', this.__touchStart, false);
            element.addEventListener('touchmove', this.__touchMove, false);
            element.addEventListener('touchend', this.__touchEnd, false);
        }

        detachControl(element) {
            element.removeEventListener('touchstart');
            element.removeEventListener('touchmove');
            element.removeEventListener('touchend');
        }

        checkInputs() {
            this.camera.inertialAlphaOffset -= this.movementX / this.angularSensibilityX;
            this.camera.inertialBetaOffset -= this.movementY / this.angularSensibilityY;
        }
    }
    BABYLON.ArcRotateCameraTouchInput = ArcRotateCameraTouchInput;
    BABYLON.CameraInputTypes["ArcRotateCameraTouchInput"] = ArcRotateCameraTouchInput;
};

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...