三维模型的展示方法和展示系统与流程

本发明涉及计算机展示技术领域，尤其涉及一种三维模型的展示方法和展示系统。

背景技术：

随着浏览器变得越来越强大，而且能够作为平台来运行复杂的图形应用。2014年10月，万维网联盟完成了html5的标准制定，因此，用于web前端的交互式三维图形应用应运而生。

但是，现有的网页三维模型展示都是基于webgl框架three.js的模型显示，而网页三维模型的显示在使用上只能在单一平台显示，不能跨平台显示，且市场上的网页三维模型浏览需要插件的才能实现，具有很大的局限性。

技术实现要素：

本发明的目的在于提供一种三维模型的展示方法和展示系统，其能够在无插件时实现三维模型跨平台展示，从而克服背景技术中的不足，提高用户体验。

为了实现上述目的，本发明提出一种三维模型的展示方法，包括：

登录三维模型的网页，其中，所述网页具有对应三维模型；

从服务器获取所述三维模型解析后的模型文件；

从所述模型文件中提取所述三维模型的资源数据；

根据所述资源数据进行渲染生成所述三维模型，并在所述网页展示所述三维模型。

优选的，在所述登录三维模型的网页的步骤之后，还包括：

初始化所述网页的页面信息。

优选的，在所述根据所述资源数据进行渲染生成所述三维模型的步骤之后，还包括：

生成所述三维模型的二维码，其中，所述二维码包括所述网页的网页地址；

共享所述二维码。

优选的，所述登录三维模型的网页的步骤，包括：

输入所述网页的网页地址；或者，

扫描所述二维码。

优选的，所述模型文件包括自定义的me文件、mt文件及index文件，所述从所述模型文件中提取所述三维模型的资源数据的步骤，包括：

通过html5解析所述自定义的index文件；

根据所述自定义的index文件索引所述自定义的me文件，提取所述三维模型的结构数据；

根据所述自定义的index文件索引所述自定义的mt文件，提取所述三维模型的材质数据。

优选的，所述根据所述资源数据进行渲染生成所述三维模型的步骤，包括：

通过webgl根据所述三维模型的结构数据和所述三维模型的材质数据进行渲染生成所述三维模型。

优选的，所述在所述网页展示所述三维模型的步骤，包括：

根据用户的交互在所述网页展示所述三维模型，其中，所述用户的交互包括鼠标事件和屏幕触控事件。

为了实现上述目的，本发明提出一种三维模型的展示系统，包括：

网页登录模块，用于登录三维模型的网页，其中，所述网页具有对应三维模型；

模型文件获取模块，用于从服务器获取所述三维模型解析后的模型文件；

资源数据提取模块，用于从所述模型文件中提取所述三维模型的资源数据；

三维模型展示模块，用于根据所述资源数据进行渲染生成所述三维模型，并在所述网页展示所述三维模型。

优选的，所述模型文件包括自定义的me文件、mt文件及index文件，所述模型文件获取模块，包括：

html5a获取子模块，用于通过html5解析所述自定义的index文件；

结构数据获取子模块，用于根据所述自定义的index文件索引所述自定义的me文件，提取所述三维模型的结构数据；

材质数据获取子模块，用于根据所述自定义的index文件索引所述自定义的mt文件，提取所述三维模型的材质数据。

优选的，所述三维模型展示模块，包括：

webgl渲染子模块，用于通过webgl根据所述三维模型的结构数据和所述三维模型的材质数据进行渲染生成所述三维模型。

与现有技术相比，本发明提供的一种三维模型的展示方法和展示系统的有益效果在于：用户端登录具有对应三维模型的网页后，从服务器获取所述三维模型解析后的模型文件，再从所述模型文件中提取所述三维模型的资源数据，最后根据所述资源数据进行渲染生成所述三维模型，并在所述网页展示所述三维模型，从而实现在无需插件的情况下的三维模型跨平台展示，提高用户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1是本发明一实施例三维模型的展示方法的步骤流程图；

图2是本发明一实施例三维模型的展示方法的步骤流程图；

图3为本发明一实施例三维模型的展示系统的模块结构示意图；

图4为本发明一实施例三维模型的展示系统的模块结构示意图。

具体实施方式

