一种页面展示方法、装置、计算机设备及可读存储介质

技术领域

本发明涉及应用程序展示技术领域，尤其涉及一种页面展示方法、装置、计算机设备及可读存储介质。

背景技术

随着市场经济的发展，国内汽车的拥有量不断增加，导致汽车售后配件的需求也不断增高。但是目前在汽车配件网页中，大多采用普通的配件图片，无法对多方位查看配件细节。

因此，需要一种可以三维展示汽车配件的方法，但是，现有的三维文件显示一般需要安装特定的软件，当查看汽车配件图像时，需要调用三维软件打开，无法直接在浏览器中直接查看，尤其是需要查看多个配件时，操作十分不便。

发明内容

本发明的目的是提供一种页面展示方法、装置、计算机设备及可读存储介质，用于解决现有三维文件显示一般需要安装特定的软件，当查看汽车配件图像时，需要调用三维软件打开，操作十分不便的问题。

为实现上述目的，本发明提供一种页面展示方法，包括：

监控用户在页面上的操作，根据页面操作获得展示请求；

根据所述展示请求调取关联的目标文件；

在浏览器页面画布上，调用渲染器并根据渲染器的操作结果展示所建立的三维汽车模型。

进一步的，根据所述展示请求调取关联的目标文件，包括以下：

将所述展示请求发送至后端服务器，并通过后端服务器获取存储在IOBS平台云上的目标文件地址；

根据所述目标文件地址调取关联的目标文件。

进一步的，调用渲染器并根据渲染器的操作结果展示所建立的三维汽车模型，包括以下：

调用3D工具Three.js封装3D绘图协议Web GL展示所建立的三维汽车模型。

进一步的，所述调用3D工具Three.js封装3D绘图协议Web GL展示所建立的三维汽车模型，包括以下：

采用Three.js工具根据所述目标文件获得三维汽车模型；

采用所述Web GL绘图协议调用底层图形硬件将所述三维汽车模型通过浏览器页面展示。

进一步的，采用Three.js工具根据所述目标文件获得三维汽车模型，包括以下：

解析所述目标文件，获取汽车模型各个部件之间的包含或连接关系；

采用模型矩阵和视图矩阵对各个部件进行装配，获得初始汽车模型；

基于所述初始汽车模型采用预设光照矩阵处理获得三维汽车模型。

进一步的，所述方法还包括：

根据用户操作对所述三维汽车模型进行实时调整，获得更新后的三维汽车模型并展示在浏览器画布上。

进一步的，所述根据用户操作对所述三维汽车模型进行实时调整，获得更新后的三维汽车模型并展示在浏览器画布上，包括以下：

监控用户在页面画布上的操作，根据所述页面画布上的操作执行对应的脚本语言；

根据执行的脚本语言对建立的三维汽车模型进行调整，其中，所述调整包括旋转、平移和缩放，获得更新后的三维汽车模型并展示在浏览器画布上。

为实现上述目的，本发明还提供一种页面展示方法装置，包括：

监控模块，用于监控用户在页面上的操作，根据页面操作获得展示请求；

获取模块，根据所述展示请求调取关联的目标文件；

渲染模块，用于在浏览器页面画布上，调用渲染器并根据渲染器的操作结果展示所建立的三维汽车模型。

为实现上述目的，本发明还提供一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述页面展示方法的步骤。

为实现上述目的，本发明还提供一种计算机可读存储介质，其包括多个存储介质，各存储介质上存储有计算机程序，所述多个存储介质存储的所述计算机程序被处理器执行时共同实现上述页面展示方法的步骤。

本发明提供的页面展示方法、装置、计算机设备及可读存储介质，通过获取展示请求去调取待展示汽车模型关联的目标文件，获得目标文件后利用渲染模块调用渲染器并在浏览器页面画布上展示根据目标文件建立的三维汽车模型，实现汽车模型在浏览器画布上的三维展示，解决了现有三维文件显示一般需要安装特定的软件，当查看汽车配件图像时，需要调用三维软件打开，操作十分不便的问题。

