FilledPolygons click events not firing when another FilledPolygons element is behind it.

[conrad]

Hi, I've been using some onClick events on a FilledPolygons element for getting the location of clicks on an (invisible) layer just above the floor, which is made of a grid of Lines elements.

When I add another FilledPolygons element that is below (farther away), the onClick events stop triggering. If you click on the floor between the grid lines (with the other Filled Polygons layer below), there is no event. If you click on the invisible floor where there's a grid line behind it, then it does work...

To try to recreate this behavior in order to share it, I created this code that can go into any React component:

          <Worldview
            defaultCameraState={DEFAULT_CAMERA_STATE}
            hitmapOnMouseMove
            backgroundColor={[0.4, 0.4, 0.4, 1]}>
            <FilledPolygons>
              {[{
                pose: {
                  position: { x: 0, y: 0, z: -1 },
                  orientation: { x: 0, y: 0, z: 0, w: 1 },
                },
                scale: { x: 0.01, y: 0.01, z: 0.01 },
                color: { r: 0, g: 1, b: 0, a: 0.4 },
                points: [{ x: -10, y: -10, z: -1 }, { x: -10, y: 10, z: -1 }, { x: 10, y: 10, z: -1 }, { x: 10, y: -10, z: -1 }],
              }]}
            </FilledPolygons>
            <Lines>
              {[{
                color: { r: 1, g: 1, b: 0, a: 0.4 },
                scale: { x: 0.5 },
                pose: {
                  position: { x: 0, y: 0, z: 0 },
                  orientation: { x: 0, y: 0, z: 0, w: 1 },
                },
                points: [{ x: 5, y: 5, z: 0 }, { x: -5, y: -5, z: 0 }]
              }]}
            </Lines>
            <FilledPolygons
              onClick={() => { console.log('clicked now') }}>
              {[{
                color: { r: 1, g: 0, b: 0, a: 1 },
                scale: { x: 0.01, y: 0.01, z: 0.01 },
                points: [
                  { x: -5 / 2, y: -5 / 2, z: 0.1 },
                  { x: -5 / 2, y: 5 / 2, z: 0.1 },
                  { x: 5 / 2, y: 5 / 2, z: 0.1 },
                  { x: 5 / 2, y: -5 / 2, z: 0.1 },
                ]
              }]}
            </FilledPolygons>
            )
          }
          </Worldview>

Here, however, no click events get triggered unless you get rid of the green square FilledPolygons element.

What can I do?

Thank you!

Edit: Ugh. In the example above, I added a scale field onto the clickable element, and it started working. But this change doesn't fix the issue in my project.

[vidaaudrey]

Hi @conrad, I just tried your example, seems working for me.

 <Worldview
      defaultCameraState={{ ...DEFAULT_CAMERA_STATE, perspective: true }}
      hitmapOnMouseMove
      backgroundColor={[0.4, 0.4, 0.4, 1]}>
      <FilledPolygons
        onClick={() => {
          console.log("clicked green");
        }}>
        {[
          {
            pose: {
              position: { x: 0, y: 0, z: -1 },
              orientation: { x: 0, y: 0, z: 0, w: 1 },
            },
            scale: { x: 0.01, y: 0.01, z: 0.01 },
            color: { r: 0, g: 1, b: 0, a: 0.4 },
            points: [
              { x: -10, y: -10, z: -1 },
              { x: -10, y: 10, z: -1 },
              { x: 10, y: 10, z: -1 },
              { x: 10, y: -10, z: -1 },
            ],
          },
        ]}
      </FilledPolygons>
      <Lines
        onClick={() => {
          console.log("clicked line");
        }}>
        {[
          {
            color: { r: 1, g: 1, b: 0, a: 0.4 },
            scale: { x: 0.5 },
            pose: {
              position: { x: 0, y: 0, z: 0 },
              orientation: { x: 0, y: 0, z: 0, w: 1 },
            },
            points: [{ x: 5, y: 5, z: 0 }, { x: -5, y: -5, z: 0 }],
          },
        ]}
      </Lines>
      <FilledPolygons
        onClick={() => {
          console.log("clicked red");
        }}>
        {[
          {
         pose: {
              position: { x: 0, y: 0, z: -1 },
              orientation: { x: 0, y: 0, z: 0, w: 1 },
            },
            color: { r: 1, g: 0, b: 0, a: 1 },
            scale: { x: 0.01, y: 0.01, z: 0.01 },
            points: [
              { x: -5 / 2, y: -5 / 2, z: 0.1 },
              { x: -5 / 2, y: 5 / 2, z: 0.1 },
              { x: 5 / 2, y: 5 / 2, z: 0.1 },
              { x: 5 / 2, y: -5 / 2, z: 0.1 },
            ],
          },
        ]}
      </FilledPolygons>
      <Axes />
    </Worldview>

Maybe I'm not understanding your problem. If you are still seeing the issue, could you explain a bit more. I saw you didn't have pose for the red polygon, would be good to add it to prevent unexpected behaviors.