为了使本领域的人员更好地理解本发明中的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于本发明保护的范围。

通常，三维模型制作软件设计制作的三维模型只能采用该三维模型制作软件或与该三维模型制作软件相兼容的第三方软件进行展示，不能在网页上直接展示，更不能在移动设备上进行展示，三维模型制作软件包括如revit、3dmax、sketchup等。当然部分三维模型上传到服务器后，通过在电脑端安装插件后可以在网页上进行展示，但是通过安装插件的方法既复杂又存在安全问题，且大部分插件只能实现三维模型在网页上展示，并不能与用户进行交互，即不能根据用户的相应操作，实现三维模型的旋转、放大、缩小等变换。

随着移动设备的普及，人们更倾向于通过移动设备来进行办公、娱乐等信息交互。但是，目前三维模型制作软件设计制作的三维模型一般不能在移动设备展示和交互，即用户使用移动设备时，无法获取到三维模型，也无法通过相应操作，实现三维模型旋转、放大、缩小等变换，降低用户体验。

本发明实施例提供一种三维模型的展示方法，可以将三维模型制作软件和网页平台及移动平台进行关联，使得在网页平台和移动设备的用户界面中可以对三维模型制作软件设计制作的三维模型进行展示和交互，方便用户查看三维模型，并且能够根据用户的相应操作对该三维模型进行旋转、放大、缩小等变化，即能够实现三维模型跨平台交互展示，解决了现有技术中三维模型无法跨平台交互展示的问题，进而可以提高用户体验。

需要说明的是，本发明实施例中电脑端和移动设备端均统一为用户端，其中移动设备包括手机、平板等智能移动设备。

请参照图1，在本发明实施例中，本发明一实施例所述三维模型的展示方法，包括如下步骤：

s01，登录三维模型的网页，其中，所述网页具有对应三维模型；

s02，从服务器获取所述三维模型解析后的模型文件；

s03，从所述模型文件中提取所述三维模型的资源数据；

s04，根据所述资源数据进行渲染生成所述三维模型，并在所述网页展示所述三维模型。

如上述步骤s01，登录三维模型的网页，其中，所述网页具有对应三维模型；所述三维模型为用户采用三维模型制作软件设计制作的三维模型，例如采用revit软件制作的revit模型、采用3dmax软件制作的3dmax模型、采用sketchup软件制作的sketchup模型等。用户将设计制作的三维模型保存成对应的原始三维模型文件，并将所述原始三维模型文件上传至服务器中，此时服务器将具有所述三维模型的网页地址反馈给用户，用户端通过服务器反馈的网页地址登录三维模型的网页。

如上述步骤s02，从服务器获取所述三维模型解析后的模型文件；当用户将原始三维模型文件上传至服务器时，服务器会对上传的原始三维模型文件进行解析，从而生成对应的解析后的模型文件并存储在服务器中。当用户端登录三维模型的网页时，将从服务器中获取所述三维模型解析后的模型文件。所述模型文件包括自定义的me文件、mt文件及index文件。所述自定义的me文件中包含三维模型的结构数据，所述结构数据包括三维模型的顶点、法线、棱长、弧度等；所述自定义的mt文件中包含三维模型的材质数据，所述材质数据包括三维模型表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。所述自定义的index文件是网页索引文件，由索引表和主文件两部分构成。索引表是一张指示逻辑记录和物理记录之间对应关系的表。索引表中的每项称作索引项。索引项是按键或逻辑记录号顺序排列。主文件包括所述自定义的me和mt文件。

请参照图2，如上述步骤s03，从所述模型文件中提取所述三维模型的资源数据；包括如下子步骤：

s301，通过html5解析所述自定义的index文件；

s302，根据所述自定义的index文件索引所述自定义的me文件，提取所述三维模型的结构数据；

s303，根据所述自定义的index文件索引所述自定义的mt文件，提取所述三维模型的材质数据。

