3D模型加载方法与流程

本发明是关于计算机技术领域，特别是关于一种3d模型加载方法。

背景技术：

3d模型是用三维软件建造的立体模型，包括各种建筑、人物、植被、机械等等，比如一个大楼的3d模型图。3d模型也包括玩具和电脑模型领域。

现有的flash不支持3d模型，只能做伪3d动画，而无法直接在网页中展示真3d动画。html53d工具不能直接导入3d模型到网页中，其需要编码生成3d模型，工作量非常大，而且低级别的浏览器无法支持html53d模型动画。

公开于该背景技术部分的信息仅仅旨在增加对本发明的总体背景的理解，而不应当被视为承认或以任何形式暗示该信息构成已为本领域一般技术人员所公知的现有技术。

技术实现要素：

本发明的目的在于提供一种3d模型加载方法，其能够在html网页中快速加载3d模型。

为实现上述目的，本发明提供了一种3d模型加载方法，所述3d模型加载方法包括：在第一html文件中引入three.js文件；采用所述three.js文件中的加载器将3d模型的obj格式的数据转换成html格式的数据；采用所述加载器将数据格式转换后的3d模型加载到javascript文件中；采用所述three.js文件中的onload回调函数将所述javascript文件中的3d模型添加到预设的场景文件中；采用所述three.js文件中的render函数将所述3d模型进行场景渲染；设置所述场景文件中的灯光、摄像机、场景以及渲染器的参数；将所述场景文件加入到第二html文件中的body标签中；在所述javascript文件中编码定义对所述3d模型的交互操作；在html网页上显示所述3d模型。

在本发明的一实施方式中，所述在第一html文件中引入three.js文件包括：采用标签引入three.js。

在本发明的一实施方式中，所述标签为script标签。

在本发明的一实施方式中，所述加载器为colladaloader加载器。

在本发明的一实施方式中，所述设置所述场景文件中的灯光、摄像机、场景以及渲染器的参数包括：设置灯光的亮度、开关灯时显示的内容、用户进入后摄像机视角的默认角度、鼠标左右键按下以及移动时摄像机跟随转动方式、3d场景的加载顺序中的一个或多个。

在本发明的一实施方式中，定义对所述3d模型的交互操作包括：定义用户手动开关灯光、定义用户手动开关风扇、定义用户手动开关灌溉、定义自动获取温度值、定义自动获取湿度值、定义自动获取光照值、定义温度到达自定义值自动开启或关闭风扇、定义湿度到达自定义值后自动开启或关闭灌溉、定义光照到达自定义值后自动开启或关闭灯光中的一个或多个。

在本发明的一实施方式中，所述方法还包括：在采用所述three.js文件中的加载器将3d模型的obj格式的数据转换成html格式的数据之前，使用draco算法对所述3d模型进行压缩。

基于同样的发明构思，本发明还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一实施方式所述方法的步骤。

基于同样的发明构思，本发明还提供了一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任一实施方式所述方法的步骤。

与现有技术相比，根据本发明的3d模型加载方法及电子装置，通过在html代码中引入three.js文件，并采用three.js文件中的加载器将3d模型导入javascript文件中，从而可以实现在网页上快速加载3d模型，而且可以快速加载大于百兆的3d模型，该方法可以节约带宽，即使移动端用户在手机浏览器中使用也可以快速加载，占用流量少；本方法无需安装额外的插件以及flash工具，减少了开发者的工作量，大大降低了开发成本；而且本方法中，html文件与3d模型文件分离，3d模型保持独立性，与html文件具有低耦合度，易于维护和更新。优选地，在javascript文件中编码定义了对3d模型的智能交互操作，使得用户可以对3d模型进行相关的交互操作。优选地，在加载3d模型前，采用draco算法对模型进行压缩，可以使得3d文件大幅缩小，进一步地提高了3d模型的加载速度。另外本方法可以兼容目前常用的浏览器。

附图说明

图1是根据本发明一实施方式的3d模型加载方法的步骤组成。

具体实施方式

下面结合附图，对本发明的具体实施方式进行详细描述，但应当理解本发明的保护范围并不受具体实施方式的限制。

