2

除了开发网站,我也是一名平面设计师。当我在工作时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上网。我认为必须有一些软件包和固件。有什么jquery,也许?

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

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

对不起,很长的帖子。我想尽可能清楚。

编辑 :

也许有什么WebGL

4

2 回答 2

2

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

于 2017-09-20T13:08:52.710 回答
1

简单的 CSStransform: translateZ();就足够了,看看MDN-CSS 透视图

请注意,浏览器并非 100% 支持,但如果您可以接受 83%,那么这是最简单的方法。

于 2017-09-20T13:43:04.813 回答