附图说明

图1为本发明所述页面展示方法实施例一的流程图；

图2为本发明所述页面展示方法实施例一中用于根据用户选择确定需要展示的汽车配件的流程图；

图3为本发明所述页面展示方法实施例一中根据所述展示请求调取关联的目标文件的流程图；

图4为本发明所述页面展示方法实施例一中调用3D工具Three.js封装3D绘图协议Web GL展示所建立的三维汽车模型的流程图；

图5为本发明所述页面展示方法实施例一中采用3D工具Three.js根据所述目标文件获得三维汽车模型的流程图；

图6为本发明所述页面展示方法实施例一中所述方法还包括根据用户操作对所述三维汽车模型进行调整的流程图；

图7为本发明所述页面展示方法实施例一中据用户操作对所述三维汽车模型进行调整，获得更新后的三维汽车模型并展示在浏览器画布上的流程图；

图8为本发明所述页面展示方法装置实施例二的程序模块示意图；

图9为本发明计算机设备实施例三中计算机设备的硬件结构示意图。

附图标记：

4、页面展示方法装置 41、模型训练模块 42、预处理模块

43、执行模块 431、分析单元 432、提取单元

433、调整单元 5、计算机设备 51、存储器

52、处理器 53、网络接口

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在限制本发明。本文所使用的术语“及/或”包括一个或多个相关的所列项目的任意的和所有的组合。

本发明提供的页面展示方法、装置、计算机设备及可读存储介质，涉及应用程序展示技术领域，为提供一种基于监控模块、获取模块、渲染模块和调整模块的页面展示方法。本发明通过监控模块监控用户在页面上的操作，根据用户选择获得展示请求，而后采用获取模块获取展示请求中包括的与待展示汽车模型对应的唯一标识信息去调取待展示汽车模型关联的目标文件，获得目标文件后利用渲染模块调用渲染器并在浏览器页面画布上展示根据目标文件建立的三维汽车模型。通过上述方式实现汽车模型在浏览器画布上的三维展示，区别于现有的二维图片展示，解决了现有三维文件显示一般需要安装特定的软件，当查看汽车配件图像时，需要调用三维软件打开，操作十分不便的问题。

实施例一

请参阅图1，本实施例的一种页面展示方法，本方案涉及一种汽车模型页面展示方法，应用于汽车配件创配平台浏览器页面上，包括以下步骤：

S100：监控用户在页面上的操作，根据页面操作获得展示请求；

本方案用于汽车配件浏览器页面，用户可在浏览创配平台上汽车配件时点击汽车配件标签或汽车图片等预先配置的标签实现汽车配件的三维展示，用于解决现有技术中大多汽车配件网页上仅展示一幅或多幅二维图片，不支持三维展示，无法多方位查看配件细节的问题，作为说明的是，本方案中所述汽车模型包括但不限于汽车配件、组装后的区域配件甚至是整车模型。具体的，用户在页面上的操作包括但不限于点击、拖拽等。

上述步骤S100用于根据用户选择确定需要展示的汽车配件，参阅图2，具体的包括以下步骤：

S110：在所述页面上预置有多个三维汽车模型名称，且各个三维汽车模型名称的状态设置为未被选择；

在本方案中，设置汽车模型名称为预置标签在前端页面上，用于供用户选择查看对应的三维汽车模型，在具体实施场景中，也可以选择其他形式标签以便于用户点击，作为举例而非限定的，配件(即本方案中所述汽车模型)图片、标示性文字等，或者预设制定的触发方式。

S120：实时监控页面上的操作，获得被选择的三维汽车模型名称；

在上述步骤中，被选择的三维汽车模型可以不限于一个，具体的可以选择依次查看多个汽车模型，通过本方案的展示方法，无需页面跳转即可查看多个三维汽车模型，也无需再查看页面的过程中跳转到第三方软件中，减少现有的需要打开专用软件而造成使用繁琐的情况。

