jQuery 3D透视图答案

【问题标题】：Jquery 3D perspectivejQuery 3D透视图
【发布时间】：2020-06-22 18:13:43
【问题描述】：

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

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

结果： https://i.stack.imgur.com/zcU8d.png

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

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

【问题讨论】：

你是实时渲染场景还是预渲染？
所以一切都是之前渲染的。像地毯一样的中间部分是通过模拟实时渲染的。所以地毯有很多图案，用户可以改变图案的颜色。然后使用 ReImg 将该 div 渲染为 Image (jpg/png)，那么问题就来了，该图像在 cuttes 部分具有透视图。

标签： javascript jquery 3d transformation perspective

【解决方案1】：

我会将图像分成 3 个单独的图像，然后将它们叠加在一起，最底层是地板、背景和其他不与地毯相互作用的场景元素。第二层是地毯。我会使用 CSS 透视图 (https://developer.mozilla.org/en-US/docs/Web/CSS/perspective) 倾斜该层以匹配现有地毯的位置。第三层是地毯顶部的沙发和其他物品。我会尝试将高光和阴影保留为透明部分。

可以使用jQuery("#rug-layer").style("background-image", someUserInput) 更改地毯的背景图像，或者在没有帮助的情况下不使用jQuery，document.getElementById("rug-layer").style.backgroundImage(userInput)

【讨论】：

谢谢@charlesBamford。您的 cmets 非常有价值。我面临的问题是像地毯一样的切割表面的 3D 透视图。我试图从 GIMP 中获得这些分数，但到目前为止一无所获。
您应该使用 CSS 透视图来倾斜地毯。不是 jquery。