html5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(html)的第五次重大修改。html5有以下优点：提高可用性和改进用户的友好体验；有几个新的标签，这将有助于开发人员定义重要的内容；可以给站点带来更多的多媒体元素(视频和音频)；可以很好的替代flash和silverlight；当涉及到网站的抓取和索引的时候，对于seo很友好；可移植性好。html5提供了基于webgl的3d技术的图形组件，html5中通过渲染层canvas元素获得三维模型的资源数据。具体的，通过解析所述自定义的index文件，再根据所述自定义的index文件索引所述自定义的me文件和mt文件，进而获得所述三维模型的结构数据和材质数据，即包括三维模型的顶点、法线、棱长、弧度等以及包括三维模型表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。并将所述三维模型的资源数据存储在显存中。

显存，也被叫做帧缓存，它的作用是用来存储显卡芯片处理过或者即将提取的渲染数据。如同计算机的内存一样，显存是用来存储要处理的图形信息的部件。我们在显示屏上看到的画面是由一个个的像素点构成的，而每个像素点都以4至32甚至64位的数据来控制它的亮度和色彩，这些数据必须通过显存来保存，再交由显示芯片和cpu调配，最后把运算结果转化为图形输出到显示器上。因此，将所述三维模型的资源数据存储在显存中，可以提高后续步骤执行的速度。

如上述步骤s04，根据所述资源数据进行渲染生成所述三维模型，并在所述网页展示所述三维模型；包括如下子步骤：

通过webgl根据所述三维模型的结构数据和所述三维模型的材质数据进行渲染生成所述三维模型。

webgl是基于opengl的图形接口，利用webgl对上述存储在显存中的所述三维模型的结构数据和所述三维模型的材质数据进行渲染，最后生成所述三维模型，且生成的所述三维模型与用户采用三维模型制作软件设计制作的三维模型具有相同的结构和色彩等，从而实现三维模型跨平台展示。

本发明实施例基于html5和webgl的3d技术，用户端通过登录三维模型的网页，从服务器获取所述三维模型解析后的模型文件；再从所述模型文件中提取所述三维模型的资源数据；最后根据所述资源数据进行渲染生成所述三维模型，并在用户端登录的网页展示所述三维模型，其中，本实施例所述的用户端包括电脑端和移动设备端，从而实现三维模型跨网页平台和跨移动平台展示。

进一步地，在本实施例中，在上述三维模型的展示方法中，在所述登录三维模型的网页的步骤之后，还包括：

初始化所述网页的页面信息。

在登录三维模型的网页时，需要初始化所述网页的页面信息，以将缓存中的无关数据或可能与所述服务器解析后的模型文件相冲突的数据进行清理，从而使得获取的所述服务器解析后的模型文件更加准确和简洁。

进一步地，在本实施例中，在上述三维模型的展示方法中，在所述根据所述资源数据进行渲染生成所述三维模型的步骤之后，还包括如下步骤：

生成所述三维模型的二维码，其中，所述二维码包括所述网页的网页地址；

共享所述二维码。

二维码是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。因此，生成包含所述网页的网页地址的二维码，方便存储且有利用资源共享。通过出示或转发所述二维码，可以实现共享所述二维码。

进一步的，在上述三维模型的展示方法中，所述登录三维模型的网页的步骤，包括：

输入所述网页的网页地址；或者，

扫描所述二维码。

具体地，所述输入所述网页的网页地址，包括：在用户端的浏览器的地址栏手动输入所述网页的网页地址进行页面访问；或者，复制所述网页的网页地址，然后在用户端的浏览器的地址栏粘贴所述网页的网页地址进行页面访问。

所述扫描所述二维码，包括：用户端一般都适配有摄像头，通过摄像头扫描出示的所述二维码图片，对所述二维码进行识别，获取所述二维码中的所述网页的网页地址，再通过用户端的浏览器进行页面访问；或者，用户端保存所述二维码图片，通过识别保存的所述二维码图片中的二维码，获取所述二维码中的所述网页的网页地址，再通过用户端的浏览器进行页面访问。

本发明实施例在所述根据所述资源数据进行渲染生成所述三维模型的步骤之后，还生成所述三维模型的二维码，其中，所述二维码包括所述网页的网页地址，通过扫描和/或识别共享的所述二维码，可以获取所述网页的网页地址，并通过所述网页的网页地址访问所述网页，以提高用户体验。

进一步的，在本实施例中，在上述三维模型的展示方法中，所述在所述网页展示所述三维模型的步骤，包括：

根据用户的交互在所述网页展示所述三维模型，其中，所述用户的交互包括鼠标事件和屏幕触控事件。