S130：根据所述被选择的三维汽车模型名称生成展示请求。

在本方案中，基于上述步骤，根据被选择的三维汽车模型名称可以确定需要进行展示的汽车模型，根据该汽车模型对应的唯一标识(具体的，可以是名称、编码等)生成展示请求，以便后续调取与该汽车模型的文件进行三维展示。

S200：根据所述展示请求调取关联的目标文件；

在上述方案中，上述关联的目标文件为需要进行展示的汽车模型对应的三维文件，可以通过上述步骤S130中的汽车模型对应的唯一标识来确定，需要特别说明的是，为了满足三维展示的需求，与现有技术中经常使用的二维图片(如.jpg)不同的是，该目标文件为3D.stl Source Files(即3D格式的文件)。

具体的，参阅图3，上述调取关联的目标文件具体包括以下步骤：

预先提供一用于存储多个目标文件的IOBS平台云；

在调取目标文件前，需要人工或自主完成将目标文件上传至IOBS平台云，可批量操作文件上传，当目标文件存储在IOBS平台云上即可自主生成与各个目标文件对应的文件地址，以便于后续步骤中通过获取文件地址来调取对应的目标文件。

S210：将所述展示请求发IOBS平台云送至后端服务器，并通过后端服务器获取存储在IOBS平台云上的目标文件地址；

在本方案中，在三维展示的实现过程中，需要依赖在后台服务器(Backend API)调用存储在IOBS平台云上的目标文件，因此将展示请求先发送至后台服务器后，后台服务器发出请求至IOBS平台云，而后才可从后台服务器获得返回的目标文件地址。

S220：根据所述目标文件地址调取关联的目标文件。

基于上述步骤S210可以获得目标文件在IOBS平台云上生成的地址，根据目标文件调用目标文件即可。

S300：在浏览器页面画布上，调用渲染器并根据渲染器的操作结果展示所建立的三维汽车模型。

在本方案中，采用JS Client Render作为渲染器，可动态加载图像在前端页面显示，为了适应于实际使用场景下的使用，也可采用现有其他渲染器来执行上述步骤S300中的渲染过程，作为举例的而非限定的，如使用CSS2DRenderer、SVGRenderer、CanvasRenderer等渲染器。

在本方案中，上述步骤S300包括以下具体的步骤：调用3D工具Three.js封装3D绘图协议Web GL展示所建立的三维汽车模型。

具体的，Three.js在WebGL的API接口基础上，又进行的一层封装，Three.js将API的细节抽象化，将3D场景拆解为网格、材质和光源。需要特别说明的是，实现三维展示需要Three.js工具(JS Client Render)外还需要Web GL协议。具体的，上述步骤中所述调用3D工具Three.js封装3D绘图协议Web GL展示所建立的三维汽车模型，参阅图4，包括以下步骤：

S310：采用3D工具Three.js根据所述目标文件获得三维汽车模型；

具体的，参阅图5，上述步骤S310所述采用3D工具Three.js根据所述目标文件获得三维汽车模型，包括以下：

S311：解析所述目标文件，获取汽车模型各个部件之间的包含或连接关系；

在上述步骤中，某一汽车模型(配件)可能包括一个或多个部件，需要根据部件的位置或连接关系来进行装配，生成最终三维的汽车模型，因此在生成三维模型需要解析目标文件，并解析获得各个部件的具体位置。

S312：采用模型矩阵和视图矩阵对各个部件进行装配，获得初始汽车模型；

在上述步骤中，模型矩阵用于表征一系列变换，模型矩阵和视图矩阵用于对各个部件进行定位，可以根据目标文件的解析结果自主调整，采用模型矩阵和视图矩阵主要就是对各个部件位置进行定位，进而完成装配获得完整的三维汽车模型，同时模型矩阵和视图矩阵还可用于在后续步骤S400中根据用户操作对所述三维汽车模型进行调整的过程中实现模型的平移旋转等操作。

S313：基于所述初始汽车名采用预设光照矩阵处理获得三维汽车模型。

需要说明的是，光照矩阵用于产生不同角度的阴影感，使三维汽车模型更真实清晰，该光照矩阵中的光线强度和角度为预先设置的最优参数，该最优可通过人工多次调整获得，也可通过训练模型自主计算火凤，可以预设根据汽车模型的类型进行调整。更具体的，本方案中基于Threejs技术，采用工具库中特有的多个半球光与多个平行光结合的形式，持续改善及测试，利用不同角度的色差，优选出最佳角度结果，可从各个角度实现看清模型及纹理的效果，在用户随意旋转及缩放模型的过程中，保持模型的清晰度与纹理可见性。

S320：采用所述3D绘图协议Web GL调用底层图形硬件将所述三维汽车模型通过浏览器页面展示。

如上述步骤S300所述，三维模型需要依赖协议Web GL实现前端浏览器页面的展示，通过上述步骤可实现三维汽车模型在浏览器页面中的直接展示，区别于现有技术中只能展示二维图片造成无法全方位查看细节的问题，且获取展示的方式简单易操作，在需要查看多个汽车模型时，只需要点击对应汽车模型名称标签即可自主展示，无需跳转至专业三维展示软件，且无需在打开多个汽车模型时重复跳转，提高汽车模型展示的即时性。

在调用渲染器并根据渲染器的操作结果展示所建立的三维汽车模型后，为了方便用户更准确、全方位的查看汽车模型细节，参阅图6，还包括S400：根据用户操作对所述三维汽车模型进行调整，获得更新后的三维汽车模型并展示在浏览器画布上，具体的参阅图7，包括以下步骤：

S410：监控用户在页面画布上的操作，根据所述页面画布上的操作执行对应的脚本语言；

在上述步骤中，根据用户在画布上的操作执行对三维汽车模型的调整，作为举例的，对汽车模型某个部分放大以观察局部细节等，用户对模型的调整均限于角度、比例或部件位置的调整，并不会修改原先的目标文件，因此通过执行脚本语言控制渲染过程中参数的改变，即可在用户调整后重新渲染，以展示调整后的汽车模型。

S420：根据执行的脚本语言对建立的三维汽车模型进行调整，获得更新后的三维汽车模型并展示在浏览器画布上，其中，所述调整包括但不限于旋转、平移和缩放。

在本方案中，用三维立体的展示及缩放旋转交互，区别于现有技术中仅展示普通的配件图片，使查看更加直观贴近于实际配件，呈现效果更加直观，并可以通过旋转及缩放全方位查看配件的纹理结构等细节。

本方案中通过接收到用户选择的汽车模型名称发出展示请求，依赖后端器从IOBS平台云上获取目标文件地址来调取目标文件，再通过前端调用3D工具Three.js封装3D绘图协议Web GL实现在浏览器中三维汽车模型的直接展示，区别于现有技术中仅仅展示二维图片的方式，进一步提高用户查看汽车模型的全面性，且在查看时无需调用专用的3D软件，在查看多个模型时也无需调用多次，提高了操作简便性，同时，在使用过程中，还可基于用户在页面上的操作，利用脚本语言重新渲染实现用户对三维汽车模型进行调整(包括但不限于缩放、移动、旋转等)，进一步提高用户对模型细节观察的全面，解决现有仅仅通过二维图片无法查看细节的问题。

上述目标文件也可上传至区块链以便于后续应用于其他平台上，即采用区块链代替IOBS平台云，上传至区块链可保证其安全性和对用户的公正透明性，在每一次接收到展示请求后可以通过后台服务器从区块链中下载，以便查证优先级列表是否被篡改，后续也可以从区块链中下载目标文件用于页面展示。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

实施例二：

请参阅图8，本实施例的一种页面展示方法装置5，包括：监控模块51、获取模块52以及渲染模块53。

监控模块51，用于监控用户在页面上的操作，根据页面操作获得展示请求；

获取模块52，根据所述展示请求调取关联的目标文件；

具体的，上述获取模块52还包括地址获取子模块521和调取子模块522；

