Javascript Jquery三维透视图

我想对需要动态内容的楼层进行模拟。用户在浏览器中动态更改地板。但我不确定从哪里开始。下面是一个例子

原件：https://i.stack.imgur.com/j7Lep.png

结果:

只需要通过jquery更改楼层。任何帮助都将不胜感激

---

注意：我可以从html内容生成图片，如第二张图片中的地板，但这是2D。我想使用jquery将其转换为地板上的透视点。

我会将图像分割为3个单独的图像，然后将它们层叠在一起，底层是地板、背景和其他与地毯不交互的场景元素。第二层是地毯。我将使用css透视图（）使这个层倾斜，以匹配现有地毯的位置。第三层是地毯顶部的沙发和其他物品。我将尝试将高光和阴影保留为透明部分

---

地毯的背景图像可以使用

jQuery（“地毯层”）.style（“背景图像”，someUserInput）

更改，或者，如果不使用jQuery，则使用

document.getElementById（“地毯层”）.style.backgroundImage（userInput）

您是实时渲染场景还是预渲染场景？因此所有内容都在渲染之前进行渲染。中间部分（如地毯）通过模拟实时渲染。所以地毯有很多图案，用户可以改变图案的颜色。然后使用ReImg将该div渲染为图像（jpg/png），然后问题来了，在cuttes部分为该图像提供透视图。谢谢@charlesBamford。你的评论很有价值。我面临的问题是像地毯一样的切割表面的3D透视图。我试图从GIMP中得到这些点，但到目前为止什么都没有。你应该使用css透视图来倾斜地毯。不是jquery。