CN109544703A - 一种易于实现交互的数据中心Web3D模型加载方法 - Google Patents

Abstract

本发明涉及一种易于实现交互的数据中心Web3D模型加载方法。本发明首先根据一定的复用性和规律性要求设定模型规范，并按照模型规范制作模型并导出模型文件。其次通过计算公式获得模型的实际位置。然后创建模型库，按照模型规范定制模型，所有模型按照指定规则规范化存储到模型库中，将模型库存储到云端服务器上，同时创建数据库存储云端服务器中模型库的路径信息。最后根据WebGL标准加载三维模型网格对象和材质的方法，编写加载函数，实现3D数据中心的加载。本发明通过一系列规范降低了模型之间的耦合，减少了内存资源的占用，极大的提升了开发效率，使得开发人员在开发3D应用时，利用本发明所述的方法更易于实现人机交互。

Description

一种易于实现交互的数据中心Web3D模型加载方法

技术领域

本发明属于三维建模技术和WebGL技术领域，具体地说，是一种基于WebGL标准实现数据中心3D模型加载展示的方法。

背景技术

对于各种大中型的数据中心来说，通过传统方式来维护整个数据中心的设备正常运行并实时监控各种运行参数是件非常繁琐的事情。但如果通过3D方式展现和监控所有设备的运行情况，将能够为维护人员带来极大方便；这是由于3D技术能够最大程度的还原实体，通过三维界面给用户提供一种高度虚拟现实的体验，而且能直观快速地定位和还原出现问题的设备。所以，随着WebGL技术的日趋流行，加上大数据的可视化等需求日益旺盛，通过Web应用对数据中心进行管理和监控的3D可视化建设正越来越受重视。

如果要开发基于Web的3D数据中心管理平台等应用，目前有不少WebGL引擎能够提供相应的支持，比如著名的Three.js、Babylon.js等。一般来说，数据中心和相应设备的模型都是通过3DS Max等3D建模软件来制作的，然后保存成为WebGL引擎能够识别的格式(如obj)，通过引擎的加载函数进行加载。由于不同的设备可能需要分别实现展示信息、变换位置和角度、人机交互等功能，不应把整个数据中心及其包含的所有设备做成单一的3D模型进行加载。为了便于管理、维护、监控、展示个性化信息和实现独立交互，数据中心的所有设备和建筑等3D模型通常需要单独制作和分开加载。但这会带来一些问题：

1、把模型独立出来以后，整个数据中心需加载的数据量急剧上升。相对而言，把数据中心拆分为众多的3D模型，和把数据中心制作成单一的3D模型，加载到浏览器以后，其占用的内存资源大小差别可能相差一个数量级以上。

2、对于中大型的数据中心，仅机柜的数量就可能数百到数千以上，而服务器的模型数量可能达到数千甚至数万以上，如果所有模型需要一个个地制作，而且编程的时候也是一个个地加载并分别实现交互编程，这显然不现实。因此，通过软件制作的3D模型必须考虑复用性，而且编程实现过程和人机交互过程中也需要考虑复用性和规律性。解决的办法之一就是必须制定相应的模型制作规范，以满足一定的复用性和规律性要求。

3、此外，如果没有一定的规范，当把这些独立制作的3D模型加载到Web端后，还非常容易出现位置不准和比例大小不一的问题，哪怕是由同一个人来制作这些3D模型也难以避免这种情况，这会大大增加开发人员在开发过程中实现人机交互的难度。

发明内容

本发明针对现有技术的不足，提供了一种易于实现交互的数据中心Web3D模型加载方法。

本发明的基本思路为：

(1)根据一定的复用性和规律性要求设定模型规范，包括模型格式规范、模型命名规范以及模型制作规范，并按照模型规范制作模型并导出模型文件，每个模型文件分别包含obj格式的模型文件、mtl格式的材质文件以及纹理贴图文件。

(2)通过计算公式获得模型的实际位置。

(3)创建模型库，按照模型规范定制模型，所有模型按照指定规则规范化存储到模型库中，将模型库存储到云端服务器上，同时创建数据库存储云端服务器中模型库的路径信息。

(4)利用WebGL标准中加载三维模型网格对象和材质的方法，编写加载函数，实现3D数据中心的加载，使模型摆放到实际位置上。

进一步，步骤(1)中首先设定模型规范，包括模型格式规范、模型命名规范以及模型制作规范。

