3D可视化工程集成方法、装置、计算机设备及存储介质与流程

3d可视化工程集成方法、装置、计算机设备及存储介质
技术领域
1.本发明涉及3d可视化工程，更具体地说是指3d可视化工程集成方法、装置、计算机设备及存储介质。


背景技术：

2.一般的3d可视化工程集成技术通过都是直接写在前端的工程文件中，在定位bug时不够精准，有些莫名其妙的报错定位不方便，代码的整体臃肿还可能导致质量不高。
3.由于3d可视化工程的代码模块很多，工程代码量也很大，注入到前端工程会造成整体工程代码的臃肿，同时代码质量也不高，现有的解决方式是在前端工程里面安装3d工程打包文件依赖，但是安装的3d工程打包文件依赖是属于原生的代码，配置参数和项目所需的一些功能并不支持，并且3d工程业务和功能实现部分还是可能会混入到前端工程中，并不能做到前端代码与3d工程代码分离且在实际项目中又能集成3d功能代码，现有的方案维护并不方便，且无法进行二次开发。
4.因此，有必要设计一种新的方法，实现前端工程代码与3d工程代码分离，以解决代码耦合问题，一套3d工程代码的维护可以供多个项目使用，维护成本低，扩展强。


技术实现要素：

5.本发明的目的在于克服现有技术的缺陷，提供3d可视化工程集成方法、装置、计算机设备及存储介质。
6.为实现上述目的，本发明采用以下技术方案：3d可视化工程集成方法，包括：
7.开发3d可视化工程；
8.模拟所述3d可视化工程的api调用，并进行ap i调用测试和处理，以得到3d工程打包文件；
9.利用所述3d可视化工程将所述3d工程打包文件嵌入至前端工程中；
10.利用前端工程中调用浏览器的程序接口获取待显示3d画面的html元素；
11.利用前端工程调用所述3d工程打包文件并发送配置请求；
12.利用所述3d工程打包文件结合所述配置请求进行3d渲染，以得到渲染结果；
13.将所述渲染结果发送至浏览器，以由浏览器对所述渲染结果进行处理，以显示3d画面；
14.通过所述3d工程打包文件获取来自浏览器的html元素的各种交互操作；
15.利用所述3d工程打包文件进行api调用，并执行所调用的api对应的功能表格，以得到新渲染结果；
16.反馈所述新渲染结果至浏览器，以供浏览器刷新所述3d画面。
17.其进一步技术方案为：所述模拟所述3d可视化工程的api调用，并进行api调用测试和处理，以得到3d工程打包文件，包括：
18.在所述3d可视化工程中模拟前端工程与所述3d可视化工程联调调用api测试，以
得到输出结果；
19.通过webpack打包所述输出结果，以得到3d工程打包文件。
20.其进一步技术方案为：所述利用所述3d可视化工程将所述3d工程打包文件嵌入至前端工程中，包括：
21.将所述3d可视化工程通过es6的import方法嵌入到前端工程中。
22.其进一步技术方案为：所述html元素包括承载3d画面的d i v元素。
23.其进一步技术方案为：所述利用前端工程调用所述3d工程打包文件并发送配置请求，包括：
24.利用前端工程调用所述3d工程打包文件，且由前端工程将配置参数以object形式传入到所述3d工程打包文件中。
25.其进一步技术方案为：所述利用所述3d工程打包文件结合所述配置请求进行3d渲染，以得到渲染结果，包括：
26.利用所述3d工程打包文件根据所述配置请求解析对应模块的资源；
27.利用所述3d工程打包文件中的基础场景创建一个canvas元素，注入到html元素中；
28.利用所述3d工程打包文件根据调用对应模块注入主线程中进行3d渲染，以得到渲染结果。
29.其进一步技术方案为：所述将所述渲染结果发送至浏览器，以由浏览器对所述渲染结果进行处理，以显示3d画面，包括：
30.将所述渲染结果发送至浏览器，以由浏览器通过与javascript绑定的内核解析所述渲染结果，且将解析的结果通过算法进行坐标转换，并将转换结果映射到对应的html区域，以呈现出3d画面。
31.本发明还提供了3d可视化工程集成装置，包括：
32.开发单元，用于开发3d可视化工程；
33.模拟单元，用于模拟所述3d可视化工程的api调用，并进行api调用测试和处理，以得到3d工程打包文件；
34.嵌入单元，用于利用所述3d可视化工程将所述3d工程打包文件嵌入至前端工程中；
35.元素获取单元，用于利用前端工程中调用浏览器的程序接口获取待显示3d画面的html元素；
36.请求发送单元，用于利用前端工程调用所述3d工程打包文件并发送配置请求；
37.3d渲染单元，用于利用所述3d工程打包文件结合所述配置请求进行3d渲染，以得到渲染结果；
38.结果发送单元，用于将所述渲染结果发送至浏览器，以由浏览器对所述渲染结果进行处理，以显示3d画面；
39.操作获取单元，用于通过所述3d工程打包文件获取来自浏览器的html元素的各种交互操作；
40.新渲染单元，用于利用所述3d工程打包文件进行api调用，并执行所调用的api对应的功能表格，以得到新渲染结果；
41.结果反馈单元，用于反馈所述新渲染结果至浏览器，以供浏览器刷新所述3d画面。
42.本发明还提供了一种计算机设备，所述计算机设备包括存储器及处理器，所述存储器上存储有计算机程序，所述处理器执行所述计算机程序时实现上述的方法。
43.本发明还提供了一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时可实现上述的方法。
44.本发明与现有技术相比的有益效果是：本发明通过开发3d可视化工程，并结合对api的调用模拟，将得到的3d工程打包文件嵌入到前端工程汇中，实现前端工程代码与3d工程代码分离，以解决代码耦合问题，在进行项目使用时，通过需要显示的3d画面的html元素，结合3d工程打包文件进行3d渲染，结合获取的交互操作，调用api，并进行新渲染，以实现一套3d工程代码的维护可以供多个项目使用，维护成本低，扩展强。
45.下面结合附图和具体实施例对本发明作进一步描述。
附图说明
46.为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
47.图1为本发明实施例提供的3d可视化工程集成方法的应用场景示意图；
48.图2为本发明实施例提供的3d可视化工程集成方法的流程示意图；
49.图3为本发明实施例提供的3d可视化工程集成方法的子流程示意图；
50.图4为本发明实施例提供的3d可视化工程集成方法的子流程示意图；
51.图5为本发明实施例提供的坐标转换的示意图；
52.图6为本发明实施例提供的3d可视化工程集成装置300的示意性框图；
53.图7为本发明实施例提供的3d可视化工程集成装置300的模拟单元302的示意性框图；
54.图8为本发明实施例提供的3d可视化工程集成装置300的3d渲染单元306的示意性框图；
55.图9为本发明实施例提供的计算机设备的示意性框图。
具体实施方式
56.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
57.应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
58.还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
59.还应当进一步理解，在本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
60.请参阅图1和图2，图1为本发明实施例提供的3d可视化工程集成方法的应用场景示意图。图2为本发明实施例提供的3d可视化工程集成方法的示意性流程图。该3d可视化工程集成方法应用于服务器中。该服务器与带有浏览器的终端进行数据交互，通过服务器进行3d可视化工程的开发，并将3d可视化工程与前端工程分离，在需要进行3d渲染时，将3d可视化工程嵌入至前端工程内，3d工程打包文件作为脚本注入，体积更轻，模块污染更少，也不会再影响其他模块，配置参数的使用可以快速开发3d工程；3d工程打包文件的不断迭代，可以扩展出更多的功能；一套3d工程代码的维护可以供多个项目使用，维护成本低，扩展强。
61.图2是本发明实施例提供的3d可视化工程集成方法的流程示意图。如图2所示，该方法包括以下步骤s110至s200。
62.s110、开发3d可视化工程。
63.在本实施例中，3d工程在本地独立开发并完成功能扩展；本实施例的3d可视化工程基于threejs3d扩展库为例，开发3d可视化工程属于现有技术，此处不再赘述。
64.s120、模拟所述3d可视化工程的api调用，并进行api调用测试和处理，以得到3d工程打包文件。
65.在本实施例中，3d工程打包文件是指api调用测试输出压缩的xx.js文件通过webpack打包形成的文件。
66.在一实施例中，请参阅图3，上述的步骤s120可包括步骤s121～s122。
67.s121、在所述3d可视化工程中模拟前端工程与所述3d可视化工程联调调用api测试，以得到输出结果。
68.在本实施例中，输出结果是指api测试后输出的文件。
69.具体地，基于开发好的3d可视化工程中模拟前端工程与3d可视化工程联调调用api测试，此处需要与使用api的开发者协商一致每个api的名字与参数；api数量大于1个，api数量根据实际项目交互和功能决定。
70.s122、通过webpack打包所述输出结果，以得到3d工程打包文件。
71.在本实施例中，3d可视化工程联调完成后通过webpack打包输出压缩的xx.js文件，压缩的xx.js文件则是进行api调用测试后输出的结果。
72.在本实施例中，服务器内需配置一套webpack。
73.s130、利用所述3d可视化工程将所述3d工程打包文件嵌入至前端工程中。
74.在本实施例中，将所述3d可视化工程通过es6的import方法嵌入到前端工程中。将所述3d工程打包文件通过es6语法import外链集成到前端工程文件中，不会与前端程序造成代码耦合。
75.s140、利用前端工程中调用浏览器的程序接口获取待显示3d画面的html(超文本标记语言，hypertextmarkup language，)元素。
76.在本实施例中，所述html元素包括承载3d画面的div元素。
77.具体地，前端工程中调用web网页浏览器的程序接口获取要显示3d画面的html元素；3d可视化工程中模拟的html元素为1个，即为承载3d画面的div元素，html元素的属性包
括html元素的id、高度、宽度、定位信息；因此，需要配置一套参数；前端工程中配置参数对象1个，对象的属性包括continueid、render、cameras、controls、lights、models、background，最小配置参数可以只有continueid，即为承载3d画面的div元素的id。
78.s150、利用前端工程调用所述3d工程打包文件并发送配置请求。
79.在本实施例中，配置请求是指前端工程中调用3d工程打包文件并传入相关配置后形成的请求。
80.具体地，利用前端工程调用所述3d工程打包文件，且由前端工程将配置参数以object形式传入到所述3d工程打包文件中。
81.s160、利用所述3d工程打包文件结合所述配置请求进行3d渲染，以得到渲染结果。
82.在本实施例中，渲染结果是指3d渲染的结果。
83.在一实施例中，请参阅图4，上述的步骤s160可包括步骤s161～s163。
84.s161、利用所述3d工程打包文件根据所述配置请求解析对应模块的资源。
85.具体地，3d工程打包文件根据配置请求并解析相关模块的资源，包括获取textureloader、materialloader、gltfloader等。
86.s162、利用所述3d工程打包文件中的基础场景创建一个canvas元素，注入到html元素中。
87.具体地，3d工程打包文件中的基础场景创建完成返回一个canvas元素注入到html中，3d画面在canvas画布上绘制,3d渲染一旦完成，canvas画布上会同步3d画面，这个过程主要是绑定3d画面与浏览器中html元素的关系。
88.3d工程打包文件中的基础场景创建完成返回一个canvas元素注入到html中，canvas元素的宽高与传入的div元素的宽高一致。
89.s163、利用所述3d工程打包文件根据调用对应模块注入主线程中进行3d渲染，以得到渲染结果。
90.具体地，3d工程打包文件根据配置调用相关模块注入主线程中渲染，先是根据配置创建基础场景scene，在创建lights、cameras、render、controls，具体地，包括相机、渲染器、灯光、背景、模型、控制器、事件等模块的配置，也就是需要解析这些模块的资源；其中scene的主要作用的相当于一个空的房间，用来承载物体；灯光相当于现实生活中的阳光，没有阳光，这个世界就是黑色的；相机就相当于一个人的眼睛，可以看到这个世界，没有相机，相当于一个人是一个瞎子，这个世界也是黑色的；render主要的作用的基于创建的这些元素把他们组合起来，能够让他们产生关联，真实出现在这个空间中；之外还有models表示这个房间里面的物体，controls主要是作用的控制这个cameras的交互，比如上下左右移动、旋转、缩放等。
91.3d工程打包文件根据配置参数依次创建canvas元素、创建渲染所需的render、创建相机camera、启动事件控制器control、创建灯光light、调用对应的模型格式加载器加载模型。
92.在前端工程中调用3d工程打包文件并传入相关配置参数，所有的配置参数作为一个object的形式传入到3d工程打包文件中，3d工程打包文件会自动创建一个canvas元素，canvas元素是用javascript编程语言绘制图形图像的html标记元素，然后3d工程打包文件会根据配置参数调用3d工程打包文件内置的功能。配置参数的格式为：
93.[0094][0095]
其中，continueid表示承载3d画面的div元素的id为continue3d；lights表示当前3d画面的灯光集合,ambientlight表示环境光，intensity表示该环境光的强度为1；
[0096][0097]
cameras表示当前表示当前3d画面的相机集合,perspectivecamera表示当前相机为透视相机，angle表示该相机的fov为45，near表示该相机的近截面为1，far表示该相机的远截面为10000，position表示该相机的位置在水平5，高度为107，深度为60；
[0098]
[0099][0100]
controls当前3d画面的控制器集合,enablerotate表示当前控制器是否开启自动旋转，target表示当前控制器控制的objects属性的看向的目标为水平17，高度为5，深度为-4；
[0101][0102]
background表示当前3d画面的背景，type表示该背景的种类，path表示该背景的文件路径，本示例使用相对路径，也可以支持绝对路径；
[0103][0104]
render表示当前3d画面的渲染器，outputencoding表示该渲染器的色彩空间输出模式为srgb，textureencoding表示3d画面中的模型材质的贴图的色彩空间输出模式为srgb；
[0105]
以上配置参数在3d工程打包文件内部都会内置，最小配置参数可以表示为：
[0106][0107][0108]
models表示当前3d场景的模型集合，每个模型都用{}表示，以示例中模型集合的
第一个模型为例，format表示该模型的格式，path表示该模型的路径，本发明统一使用相对路径表示，支持绝对路径，visible表示模型在场景中是否可见，bloom表示该模型是否开启后处理辉光的功能。
[0109]
s170、将所述渲染结果发送至浏览器，以由浏览器对所述渲染结果进行处理，以显示3d画面。
[0110]
在本实施例中，将所述渲染结果发送至浏览器，以由浏览器通过与javascript绑定的内核解析所述渲染结果，且将解析的结果通过算法进行坐标转换，并将转换结果映射到对应的html区域，以呈现出3d画面。
[0111]
具体地，浏览器通过与javascript绑定的内核解析渲染的结果，内核中有内置的图形学接口解析渲染shader信息。shader信息是组成一个物体的形和神的组合器；主要包括vertexshader和fragmentshader,其中vertexshader相当于一个人的骨架和肌肉，是形体之所在的根本，fragmentshader相当于是一个人皮肤，可以是黄色皮肤、黑色皮肤等，两者结合就形成了3d世界中的物体；浏览器将解析的结果通过算法进行坐标转换，过程大致分为:物体空间-世界空间-眼空间-裁剪空间-标准设备空间-窗口空间。
[0112]
大致推导如下：物体空间-世界空间主要是物体的坐标转化为世界坐标。界空间-眼空间-裁剪空间-标准设备空间-窗口空间，统计为世界坐标转化为屏幕坐标的过程，具体如图5所示，本实施例的算法主要借助于webgl的封装库threejs的vector3的project方法，该方法的参数是相机对象，语句worldvector.project(camera)；返回的结果是世界坐标worldvector在camera相机对象矩阵变化下对应的标准设备坐标，标准设备坐标xyz的范围是[-1，1]。
[0113]
因为canvas画布是全屏状态，完全填充浏览器窗口的客户区，canvas画布的宽高尺寸就是window.innerwidth、window.innerheight，如果。画布的中心从屏幕坐标系的角度看是坐标是(window.innerwidth/2,window.innerheight/2),从webgl标准设备坐标系的角度看是坐标原点(0，0)。
[0114]
[0115]
[0116][0117]
通过以上推导和算法转换可以让3d画面的每一个点变成二维的像素，很多像素的组合形成画面在屏幕上。
[0118]
浏览器将转换结果映射到对应的html区域呈现出3d画面。3d工程打包文件以60fps/1000ms的速度循环渲染3d画面并更新到canvas画布中
[0119]
s180、通过所述3d工程打包文件获取来自浏览器的html元素的各种交互操作。
[0120]
具体地，浏览器中的html元素上的各种交互操作传递到3d工程打包文件中；
[0121]
s190、利用所述3d工程打包文件进行api调用，并执行所调用的api对应的功能表格，以得到新渲染结果。
[0122]
在本实施例中，新渲染结果是指3d工程打包文件中根据不同的事件机制调用对应的api，3d工程打包文件主线程执行对应的功能所得的结果。
[0123]
s200、反馈所述新渲染结果至浏览器，以供浏览器刷新所述3d画面。
[0124]
前端工程代码与3d工程代码分离，代码耦合问题；3d工程打包文件作为脚本注入，体积更轻，模块污染更少，也不会再影响其他模块。配置参数的使用可以快速开发3d工程；3d工程打包文件的不断迭代，可以扩展出更多的功能；一套3d工程代码的维护可以供多个项目使用，维护成本低，扩展强。
[0125]
上述的3d可视化工程集成方法，通过开发3d可视化工程，并结合对api的调用模拟，将得到的3d工程打包文件嵌入到前端工程汇中，实现前端工程代码与3d工程代码分离，以解决代码耦合问题，在进行项目使用时，通过需要显示的3d画面的html元素，结合3d工程打包文件进行3d渲染，结合获取的交互操作，调用api，并进行新渲染，以实现一套3d工程代码的维护可以供多个项目使用，维护成本低，扩展强。
[0126]
图6是本发明实施例提供的一种3d可视化工程集成装置300的示意性框图。如图6所示，对应于以上3d可视化工程集成方法，本发明还提供一种3d可视化工程集成装置300。该3d可视化工程集成装置300包括用于执行上述3d可视化工程集成方法的单元，该装置可以被配置于台式电脑、平板电脑、手提电脑、等终端中。具体地，请参阅图6，该3d可视化工程集成装置300包括开发单元301、模拟单元302、嵌入单元303、元素获取单元304、请求发送单元305、3d渲染单元306、结果发送单元307、操作获取单元308、新渲染单元309以及结果反馈单元310。
[0127]
开发单元301，用于开发3d可视化工程；模拟单元302，用于模拟所述3d可视化工程的api调用，并进行api调用测试和处理，以得到3d工程打包文件；嵌入单元303，用于利用所述3d可视化工程将所述3d工程打包文件嵌入至前端工程中；元素获取单元304，用于利用前端工程中调用浏览器的程序接口获取待显示3d画面的html元素；请求发送单元305，用于利
用前端工程调用所述3d工程打包文件并发送配置请求；3d渲染单元306，用于利用所述3d工程打包文件结合所述配置请求进行3d渲染，以得到渲染结果；结果发送单元307，用于将所述渲染结果发送至浏览器，以由浏览器对所述渲染结果进行处理，以显示3d画面；操作获取单元308，用于通过所述3d工程打包文件获取来自浏览器的html元素的各种交互操作；新渲染单元309，用于利用所述3d工程打包文件进行ap i调用，并执行所调用的api对应的功能表格，以得到新渲染结果；结果反馈单元310，用于反馈所述新渲染结果至浏览器，以供浏览器刷新所述3d画面。
[0128]
在一实施例中，如图7所示，所述模拟单元302包括测试子单元3021以及打包子单元3022。
[0129]
测试子单元3021，用于在所述3d可视化工程中模拟前端工程与所述3d可视化工程联调调用api测试，以得到输出结果；打包子单元3022，用于通过webpack打包所述输出结果，以得到3d工程打包文件。
[0130]
在一实施例中，所述嵌入单元303，用于将所述3d可视化工程通过es6的import方法嵌入到前端工程中。
[0131]
在一实施例中，所述请求发送单元305，用于利用前端工程调用所述3d工程打包文件，且由前端工程将配置参数以object形式传入到所述3d工程打包文件中。
[0132]
在一实施例中，如图8所示，所述3d渲染单元306包括解析子单元3061、元素创建子单元3062以及主线程渲染子单元3063。
[0133]
解析子单元3061，用于利用所述3d工程打包文件根据所述配置请求解析对应模块的资源；元素创建子单元3062，用于利用所述3d工程打包文件中的基础场景创建一个canvas元素，注入到html元素中；主线程渲染子单元3063，用于利用所述3d工程打包文件根据调用对应模块注入主线程中进行3d渲染，以得到渲染结果。
[0134]
在一实施例中，所述结果发送单元307，用于将所述渲染结果发送至浏览器，以由浏览器通过与javascript绑定的内核解析所述渲染结果，且将解析的结果通过算法进行坐标转换，并将转换结果映射到对应的html区域，以呈现出3d画面。
[0135]
需要说明的是，所属领域的技术人员可以清楚地了解到，上述3d可视化工程集成装置300和各单元的具体实现过程，可以参考前述方法实施例中的相应描述，为了描述的方便和简洁，在此不再赘述。
[0136]
上述3d可视化工程集成装置300可以实现为一种计算机程序的形式，该计算机程序可以在如图9所示的计算机设备上运行。
[0137]
请参阅图9，图9是本技术实施例提供的一种计算机设备的示意性框图。该计算机设备500可以是服务器，服务器可以是独立的服务器，也可以是多个服务器组成的服务器集群。
[0138]
参阅图9，该计算机设备500包括通过系统总线501连接的处理器502、存储器和网络接口505，其中，存储器可以包括非易失性存储介质503和内存储器504。
[0139]
该非易失性存储介质503可存储操作系统5031和计算机程序5032。该计算机程序5032包括程序指令，该程序指令被执行时，可使得处理器502执行一种3d可视化工程集成方法。
[0140]
该处理器502用于提供计算和控制能力，以支撑整个计算机设备500的运行。
processing unit，cpu)，该处理器502还可以是其他通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现成可编程门阵列(field-programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
[0157]
本领域普通技术人员可以理解的是实现上述实施例的方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成。该计算机程序包括程序指令，计算机程序可存储于一存储介质中，该存储介质为计算机可读存储介质。该程序指令被该计算机系统中的至少一个处理器执行，以实现上述方法的实施例的流程步骤。
[0158]
因此，本发明还提供一种存储介质。该存储介质可以为计算机可读存储介质。该存储介质存储有计算机程序，其中该计算机程序被处理器执行时使处理器执行如下步骤：
[0159]
开发3d可视化工程；模拟所述3d可视化工程的api调用，并进行api调用测试和处理，以得到3d工程打包文件；利用所述3d可视化工程将所述3d工程打包文件嵌入至前端工程中；利用前端工程中调用浏览器的程序接口获取待显示3d画面的html元素；利用前端工程调用所述3d工程打包文件并发送配置请求；利用所述3d工程打包文件结合所述配置请求进行3d渲染，以得到渲染结果；将所述渲染结果发送至浏览器，以由浏览器对所述渲染结果进行处理，以显示3d画面；通过所述3d工程打包文件获取来自浏览器的html元素的各种交互操作；利用所述3d工程打包文件进行api调用，并执行所调用的api对应的功能表格，以得到新渲染结果；反馈所述新渲染结果至浏览器，以供浏览器刷新所述3d画面。
[0160]
其中，所述html元素包括承载3d画面的div元素。
[0161]
在一实施例中，所述处理器在执行所述计算机程序而实现所述模拟所述3d可视化工程的api调用，并进行api调用测试和处理，以得到3d工程打包文件步骤时，具体实现如下步骤：
[0162]
在所述3d可视化工程中模拟前端工程与所述3d可视化工程联调调用api测试，以得到输出结果；通过webpack打包所述输出结果，以得到3d工程打包文件。
[0163]
在一实施例中，所述处理器在执行所述计算机程序而实现所述利用所述3d可视化工程将所述3d工程打包文件嵌入至前端工程中步骤时，具体实现如下步骤：
[0164]
将所述3d可视化工程通过es6的import方法嵌入到前端工程中。
[0165]
在一实施例中，所述处理器在执行所述计算机程序而实现所述利用前端工程调用所述3d工程打包文件并发送配置请求步骤时，具体实现如下步骤：
[0166]
利用前端工程调用所述3d工程打包文件，且由前端工程将配置参数以object形式传入到所述3d工程打包文件中。
[0167]
在一实施例中，所述处理器在执行所述计算机程序而实现所述利用所述3d工程打包文件结合所述配置请求进行3d渲染，以得到渲染结果步骤时，具体实现如下步骤：
[0168]
利用所述3d工程打包文件根据所述配置请求解析对应模块的资源；利用所述3d工程打包文件中的基础场景创建一个canvas元素，注入到html元素中；利用所述3d工程打包文件根据调用对应模块注入主线程中进行3d渲染，以得到渲染结果。
[0169]
在一实施例中，所述处理器在执行所述计算机程序而实现所述将所述渲染结果发送至浏览器，以由浏览器对所述渲染结果进行处理，以显示3d画面步骤时，具体实现如下步
骤：
[0170]
将所述渲染结果发送至浏览器，以由浏览器通过与javascript绑定的内核解析所述渲染结果，且将解析的结果通过算法进行坐标转换，并将转换结果映射到对应的html区域，以呈现出3d画面。
[0171]
所述存储介质可以是u盘、移动硬盘、只读存储器(read-only memory，rom)、磁碟或者光盘等各种可以存储程序代码的计算机可读存储介质。
[0172]
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
[0173]
在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
[0174]
本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。本发明实施例装置中的单元可以根据实际需要进行合并、划分和删减。另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。
[0175]
该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。
[0176]
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。