How to get surface position from 3D objects in 2D space

Question

I am working on simple drag and drop game with JavaScript and PixiJS. The game itself is 2D, but I have some pseudo-3D objects (I guess isometric) and I am trying to get the position of those objects.

My question is if there is any mathematical equation or algorithm to solve my problem:

I have some fruit objects, and the user should put those objects in the basket I have below, but only in the yellow surface like below in the picture. Currently, I am using the code below to check if the object is inside the basket or not, but this checks the entire texture and not the yellow surface!

isInside() 
{
    if (this.object.x > basket.x1 && this.object.x <= basket.x2 &&
        this.object.y > basket.y1 && this.object.y <= basket.y2) 
    {
        return true;
    }
    else 
    {
        return false;
    }
}

Which algorithm can I use to check only the yellow surface?

Answer 1

Usually, you would specify a shape or mask that would serve as that object's "physical area", so to speak, with which the other objects in the world can interact.

I haven't used Pixi.js, but it seems to me like that concept is realised by the hitArea property of an InteractiveTarget (see sources). It should be enough to set a polygon of the proper shape as the hitArea for the fruit basket object.