Touch on tutorial entity picking project?

Help & Support
1

Hi everyone !

I would like to ask how does it come that on this project :

https://playcanvas.com/project/362236/overview/tutorial-entity-picking

It works with mouse click and also with touch as I use the same code (raycast one) on my project :

https://playcanvas.com/editor/scene/427216

to change the color of the sofa but it works only on computer not with touch.
I tried to add this :
if (app.touch) {
app.touch.on(“touchstart”, this.onSelect, this);
}

But I think it’s not enough

Thanks in advance,

2

I am not very clear on what I would like to do.
I would like to make my raycast working on touch on object and also with click (click is already working here).

Thanks a lot,

Denis.

3

So I have a way of doing this I made myself, though I kind of use a hollow script object to help handle the event after the touch, but the script can be as follows in this link https://github.com/bit-garden/bit-garden.github.io/blob/master/lib/pc_tools/input.js

In short

      //normalize touchscreen and mouse events
      _onTouchStart: function (e) { 
        //self reference for loop
        var self = this;
        e.changedTouches.forEach(function(i) {
            self._onDown(i.x, i.y, i);
          });
        e.event.preventDefault();
      },
      _onMouseDown: function (e) {
        // respond to event
        this._onDown(e.x, e.y, e);
        e.event.preventDefault();
      },

This allows you to catch both touch and mouse, break out the x and y locations and pass the touch/mouse instance itself to the single function. From there you can treat it the same way for both, additionally checking if the id property exists to identify a touch.

PS: I started writing this for exactly the same idea. You can see this in action here https://bit-garden.github.io/playground/

1 Like
4

Thanks a lot I will look into that ! :slight_smile: