基于互联网的对商品进行3D在线设计定制及展示的方法与流程

本发明涉及互联网及3d设计技术领域，特别涉及一种基于互联网的对商品进行3d在线设计定制及展示的方法。

背景技术：

传统产品展示以图片、视频展示为主，平面化、缺乏交互、传播度低；用户更是被动的接受信息，参与度非常低，显而易见，这样的产品展现不仅没有吸引力，而且对产品本身的表达也非常有限。而且传统产品一直以来智能化、数字化程度不够高、生产力有待优化。

传统的个性化定制技术，采用的是2d平面图片切割，实现部分替换或叠加，定制的结果只能从一个视角展现出来，这样简单合成的定制产品图片真实感差，太过扁平化，在互联网3d时代的今天，已经远远跟不上前进的步伐。

进入互联网3d时代，如何突破现有的展示及个性化定制方式，以使得其更便捷、互动、生动，是当前需要解决的技术问题。

技术实现要素：

本发明的目的旨在至少解决所述技术缺陷之一。

为此，本发明的目的在于提出一种基于互联网的对商品进行3d在线设计定制及展示的方法。

为了实现上述目的，本发明的实施例提供一种基于互联网的对商品进行3d在线设计定制及展示的方法，包括如下步骤：

步骤s1，建立产品的3d设计模型，将该3d设计模型导出为供webgl渲染的模型格式；

步骤s2，采用在线实时渲染技术将所述步骤s1中建立的3d设计模型在模型展示窗口中加载并显示；

步骤s3，所述模型展示窗口设置有多个功能菜单栏，接收来自用户的针对功能菜单栏的操作指令，控制所述3d设计模型执行相应的动作；

步骤s4，在用户操作的同时，通过3d模型的纹理实时更新技术，所述模型展示窗口中的模型实时显示为用户定制的图像。

进一步，在所述步骤s1中，对该产品建立对应的3d设计模型，并采用预设的个性化定制背景图片替换模型贴图。

进一步，在所述步骤s2中，采用webgl+html5的在线实时渲染技术对3d设计模型进行加载和显示。

进一步，在所述步骤s4中，所述控制所述3d设计模型执行相应的动作，包括:选择3d设计模型的模型贴图、文字，对其内容、样式、颜色、大小及需要显示的位置进行调整。

进一步，当接收到用户的旋转控制指令时，所述旋转控制指令为单指在屏幕上进行上下左右轻扫滑动，控制所述3d设计模型在模型展示窗口中以720度旋转，以便所述用户观看产品设计定制的效果；

当接收到用户的缩放控制指令时，所述缩放控制指令为双指在屏幕上收拢分开，控制所述3d设计模型在模型展示窗口中缩小放大；

当接收到用户的移动控制指令时，所述移动控制指令为单指按住屏幕上进行上下左右拉动，控制所述3d设计模型在模型展示窗口中移动。

进一步，当3d设计模型为平面商品图片时，所述用户通过所述模型展示窗口对其进行在线文字和图片的编辑，设计定制；

对于定制完成的平面商品图片上，禁止他人对其进行在线文字和图片的编辑和设计定制。

进一步，对所述3d设计模型进行设计定制，包括：对该3d设计模型添加文字、静态图片、动态图片以及其他选定的3d模型。

进一步，对所述3d设计模型进行设计定制，包括：更换原3d模型的背景。

根据本发明实施例的基于互联网的对商品进行3d在线设计定制及展示的方法，将产品3d个性化定制建立在网页3d产品展示基础上，可实现对产品外包装全方位上的图片、文字进行个性化定制，用户通过对图片、文字进行随意搭配组合后，实时更新显示到3d产品模型上面去，达到所见即所得的效果，这是传统产品个性化定制无法做到的，通过将网页3d产品展示及3d个性化定制有机结合，带给用户最真实的展示和定制体验。本发明可以广泛适用于微商及app等电商平台、手机、微信进行三维在线设计定制及浏览，无需安装插件、无需下载模型、实时互动、效果逼真。

本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1为根据本发明实施例的基于互联网的对商品进行3d在线设计定制及展示的方法的流程图；

图2为根据本发明实施例的对商品进行3d在线设计定制及展示的浏览界面图；

图3为根据本发明实施例的对3d设计模型添加文字的界面图；

图4为根据本发明实施例的对3d设计模型添加图片的界面图；

图5为根据本发明实施例的对3d设计模型添加动图的界面图；

图6为根据本发明实施例的对3d设计模型添加3d元素的界面图；

图7为根据本发明实施例的对3d设计模型更换3d模型背景的界面图；

图8为根据本发明实施例的调用3d模型的界面图。

具体实施方式

下面详细描述本发明的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

本发明实施例的基于互联网的对商品进行3d在线设计定制及展示的方法，可以应用于电脑端或移动端的产品在线销售展示网页或平台上，针对每款产品在网页或平台上的展示，设计对应的3d模型，并投放到网页或平台上供查看，从而更便于用户全方位的了解该产品。

本发明实施例的基于互联网的对商品进行3d在线设计定制及展示的方法，可以应用于电脑端、手机端、平板电脑及网络电视上等。

如图1所示，本发明实施例的基于互联网的对商品进行3d在线设计定制及展示的方法，包括如下步骤：

步骤s1，建立产品的3d设计模型，将该3d设计模型导出为供webgl渲染的模型格式。

在本步骤中，采用3dmax等工具对该产品建立对应的3d设计模型，并采用预设的个性化定制背景图片替换模型贴图，然后导出为供webgl渲染的模型格式。

