[SOLVED] Picking 3D/2D Screens/UI elements?

Any ideas how to pick these without adding collision/rigidbody? frame buffer picker doesn’t do either

Hi @Newbie_Coder,

Do you mean just knowing when element components are clicked on? If so, assuming that the ElementComponent’s useInput property is set to true, you can just subscribe to the mousedown, mouseup, or click events to tell when they have been clicked on. This works for both 2D and 3D screens. It might look something like this:

this.entity.element.on('click', function() {

  console.log(`${this.entity.name} has been clicked!`);

}, this);

I hope this is helpful.

Hey, thanks for reply but I meant picking in 3d space, like using raycast/frame buffer to pick entities with collision/rigidbody component, but instead pick text/image other elements without adding these components

Hi @Newbie_Coder,

I suppose i should get an understand of what you use-case is. The built-in events of the ElementComponent are probably the easiest way to tell if an element is being clicked on as it’s individualized to each object.

https://developer.playcanvas.com/en/tutorials/entity-picking/

Taking a look at the entity picking tutorial, it seems like it focuses on objects being clicked on by a mouse. Were you planning to pick them using a different input method?

Figured it out

    var selected = picker.getSelection({
        x: Math.floor(event.x * (picker.width / canvasWidth)), 
        y: picker.height - Math.floor(event.y * (picker.height / canvasHeight))
    });


    if (selected.length > 0) {
            if (selected[0].name && selected[0].name.includes("Text Element")) {
                //Text element entity
                console.log(selected[0].node._parent);
            } else {
                //Non text entity
                console.log(selected[0].node);
            }
    }