地址获取子模块521，用于将所述展示请求发送至后端服务器，并通过后端服务器获取存储在IOBS平台云上的目标文件地址；

调取子模块522，用于根据所述目标文件地址调取关联的目标文件。

渲染模块53，用于在浏览器页面画布上，调用渲染器并根据渲染器的操作结果展示所建立的三维汽车模型。

具体的，上述渲染模块调用3D工具Three.js封装3D绘图协议Web GL展示所建立的三维汽车模型。

上述页面展示方法装置5还包括调整模块54，用于根据用户操作对所述三维汽车模型进行调整，所述调整包括但不限于旋转、平移和缩放。

本技术方案基于开发中应用程序展示，通过监控模块监控用户在页面上的操作(如选择页面上预置的汽车模型名称或标签等)，根据用户选择获得展示请求，而后采用获取模块获取展示请求中包括的待展示汽车模型名称或与待展示汽车模型对应的唯一标识信息去调取待展示汽车模型关联的目标文件，获得目标文件后利用渲染模块调用渲染器并在浏览器页面画布上展示根据目标文件建立的三维汽车模型。通过上述方式实现汽车模型在浏览器画布上的三维展示，区别于现有的二维图片展示，在查看多个模型时也无需调用多次，提高了操作简便性，解决了现有三维文件显示一般需要安装特定的软件，当查看汽车配件图像时，需要调用三维软件打开，操作十分不便的问题。同时，还可根据用户操作，采用调整模块基于与用户操作对应的脚本语言重新渲染，实现用户对三维汽车模型进行调整，进一步实现用户对模型细节的观察。

在本方案中，在采用获取模块获取目标文件的过程中，采用地址获取子模块将展示请求发送至后端服务端，并通过后端服务器获取存储在IOBS平台云上的目标文件地址，IOBS平台云上预先存储多个目标文件，且自主生成各个目标文件地址，目标文件为3D.stlSource Files(即3D格式的文件)，而后采用调取子模块根据所述目标文件地址调取关联的目标文件，以实现需要进行展示的汽车模型对应的三维文件的调用，进而确保汽车模型的三维展示的实现。

实施例三：

为实现上述目的，本发明还提供一种计算机设备6，该计算机设备可包括多个计算机设备，实施例二的页面展示装置5的组成部分可分散于不同的计算机设备6中，计算机设备6可以是执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。本实施例的计算机设备至少包括但不限于：可通过系统总线相互通信连接的存储器61、处理器62、网络接口63以及页面展示方法装置5，如图9所示。需要指出的是，图9仅示出了具有组件-的计算机设备，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器61至少包括一种类型的计算机可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器61可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，存储器61也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器61还可以既包括计算机设备的内部存储-；。单元也包括其外部存储设备。本实施例中，存储器51通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例一的页面展示方法装置4的程序代码等。此外，存储器51还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器52在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器52通常用于控制计算机设备的总体操作。本实施例中，处理器52用于运行存储器51中存储的程序代码或者处理数据，例如运行页面展示方法装置，以实现实施例一的页面展示方法。

所述网络接口53可包括无线网络接口或有线网络接口，该网络接口53通常用于在所述计算机设备5与其他计算机设备5之间建立通信连接。例如，所述网络接口53用于通过网络将所述计算机设备5与外部终端相连，在所述计算机设备5与外部终端之间的建立数据传输通道和通信连接等。所述网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，GSM)、宽带码分多址(WidebandCode Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图9仅示出了具有部件51-53的计算机设备5，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器51中的所述页面展示方法装置4还可以被分割为一个或者多个程序模块，所述一个或者多个程序模块被存储于存储器51中，并由一个或多个处理器(本实施例为处理器52)所执行，以完成本发明。

实施例四：

为实现上述目的，本发明还提供一种计算机可读存储介质，其包括多个存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器23执行时实现相应功能。本实施例的计算机可读存储介质用于存储页面展示装置4，被处理器23执行时实现实施例一的页面展示方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

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