其中模型格式规范是规定模型文件必须由模型obj格式文件、mtl材质文件以及纹理贴图文件组成，在模型导出时选择将模型按照obj的格式导出，同时选择附带上mtl材质文件，设置文件导出路径，用以获得上述模型格式规范中不同类型指定的文件，此规范的主要目的是为了统一加载的模型格式，使得加载函数可以复用，提高了开发的效率。

模型命名规范是规定必须根据模型的类型来定义模型的命名规范，其中命名规范还需要依照用户需求来设定，所有模型必须统一按照命名规范命名，针对摆放在机柜中的设备，其命名可使用“设备类型_设备U位数_设备品牌_设备型号”的格式，此规范的目的在于提供统一的命名，方便开发人员对指定的模型实现交互，并且由于一些模型在材质上是可以共用的，通过该命名规范能够易于实现模型的复用。

模型制作规范包括场景模型制作规范、复用模型制作规范以及父子模型制作规范，其中场景模型制作规范和复用模型规范要求首先将模型区分为场景模型和复用模型，场景模型是指需要定制的模型，复用模型是指仅需改变位置便可以重复利用的模型，场景模型规范要求场景模型的中心轴位于地面中心，复用模型规范要求复用模型的中心轴位于正中心。父子模型规范要求对于所制作模型的子模型也要采用规范化制作，例如一个机柜模型拥有外框、前门、后门三个子模型，此时若构建一个机柜模型则需要在一个机柜的obj文件下构建3个子模型，这样设计的目的是为了更易于开发人员在开发过程中单独实现一个模型各个部分的交互，去除模型各个组成部分的耦合关系。

模型制作规范同时要求所有模型必须按照实物比例建模并且模型正面统一朝向X轴负方向，通过计算公式获得模型的实际位置和实际角度，此规范的主要目的是降低模型之间的冗余度，更易于开发人员实现交互功能。然后，严格执行上述设定的模型规范，使用3DMax等三维模型制作软件，制作三维模型并且按照指定规范导出。

进一步，步骤(2)基于步骤(1)的模型规范来计算模型的实际位置。指定相应参数，、包括设定1U在模型场景中的单位距离(U位间距)为常量L，同一区域两个相邻机柜的中心距离为常量I，相邻区域两个同号机柜的中心距离为常量J，机柜号i，区域号j，设备摆放的U位数k、设备所占U位数m，同时设定中心模型的坐标为(x₀,y₀,z₀)。

首先，计算场景模型的位置，由于场景模型在设计时便是以地面中心作为场景模型的轴心，所以场景模型的轴心坐标计算公式为：

场景模型轴心坐标(x,y,z)＝WebGL坐标轴世界坐标原点(0,0,0)

然后通过指定的一些参数和中心模型的初始位置坐标，可以得到复用模型中机柜模型的坐标。

(1)当同一区域的机柜按照x轴朝向排列时，计算公式如下：

①基于x轴的同一区域机柜模型坐标计算公式：

机柜模型(x_i,y₀,z₀)＝(x₀,y₀,z₀)+I×i。

②基于z轴的相邻区域机柜模型坐标计算公式：

机柜模型(x_j,y₀,z₀)＝(x₀,y₀,z₀)+J×j。

(2)当同一区域的机柜按照z轴朝向排列时，计算公式如下：

①基于z轴的同一区域机柜模型坐标计算公式：

机柜模型(x₀,y₀,z_i)＝中心模型(x₀,y₀,z₀)+I×i。

②基于x轴的相邻区域机柜模型坐标计算公式：

机柜模型(x₀,y₀,z_j)＝中心模型(x₀,y₀,z₀)+J×j。

同时，由于设备模型是位于机柜模型内部的子模型，可以根据页面分级计算出相应设备模型的坐标，假设机柜模型的坐标为(x_机,y_机,z_机)，计算公式如下：

①当设备模型位于一级页面时：

设备模型(x_机,y_k,z_机)＝机柜模型(x_机,y_机,z_机)+L×k+(m/2)。

②当设备模型位于二级页面时，此时设备模型的坐标不受机柜模型的位置影响，由用户提供设备模型x轴，z轴朝向的初始坐标，设备模型的相应位置仅在y轴上进行变换，所以设备模型的坐标计算公式为：

设备模型(x₀,y_k,z₀)＝设备模型初始坐标(x₀,y₀,z₀)+L×k+(m/2)。

然后，根据相应的结果可以在加载时把对应模型摆放到实际位置上。