需要说明的是，在模型建立时，每个产品均对应一套3d设计模型。

步骤s2，采用在线实时渲染技术将步骤s1中建立的3d设计模型在模型展示窗口中加载并显示。

在本发明的一个实施例中，采用webgl+html5的在线实时渲染技术对3d设计模型进行加载和显示。

需要说明的是，本发明采用的在线实时渲染技术不限于上述webgl+html5技术，还可以采用其他方式，在此不再赘述。

步骤s3，模型展示窗口设置有多个功能菜单栏，接收来自用户的针对功能菜单栏的操作指令，控制3d设计模型执行相应的动作。

在本发明的实施例中，如图3所示，模型展示窗口上设置有“在线定制”、“我的中心”、“3d模型”、“文字”、“图片”等控件。当然，菜单控件不限于上述举例，还可以包括其他类型操作，可以根据需要进行添加，在此不再赘述。

进一步，在每个菜单控件，例如“3d模型”下，分别设置有多套备选方案设计，每套备选方案设计进一步包括多个设计图，供设计师选择。例如，在“3d模型”下提供“贺寿”、“生日”、“集团”等套备选方案。

步骤s4，在用户操作的同时，通过3d模型的纹理实时更新技术，模型展示窗口中的模型实时显示为用户定制的图像。

具体地，模型展示窗口的底部配有个性化定制菜单，可以分别选择图片(对应3d设计师做好的模型贴图)、文字(内容、样式、颜色、大小及需要显示的位置)等功能实现个性化组合。

在本步骤中，控制3d设计模型执行相应的动作，包括:选择3d设计模型的模型贴图、文字，对其内容、样式、颜色、大小及需要显示的位置进行调整。

具体地，如图2所示，当接收到用户的旋转控制指令时，旋转控制指令为单指在屏幕上进行上下左右轻扫滑动，控制3d设计模型在模型展示窗口中以720度旋转，以便用户观看产品设计定制的效果。

当接收到用户的缩放控制指令时，缩放控制指令为双指在屏幕上收拢分开，控制3d设计模型在模型展示窗口中缩小放大；

当接收到用户的移动控制指令时，移动控制指令为单指按住屏幕上进行上下左右拉动，控制3d设计模型在模型展示窗口中移动。

需要说明的是，上述旋转控制指令、缩放控制指令和移动控制指令的具体形式不限于上述动作，还可以为用户的其他形式动作，由后台进行预先设置，只要可以完成旋转、缩放、移动操作即可。

在本发明的一个实施例中，当3d设计模型为平面商品图片时，用户通过模型展示窗口对其进行在线文字和图片的编辑，设计定制。

并且，对于定制完成的平面商品图片上，禁止他人对其进行在线文字和图片的编辑和设计定制。即，已经完成的平面商品图一旦设计完成进行展示，则禁止除设计师外的其他人进行二次编辑。

在本发明的一个实施例中，对3d设计模型进行设计定制，包括：

(1)对该3d设计模型添加文字(如图3所示)、静态图片(例如，jpg、png等)(如图4所示)、动态图片(例如：gif等)(如图5所示)；

(2)对该3d设计模型调用其他选定的3d模型(如图8所示)；

(3)对该3d设计模型更换原3d模型的背景(如图7所示)；

(4)对该3d设计模型添加3d元素(如图6所示)。

在用户操作的同时，通过3d模型的纹理实时更新技术，视口中的模型便会显示为用户定制的图像，最后用户点击保存，则针对该产品的个性化定制的3d设计模型完成。

本发明提供的网页3d产品展示是一种立体的三维展示技术，以计算机网页绘图技术(webgl+html5)为基础，将实物做成3d模型，以web浏览器为载体展现3d产品对象的一种产品展现形式，立足于前沿的互联网三维显示与交互技术。

本发明在保证3d立体效果的同时，有效的降低对网络和硬件的要求，无须安装任何插件或软件，即可在多种平台(pc、手机、平板等)实时展现高品质的便捷三维数据模型，并可嵌入至任何终端，让用户通过鼠标、键盘、或者触屏操作就能实现全方位的自由观看产品的效果，可以实现如旋转、缩放等动作，让用户能够快速的体验3d产品展示带来的真实感受。

根据本发明实施例的基于互联网的对商品进行3d在线设计定制及展示的方法，将产品3d个性化定制建立在网页3d产品展示基础上，可实现对产品外包装全方位上的图片、文字进行个性化定制，用户通过对图片、文字进行随意搭配组合后，实时更新显示到3d产品模型上面去，达到所见即所得的效果，这是传统产品个性化定制无法做到的，通过将网页3d产品展示及3d个性化定制有机结合，带给用户最真实的展示和定制体验。本发明可以广泛适用于微商及app等电商平台、手机、微信进行三维在线设计定制及浏览，无需安装插件、无需下载模型、实时互动、效果逼真。

本发明实施例的基于互联网的对商品进行3d在线设计定制及展示的方法，具有以下有益效果：

1.实时预览模型

与传统技术相比，极大地减少了顾客的等待时间。

2.全平台适用

对顾客的硬件无特殊要求，适用于pc、mac、android、ios等所有设备。

3.高保真效果

强大的软件建模及自动贴图技术使得高保真、高质量的商品模型得以在互联网中展示，尤其是在移动互联网终端更能彰显它的优势。

4.流畅操作

放大、移动、旋转模型，场景切换无延迟，流畅互动。

5.电商/微信/app/h5/官网/二维码全支持。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在不脱离本发明的原理和宗旨的情况下在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。本发明的范围由所附权利要求及其等同限定。