Distort plane geometry (like css matrix3d)


I am looking for a way to distort a PlaneGeometry object - much like you can using the CSS matrix3d function.

I am hoping to achieve something like this image where the blue areas are PlaneGeometry objects:

I’ve looked at using a basic Geometry object but it seems I have to manually insert every vertex. Ideally I’d like to set the 4 corners of each plane and have the vertices calculated automatically. Like this: http://edankwan.github.io/PerspectiveTransform.js/

Can anyone point me in the right direction?