进一步，步骤(3)基于步骤(1)、步骤(2)确立的模型信息，将所有模型按照使用人员提供的数据格式存储起来，然后创建模型库，将规范化的模型文件全部传入云端服务器，最后，创建数据库，将云端服务器中模型库的路径保存到数据库中，每次加载时只需要调用数据库中的路径信息，便可加载所需模型。

进一步，步骤(4)基于步骤(3)提供的模型，根据WebGL标准加载三维模型网格对象和材质的方法，编写加载函数，实现3D数据中心的加载，使模型摆放到实际位置上，避免了传统加载方式造成的模型位置混乱，使得开发人员在开发过程中更易于实现人机交互。

本发明的有益效果：本发明通过一系列规范降低了模型之间的耦合，减少了内存资源的占用，极大的提升了开发效率，使得开发人员在开发3D应用时，利用本发明所述的方法更易于实现人机交互。

附图说明

图1是总体技术方案的流程示意图；

图2是模型规范示意图；

图3是模型加载流程示意图；

图4是在谷歌浏览器中的3D数据中心展示图；

图5是机柜的三个子模型：外框、前门、后门所组成的机柜模型图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他的实施例，都属于本发明保护的范围。

如图1所示，本发明方法具体是：

(1)设定模型规范，包括模型格式规范、模型命名规范以及模型制作规范，使制作的模型能够满足一定的复用性和规律性要求。严格按照模型规范制作模型并导出模型文件，每个模型文件分别包含obj格式的模型文件、mtl格式的材质文件以及纹理贴图文件。

(2)通过计算公式获得模型的实际位置。

(3)创建模型库，按照模型规范定制模型，所有模型按照指定规则规范化存储到模型库中，将模型库存储到云端服务器上，同时创建数据库存储云端服务器中模型库的路径信息。

(4)根据WebGL标准加载三维模型网格对象和材质的方法，编写加载函数，实现3D数据中心的加载，使模型摆放到实际位置上。

(1)模型规范，见图2：步骤(1)中首先设定模型规范，包括模型格式规范、模型命名规范以及模型制作规范，其中模型格式规范是规定模型文件必须由模型obj格式文件、mtl材质文件以及纹理贴图文件组成，在模型导出时选择将模型按照obj的格式导出，同时选择附带上mtl材质文件，设置文件导出路径，用以获得上述模型格式规范中不同类型指定的文件，此规范的主要目的是为了统一加载的模型格式，使得加载函数可以复用，提高了开发的效率；模型命名规范是规定必须根据模型的类型来定义模型的命名规范，其中命名规范还需要依照用户需要来设定，所有模型必须统一按照命名规范命名，其中常用的命名规范是(设备类型_设备U位数_设备品牌_设备型号)，此规范的目的在于提供统一的命名，方便开发人员对指定的模型实现交互，并且由于一些模型在材质上是可以共用的，通过该命名规范能够易于实现模型的复用；模型制作规范包括场景模型制作规范、复用模型制作规范以及父子模型制作规范，其中场景模型制作规范和复用模型规范要求首先将模型区分为场景模型和复用模型，场景模型是指需要定制的模型，复用模型是指仅需改变位置便可以重复利用的模型，场景模型规范要求场景模型的中心轴位于地面中心，复用模型规范要求复用模型的中心轴位于正中心。父子模型规范要求对于所制作模型的子模型也要采用规范化制作，例如一个机柜模型拥有外框、前门、后门三个子模型，此时若构建一个机柜模型则需要在一个机柜的obj文件下构建3个子模型，这样设计的目的是为了更易于开发人员在开发过程中单独实现一个模型各个部分的交互，去除模型各个组成部分的耦合关系。模型制作规范同时要求所有模型必须按照实物比例建模并且模型正面统一朝向X轴负方向，通过计算公式获得模型的实际位置和实际角度，此规范的主要目的是降低模型之间的冗余度，更易于开发人员实现交互功能。然后，严格执行上述设定的模型规范，使用3DMax等三维模型制作软件，制作三维模型并且按照指定规范导出。

(2)步骤(2)基于步骤(1)的模型规范来计算模型的实际位置。指定相应参数，其中包括设定1U在模型场景中的单位距离(U位间距)为常量L，同一区域两个相邻机柜的中心距离为常量I，相邻区域两个同号机柜的中心距离为常量J，机柜号i，区域号j，设备摆放的U位数k、设备所占U位数m，同时设定中心模型的坐标为(x₀,y₀,z₀)。