具体的，通过改变相机和三维模型的位置实现三维模型的旋转、放大、缩小和平移等操作。当用户端为电脑时，通过鼠标的左键点击事件实现所述三维模型的旋转，通过鼠标的中键点击事件实现所述三维模型的平移，通过鼠标的滑轮滚动事件实现所述三维模型的放大和缩小，例如通过鼠标的滑轮向后滚动事件实现所述三维模型的放大，通过鼠标的滑轮向前滚动事件实现所述三维模型的缩小。

当用户端为移动设备时，例如触屏手机，通过单指触控屏幕事件实现所述三维模型的旋转，通过相对位置不变的双指触控屏幕事件实现所述三维模型的平移，通过相对距离变化的双指触控屏幕事件实现所述三维模型的放大和缩小，例如当双指触控屏幕时相对距离变大，所述三维模型放大；当双指触控屏幕时相对距离变小，所述三维模型缩小。

本发明实施例根据用户的交互在所述网页展示所述三维模型，以便于用户全方位了解所述三维模型的结构和色彩等信息，提高用户体验。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

请参照图3，在本发明实施例中，本发明一实施例所述三维模型的展示系统，包括如下模块：

网页登录模块100，用于登录三维模型的网页，其中，所述网页具有对应三维模型；

模型文件获取模块200，用于从服务器获取所述三维模型解析后的模型文件；

资源数据提取模块300，用于从所述模型文件中提取所述三维模型的资源数据；

三维模型展示模块400，用于根据所述资源数据进行渲染生成所述三维模型，并在所述网页展示所述三维模型。

如上述网页登录模块100，用于登录三维模型的网页，其中，所述网页具有对应三维模型；所述三维模型为用户采用三维模型制作软件设计制作的三维模型，例如采用revit软件制作的revit模型、采用3dmax软件制作的3dmax模型、采用sketchup软件制作的sketchup模型等。用户将设计制作的三维模型保存成对应的原始三维模型文件，并将所述原始三维模型文件上传至服务器中，此时服务器将具有所述三维模型的网页地址反馈给用户，用户通过服务器反馈的网页地址登录三维模型的网页。

模型文件获取模块200，用于从服务器获取所述三维模型解析后的模型文件；当用户将原始三维模型文件上传至服务器时，服务器会对上传的原始三维模型文件进行解析，从而生成对应的解析后的模型文件并存储在服务器中。当用户端登录三维模型的网页时，将从服务器中获取所述三维模型解析后的模型文件。所述模型文件包括自定义的me文件、mt文件及index文件。所述自定义的me文件中包含三维模型的结构数据，所述结构数据包括三维模型的顶点、法线、棱长、弧度等；所述自定义的mt文件中包含三维模型的材质数据，所述材质数据包括三维模型表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。所述自定义的index文件是网页索引文件，由索引表和主文件两部分构成。索引表是一张指示逻辑记录和物理记录之间对应关系的表。索引表中的每项称作索引项。索引项是按键或逻辑记录号顺序排列。主文件包括所述自定义的me和mt文件。

请参照图4，如上述资源数据提取模块300，用于从所述模型文件中提取所述三维模型的资源数据；包括如下子模块：

html5a获取子模块301，用于通过html5解析所述自定义的index文件；

结构数据获取子模块302，用于根据所述自定义的index文件索引所述自定义的me文件，提取所述三维模型的结构数据；

材质数据获取子模块303，用于根据所述自定义的index文件索引所述自定义的mt文件，提取所述三维模型的材质数据。

html5提供了基于webgl的3d技术的图形组件，html5中通过渲染层canvas元素获得三维模型的资源数据。具体的，通过解析所述自定义的index文件，再根据所述自定义的index文件索引所述自定义的me文件和mt文件，进而获得所述三维模型的结构数据和材质数据，即包括三维模型的顶点、法线、棱长、弧度等以及包括三维模型表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。并将所述三维模型的资源数据存储在显存中，可以提高运行速度。

如上述三维模型展示模块400，用于根据所述资源数据进行渲染生成所述三维模型，并在所述网页展示所述三维模型；包括如下子模块：

webgl渲染子模块，用于通过webgl根据所述三维模型的结构数据和所述三维模型的材质数据进行渲染生成所述三维模型。

