javascript - 网站 - 动态图像放置(模型)

Question

除了开发网站，我还是一名平面设计师。当我处理视觉识别 时，我经常使用Mockups 向我的客户展示情境中的设计。

In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes.

以下是模型外观的一些示例:

我目前正在一个电子商务网站上工作，只是为了训练自己，因为开发比一个简单的展示网站要重得多。为了改善用户体验，我想包括一种执行交互式模型的方法，如上所示。

我想到的是一种在房间的框架上可视化图片的方法。

看起来像这样的东西:

这可以为每个墙和框架定制，就像那样(只是一个丑陋的例子):

问题是，基本上，我真的不知道用什么来实时开发这种模拟(用户只需上传图片，图片就会适合容器)

这是我已经想到的:

• 使用简单的 div 制作容器，其中我将使用 Javascript 更改背景图像。有点容易做，但它不会满足我的需求，因为图片不会遵循 perspective，如图所示:

• 我的第二个想法是在 3D 中制作房间，这会有点难，但不会太多。但在这种情况下，我不知道如何在网络上更改 3D 模型纹理。我假设必须有一些包和固件。也许是 jquery 的东西？

• 我最终想到了使用 PHP GD 来生成图像，但最后一次使用它时，它是如此的痛苦。而且我认为它不会产生任何“类似透视”的纹理。

所以我的问题是什么固件/工具你们能建议我这样做吗？在您看来，最佳选择是什么在使用 3D 模型和静态图像之间？

很抱歉发了这么长的帖子。我想尽可能清楚。

编辑:

也许是 WebGL 的东西？

Answer 1

您可能正在寻找 three.js。它是一个用于渲染 3d 对象的 WebGL 库。对于您所展示的内容，您可以从平面和盒子等基元开始，然后使用图像或颜色更改它们的纹理。一旦需要在元素中导入对象，就可以轻松导出它们。