网站 - 动态图像放置（样机）

Question

除了开发网站外，我也是一名平面设计师。 当我处理visual identity时，我经常使用Mockups向客户展示设计情况。

  

在制造和设计中，模型或模型是设计或设备的比例尺或全尺寸模型，用于教学，演示，设计评估，促销和其他目的。

以下是一些模型的示例：

我正在努力训练自己e-commerce website，因为开发比简单的展示网站更重要。 为了改进User Experience，我想提供一种方法，如上所示interactive mockups。

我想到的是visualise a picture on a frame whitin a room的一种方式。

看起来像这样的东西：

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

问题是，基本上，我并不真正知道what to use来实时开发这种模拟（用户只需上传图片，图片就适合容器）

以下是我的想法：

• 使用简单的div制作容器，我将使用Javascript更改背景图像。有点容易做，因为图片不会跟随perspective，因为它无法满足我的需求，如图所示：

• 我的第二个想法是在3D建造房间，这会有点困难，但不会太多。但在这种情况下，我不知道如何在网络上change a 3D model texture。我认为必须有一些包和frimware。可能有jquery的东西？

• 我最终想到使用PHP GD来生成一个图像，但是我最后一次使用它时，真是太痛苦了。而且我认为它不会产生任何“持久的”纹理。

所以我的问题是what firmware/tool你们可以建议我这样做吗。在您看来best options between using a 3D model and a static Image是什么？

很抱歉很长的帖子。我希望尽可能清楚。

编辑：

也许有WebGL的东西？

Answer 1

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

Answer 2

简单的CSS transform: translateZ();就足够了，看看MDN - CSS perspective。

请注意，浏览器并非100％支持，但如果您83% is acceptable，则这是最简单的方式。