webgl是基于opengl的图形接口，利用webgl对上述存储在显存中的所述三维模型的结构数据和所述三维模型的材质数据进行渲染，最后生成所述三维模型，且生成的所述三维模型与用户采用三维模型制作软件设计制作的三维模型具有相同的结构和色彩等，从而实现三维模型跨平台展示。

本发明实施例基于html5和webgl的3d技术，用户端通过网页登录模块登录三维模型的网页，通过模型文件获取模块从服务器获取所述三维模型解析后的模型文件；再通过资源数据提取模块从所述模型文件中提取所述三维模型的资源数据；最后通过三维模型展示模块根据所述资源数据进行渲染生成所述三维模型，并在用户端登录的网页展示所述三维模型，从而实现三维模型跨平台展示。

进一步地，在本实施例中，在上述三维模型的展示系统中，所述网页登录模块100，还包括：

初始化模块，用于初始化所述网页的页面信息。

在登录三维模型的网页时，需要初始化所述网页的页面信息，以将缓存中的无关数据或可能与所述服务器解析后的模型文件相冲突的数据进行清理，从而使得获取的所述服务器解析后的模型文件更加准确和简洁。

进一步地，在本实施例中，在上述三维模型的展示系统中，所述三维模型展示模块400，还包括：

二维码生成模块，用于生成所述三维模型的二维码，其中，所述二维码包括所述网页的网页地址；

二维码共享模块，用于共享所述二维码。

二维码是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。因此，生成包含所述网页的网页地址的二维码，方便存储且有利用资源共享。通过出示或转发所述二维码，可以实现共享所述二维码。

进一步的，在上述三维模型的展示系统中，所述网页登录模块，包括：

输入网址模块，用于输入所述网页的网页地址；或者，

扫码模块，用于扫描所述二维码。

具体地，所述输入网址模块，用于输入所述网页的网页地址，包括：在用户端的浏览器的地址栏手动输入所述网页的网页地址进行页面访问；或者，复制所述网页的网页地址，然后在用户端的浏览器的地址栏粘贴所述网页的网页地址进行页面访问。

所述扫码模块，用于扫描所述二维码，包括：用户端一般都适配有摄像头，通过摄像头扫描出示的所述二维码图片，对所述二维码进行识别，获取所述二维码中的所述网页的网页地址，再通过用户端的浏览器进行页面访问；或者，用户端保存所述二维码图片，通过识别保存的所述二维码图片中的二维码，获取所述二维码中的所述网页的网页地址，再通过用户端的浏览器进行页面访问。

本发明实施例所述三维模型展示模块400还包括二维码生成模块，用于生成所述三维模型的二维码，其中，所述二维码包括所述网页的网页地址，通过扫描和/或识别共享的所述二维码，可以获取所述网页的网页地址，并通过所述网页的网页地址访问所述网页，以提高用户体验。

进一步的，在本实施例中，在上述三维模型的展示系统中，所述三维模型展示模块，包括：

交互模块，用于根据用户的交互在所述网页展示所述三维模型，其中，所述用户的交互包括鼠标事件和屏幕触控事件。

具体的，通过改变相机和三维模型的位置实现三维模型的旋转、放大、缩小和平移等操作。当用户端为电脑时，通过鼠标的左键点击事件实现所述三维模型的旋转，通过鼠标的中键点击事件实现所述三维模型的平移，通过鼠标的滑轮滚动事件实现所述三维模型的放大和缩小，例如通过鼠标的滑轮向后滚动事件实现所述三维模型的放大，通过鼠标的滑轮向前滚动事件实现所述三维模型的缩小。

当用户端为移动设备时，例如触屏手机，通过单指触控屏幕事件实现所述三维模型的旋转，通过相对位置不变的双指触控屏幕事件实现所述三维模型的平移，通过相对距离变化的双指触控屏幕事件实现所述三维模型的放大和缩小，例如当双指触控屏幕时相对距离变大，所述三维模型放大；当双指触控屏幕时相对距离变小，所述三维模型缩小。

本发明实施例根据用户的交互在所述网页展示所述三维模型，以便于用户全方位了解所述三维模型的结构和色彩等信息，提高用户体验。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。