首先，计算场景模型的位置，由于场景模型在设计时便是以地面中心作为场景模型的轴心，所以场景模型的轴心坐标计算公式为：

场景模型轴心坐标(x,y,z)＝WebGL坐标轴世界坐标原点(0,0,0)

然后通过指定的一些参数和中心模型的初始位置坐标，可以得到复用模型中机柜模型的坐标，

(1)当同一区域的机柜按照x轴朝向排列时，计算公式如下：

①基于x轴的同一区域机柜模型坐标计算公式：

机柜模型(x_i,y₀,z₀)＝(x₀,y₀,z₀)+I×i；

②基于z轴的相邻区域机柜模型坐标计算公式：

机柜模型(x_j,y₀,z₀)＝(x₀,y₀,z₀)+J×j；

(2)当同一区域的机柜按照z轴朝向排列时，计算公式如下：

①基于z轴的同一区域机柜模型坐标计算公式：

机柜模型(x₀,y₀,z_i)＝中心模型(x₀,y₀,z₀)+I×i；

②基于x轴的相邻区域机柜模型坐标计算公式：

机柜模型(x₀,y₀,z_j)＝中心模型(x₀,y₀,z₀)+J×j；

同时，由于设备模型是位于机柜模型内部的子模型，可以根据页面分级计算出相应设备模型的坐标，假设机柜模型的坐标为(x_机,y_机,z_机)，计算公式如下：

①当设备模型位于一级页面时：

设备模型(x_机,y_k,z_机)＝机柜模型(x_机,y_机,z_机)+L×k+(m/2)

②当设备模型位于二级页面时，此时设备模型的坐标不受机柜模型的位置影响，由用户提供设备模型x轴，z轴朝向的初始坐标，设备模型的相应位置仅在y轴上进行变换，所以设备模型的坐标计算公式为：

设备模型(x₀,y_k,z₀)＝设备模型初始坐标(x₀,y₀,z₀)+L×k+(m/2)

然后，根据相应的结果可以在加载时把对应模型摆放到实际位置上。

(3)步骤(3)基于步骤(1)、步骤(2)确立的模型信息，将所有模型按照使用人员提供的数据格式存储起来，然后创建模型库，将规范化的模型文件全部传入云端服务器，最后，创建数据库，将云端服务器中模型库的路径保存到数据库中，每次加载时只需要调用数据库中的路径信息，便可加载所需模型。

(4)步骤(4)基于步骤(3)提供的模型，根据WebGL标准加载三维模型网格对象和材质的方法，编写加载函数，实现3D数据中心的加载，使模型摆放到实际位置上，避免了传统加载方式造成的模型位置混乱，使得开发人员在开发过程中更易于实现人机交互，见图3、图4及图5，具体实施方案如下：

①创建模型数组以及模型路径，存储所有模型的名称和模型路径。

②调用WebGL中加载obj模型和mtl材质的接口mtlLoader.load()和objLoader.load()，分别实现对模型和材质的加载。

③编写函数loadObjModels(path,modelName,callback)，该函数传入三个参数(模型加载路径，模型名称，加载后回调函数)，函数内部嵌套调用mtlLoader.load()和objLoader.load()，主要功能是实现同时加载obj模型和mtl材质。

④设定函数loadModels(path,modelName,callback)，分别传入三个参数(模型加载路径，模型名称，加载后回调函数)，函数内部调用函数loadObjModels()，主要功能是实现加载模型，以及加载过程中或者加载后需要执行的操作。

⑤利用for-in循环遍历模型数组，并且循环调用loadModels()，将所有模型的路径和名称传入该函数，实现一次性渲染所有模型的功能。

综上，利用本发明更易于开发人员在开发Web应用的过程中实现人机交互，从而提高开发效率。

Claims (6)

1.一种易于实现交互的数据中心Web3D模型加载方法，其特征在于包括以下步骤：

(1)设定模型规范，包括模型格式规范、模型命名规范以及模型制作规范，按照模型规范制作模型并导出模型文件，每个模型文件分别包含obj格式的模型文件、mtl格式的材质文件以及纹理贴图文件；

(2)通过计算公式获得模型的实际位置；

(3)创建模型库，按照模型规范定制模型，所有模型按照指定规则规范化存储到模型库中，将模型库存储到云端服务器上，同时创建数据库存储云端服务器中模型库的路径信息；

