Jquery 3D perspective

Question

I want to make a simulation for a floor which requires dynamic contents. The floor is changed dynamically in a browser by a user. But i am not sure from where to start. following is an example.

Original:https://i.stack.imgur.com/j7Lep.png

Result: https://i.stack.imgur.com/zcU8d.png

Only need to change the floor via jquery. Any help would be appreciated.

NOTE: I can generate pictures from html content like the floor in the second picture but that is in 2D. i want to use jquery to transform it to the perspective points on the floor.

Answer 1

I would split the image into 3 separate images, then layer them on top of each other, the bottom layer would be the floor, the background, and other scene elements that don't interact with the rugs. The second layer is the carpet. I would skew this layer using css perspective ( https://developer.mozilla.org/en-US/docs/Web/CSS/perspective ) to match the position of the existing rug. The third layer would be the couches and other objects on top of the rug. I would attempt to preserve highlights and shadows as transparent sections.

The background image of the rug could be changed using jQuery("#rug-layer").style("background-image", someUserInput) or, to not use jQuery where it isn't helpful, document.getElementById("rug-layer").style.backgroundImage(userInput)