除非另有其它明确表示，否则在整个说明书和权利要求书中，术语“包括”或其变换如“包含”或“包括有”等等将被理解为包括所陈述的元件或组成部分，而并未排除其它元件或其它组成部分。

为了克服现有技术的问题，本发明提供了一种3d模型加载方法，如图1所示，一实施方式的3d模型加载方法包括：步骤s1～步骤s9。

在步骤s1中，在第一html文件中引入three.js文件。

具体地，可以使用标签引入three.js，例如<scripttype＝"text/javascript"src＝"/js/three.js"></script>。

在步骤s2中，进行3d模型数据转换：采用three.js文件中的加载器将3d模型的obj格式的数据转换成html格式的数据。其中，所述加载器为colladaloader加载器。

在步骤s3中，加载3d模型：采用加载器将数据格式转换后的3d模型加载到javascript文件中。

在步骤s4中，将3d模型添加到场景中：采用three.js文件中的onload回调函数将javascript文件中的3d模型添加到预设的场景文件中。

在步骤s5中，进行场景渲染：采用three.js文件中的render函数将3d模型进行场景渲染。

在步骤s6中设置场景文件参数：设置场景文件中的灯光、摄像机、场景以及渲染器的参数。本实施方式中，预设的场景文件为智慧农业3d场景，因此设置场景文件中的灯光、摄像机、场景以及渲染器的参数包括：设置灯光的亮度、开关灯时显示的内容、用户进入后摄像机视角的默认角度、鼠标左右键按下以及移动时摄像机跟随转动方式、3d场景的加载顺序中的一个或多个。

在步骤s7中将场景文件加入到第二html文件中的body标签中。

在步骤s8中定义交互操作：在javascript文件中编码定义对3d模型的交互操作。定义对3d模型的交互操作包括：定义用户手动开关灯光、定义用户手动开关风扇、定义用户手动开关灌溉、定义自动获取温度值、定义自动获取湿度值、定义自动获取光照值、定义温度到达自定义值自动开启或关闭风扇、定义湿度到达自定义值后自动开启或关闭灌溉，定义光照到达自定义值后自动开启或关闭灯光中的一个或多个。通过自定义设置，用户可以通过3d模型对农业场景进行智能控制。

在步骤s9中在html网页上显示3d模型。

在上述实施方式的3d模型加载方法中，通过在html代码中引入three.js文件，并采用three.js文件中的加载器将3d模型导入javascript文件中，从而可以实现在网页上快速加载3d模型，而且可以快速加载大于百兆的3d模型，该方法可以节约带宽，即使移动端用户在手机浏览器中使用也可以快速加载，占用流量少；；本方法无需安装额外的插件以及flash工具，减少了开发者的工作量，大大降低了开发成本；而且本方法中，html文件与3d模型文件分离，3d模型保持独立性，与html文件具有低耦合度，易于维护和更新；另外本方法可以兼容常用的浏览器。

优选地，在另一实施方式中，在步骤s2之前，还使用draco算法对3d模型进行压缩。3d模型中的mesh和点云数据、压缩点、连接信息、纹理协调、颜色信息、法线、以及其他与几何相关的通用属性都可以被压缩。通过draco压缩后，3d模型文件能大幅缩小，并不在视觉保真度上做妥协。对于用户来说，3d模型加载会更快，在dracojavascript解码器支持下，传输3d图像的网页应用会变得非常地快，而dracojavascript解码器可以和3d网页浏览器绑定起来。

基于同样的发明构思，本发明还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一实施方式所述方法的步骤。

基于同样的发明构思，本发明还提供了一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任一实施方式所述方法的步骤。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

前述对本发明的具体示例性实施方案的描述是为了说明和例证的目的。这些描述并非想将本发明限定为所公开的精确形式，并且很显然，根据上述教导，可以进行很多改变和变化。对示例性实施例进行选择和描述的目的在于解释本发明的特定原理及其实际应用，从而使得本领域的技术人员能够实现并利用本发明的各种不同的示例性实施方案以及各种不同的选择和改变。本发明的范围意在由权利要求书及其等同形式所限定。