(4)根据WebGL标准加载三维模型网格对象和材质，编写加载函数，实现3D数据中心的加载，使模型摆放到实际位置上。

2.根据权利要求1中所述的方法，其特征在于：

所述的模型格式规范是规定模型文件必须由obj格式的模型文件、mtl格式的材质文件以及纹理贴图文件组成，在模型导出时选择将模型按照obj的格式导出，同时选择附带上mtl材质文件，设置文件导出路径，用以获得上述模型格式规范中不同类型指定的文件；

所述的模型命名规范是规定必须根据模型的类型来定义模型的命名规范，其中命名规范还需要依照用户需求来设定，所有模型统一按照命名规范命名；

所述的模型制作规范包括场景模型制作规范、复用模型制作规范以及父子模型制作规范：

其中场景模型制作规范和复用模型规范要求首先将模型区分为场景模型和复用模型，场景模型是指需要定制的模型，复用模型是指仅需改变位置便可以重复利用的模型，场景模型规范要求场景模型的中心轴位于地面中心，复用模型规范要求复用模型的中心轴位于正中心；

父子模型规范要求对于所制作模型的子模型也要采用规范化制作。

3.根据权利要求1中所述的方法，其特征在于：

步骤(2)基于步骤(1)的模型规范来计算模型的实际位置；

指定相应参数，包括设定1U在模型场景中的单位距离(U位间距)为常量L，同一区域两个相邻机柜的中心距离为常量I，相邻区域两个同号机柜的中心距离为常量J，机柜号i，区域号j，设备摆放的U位数k、设备所占U位数m，同时设定中心模型的坐标为(x₀,y₀,z₀)；

首先，计算场景模型的位置，由于场景模型在设计时便是以地面中心作为场景模型的轴心，所以场景模型的轴心坐标计算公式为：

场景模型轴心坐标(x,y,z)＝WebGL坐标轴世界坐标原点(0,0,0)

然后通过指定的参数和中心模型的初始位置坐标，得到复用模型中机柜模型的坐标：

(1)当同一区域的机柜按照x轴朝向排列时，计算公式如下：

①基于x轴的同一区域机柜模型坐标计算公式：

机柜模型(x_i,y₀,z₀)＝(x₀,y₀,z₀)+I×i；

②基于z轴的相邻区域机柜模型坐标计算公式：

机柜模型(x_j,y₀,z₀)＝(x₀,y₀,z₀)+J×j；

(2)当同一区域的机柜按照z轴朝向排列时，计算公式如下：

①基于z轴的同一区域机柜模型坐标计算公式：

机柜模型(x₀,y₀,z_i)＝中心模型(x₀,y₀,z₀)+I×i；

②基于x轴的相邻区域机柜模型坐标计算公式：

机柜模型(x₀,y₀,z_j)＝中心模型(x₀,y₀,z₀)+J×j；

同时，由于设备模型是位于机柜模型内部的子模型，根据页面分级计算出相应设备模型的坐标，假设机柜模型的坐标为(x_机,y_机,z_机)，计算公式如下：

①当设备模型位于一级页面时：

设备模型(x_机,y_k,z_机)＝机柜模型(x_机,y_机,z_机)+L×k+(m/2)

②当设备模型位于二级页面时，此时设备模型的坐标不受机柜模型的位置影响，由用户提供设备模型x轴，z轴朝向的初始坐标，设备模型的相应位置仅在y轴上进行变换，所以设备模型的坐标计算公式为：

设备模型(x₀,y_k,z₀)＝设备模型初始坐标(x₀,y₀,z₀)+L×k+(m/2)

然后，根据相应的结果可以在加载时把对应模型摆放到实际位置上。

4.根据权利要求1中所述的方法，其特征在于：

步骤(3)基于步骤(1)、步骤(2)确立的模型信息，将所有模型按照使用人员提供的数据格式存储起来，然后创建模型库，将规范化的模型文件全部传入云端服务器，最后，创建数据库，将云端服务器中模型库的路径保存到数据库中，每次加载时只需要调用数据库中的路径信息，便可加载所需模型。

5.根据权利要求1中所述的方法，其特征在于：所述的命名规范是：设备类型_设备U位数_设备品牌_设备型号。

6.根据权利要求1中所述的方法，其特征在于：模型制作规范同时要求所有模型必须按照实物比例建模并且模型正面统一朝向X轴负方向，通过计算公式获得模型的实际位置和实际角度。