Simple Entity Click

I’m working with the examples but can’t add detect when an entity was clicked event to be triggered (using raycast).
I want to do that programmatically and not through the designer.

A simple code that I could add to the code below will be appreciated:

    var box = new pc.fw.Entity();, {
        type: "box",


This project has a couple of good examples of picking:

Thanks for the quick response.
I’ve tried to implement this in my test without luck.
I also mentioned not doing it through the designer.
This is the closest I’ve come to getting a mesh instance which according to docs has no methods and therefore I have no idea what to do with.

context.mouse = mouse;
mouse.on(pc.input.EVENT_MOUSEDOWN, function (event) {
var from = camera.getPosition();
var to =, event.y,;
var device = new pc.gfx.Device(canvas);
var picker = new pc.scene.Picker(device,1000,1000);
picker.scene = context.scene;
var selection = picker.getSelection({

The Picker can be a little bit tricky to set up. We need to streamline the interface a little.

Here is a working codepen example:

Things to watch out for:

  • You need to call picker.prepare(camera, scene) to before you call getSelection(). This renders the scene to the pick buffer. So you need to call this again if you scene changes (perhaps every frame)
  • The co-ords to getSelection need to be scaled by the picker-canvas ratio and y is inverted
  • The object selected is a mesh instance, which contains node which is the SceneGraph object. Use this to find the parent entity.

co-ords example:

    x: e.x * picker.width / canvas.clientWidth,
    y: picker.height - (e.y * picker.height / canvas.clientHeight)

Note, this isn’t using ray casting to pick. This method renders the scene to an offscreen buffer and uses that to select a mesh.

Thanks a lot for the example, I got it to work.
Maybe a little more documentation regarding coding without the designer would’ve been helpful,
Regardless you have a real good product here

Is this the best way to select entities on the screen? If so, is there a full example anywhere?

Check out FrameBuffer Picking.

The co-ords to getSelection need to be scaled by the picker-canvas ratio and y is inverted

I think the docs is too confusing:

// Get the selection at the point (10,20)
var selection = picker.getSelection({
    x: 10,
    y: 20  // this should be `picker.height - 20`, right ?


rect.y Number The bottom edge of the rectangle

Where is the bottom edge ? Why do I need to use picker.height - y ?
The getSelection api violate our intuition…

If there is a image to introduce it (at the docs page), it will be great.

This comes as inheritance from OpenGL actually having bottom-left corner as 0,0 UV coordinates.
It is a bit confusing as DirectX is actually top-left. And most environments, like web, are top-left too.

So yes, it was missed at the time, and now it perhaps can’t be changed, as it would break things, but we could create another method that would work with top-left coords.

Thanks for your reply.
As I say above, I am confusing by the document.
I think it doesn’t matter if the document introduce it clearly.

Added a ticket for it:
Good place to make a contribution as well :wink: