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

[gzlock]

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!')
});

[brianzinn]

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.

[gzlock]

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.

And hand.js not working.

 

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

[brianzinn]

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) });

 

[gzlock]

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.

 

 

[gzlock]

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;
};

 

[Guest]

To get PointerEvents you need to reference jQuery PEP