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

本发明专利技术提出了一种基于互联网的对商品进行3D在线设计定制及展示的方法，包括：建立产品的3D设计模型，将该3D设计模型导出为供WebGL渲染的模型格式；采用在线实时渲染技术将建立的3D设计模型在模型展示窗口中加载并显示；模型展示窗口设置有多个功能菜单栏，接收来自用户的针对功能菜单栏的操作指令，控制3D设计模型执行相应的动作；在用户操作的同时，通过3D模型的纹理实时更新技术，模型展示窗口中的模型实时显示为用户定制的图像。本发明专利技术将产品3D个性化定制建立在网页3D产品展示基础上，实现对产品进行个性化定制，用户通过对图片、文字进行随意搭配组合后，实时更新显示到3D产品模型上面去，达到所见即所得的效果。

The method of online design and customization of 3D based on the Internet

The present invention provides a method for 3D based on the Internet, online customization design and display of goods include: 3D design model of a product, the 3D design model is derived for the model format for WebGL rendering; 3D design model will be established by the online real-time rendering and display in the display window loading model model; the display window is provided with a plurality of menu bar, menu bar function for receiving instructions from the user control, 3D design model executes the corresponding action; in the operation of the user at the same time, the real texture update technology of 3D model, model display model of real-time display window for customized image. The present invention the 3D product customization based on Web 3D products based on the realization of personalized products, the user through the picture and text freely collocation combination, real-time updates to the 3D display product model to achieve the effect of wysiwyg.

【技术实现步骤摘要】
基于互联网的对商品进行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在线设计定制及展示的方法，其特征在于，包括如下步骤：步骤S1，建立产品的3D设计模型，将该3D设计模型导出为供WebGL渲染的模型格式；步骤S2，采用在线实时渲染技术将所述步骤S1中建立的3D设计模型在模型展示窗口中加载并显示；步骤S3，所述模型展示窗口设置有多个功能菜单栏，接收来自用户的针对功能菜单栏的操作指令，控制所述3D设计模型执行相应的动作；步骤S4，在用户操作的同时，通过3D模型的纹理实时更新技术，所述模型展示窗口中的模型实时显示为用户定制的图像。

【技术特征摘要】
1.一种基于互联网的对商品进行3D在线设计定制及展示的方法，其特征在于，包括如下步骤：步骤S1，建立产品的3D设计模型，将该3D设计模型导出为供WebGL渲染的模型格式；步骤S2，采用在线实时渲染技术将所述步骤S1中建立的3D设计模型在模型展示窗口中加载并显示；步骤S3，所述模型展示窗口设置有多个功能菜单栏，接收来自用户的针对功能菜单栏的操作指令，控制所述3D设计模型执行相应的动作；步骤S4，在用户操作的同时，通过3D模型的纹理实时更新技术，所述模型展示窗口中的模型实时显示为用户定制的图像。2.如权利要求1所述的基于互联网的对商品进行3D在线设计定制及展示的方法，其特征在于，在所述步骤S1中，对该产品建立对应的3D设计模型，并采用预设的个性化定制背景图片替换模型贴图。3.如权利要求1所述的基于互联网的对商品进行3D在线设计定制及展示的方法，其特征在于，在所述步骤S2中，采用WebGL+HTML5的在线实时渲染技术对3D设计模型进行加载和显示。4.如权利要求1所述的基于互联网的对商品进行3D在线设计定制及展示的方法，其特征在于，在所述步骤S4中，所述控制所述3D设计模型执行相应的动作，包括:选择3D设计模型的模型贴图、文字，对其内容、样式、颜色、大小及需要显示的位置进行调整。5....

【专利技术属性】
技术研发人员：仇伟军，王莉，仇玉东，
申请(专利权)人：五莲金汇股权投资基金合伙企业有限合伙，
类型：发明
国别省市：山东,37