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模型。该加载3D模型的方法能够在HTML网页中快速加载3D模型。

【技术实现步骤摘要】
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本文档来自技高网...

【技术保护点】
1.一种3D模型加载方法，其特征在于，所述3D模型加载方法包括：/n在第一HTML文件中引入Three.js文件；/n采用所述Three.js文件中的加载器将3D模型的obj格式的数据转换成html格式的数据；/n采用所述加载器将数据格式转换后的3D模型加载到Javascript文件中；/n采用所述Three.js文件中的onLoad回调函数将所述Javascript文件中的3D模型添加到预设的场景文件中；/n采用所述Three.js文件中的render函数将所述3D模型进行场景渲染；/n设置所述场景文件中的灯光、摄像机、场景以及渲染器的参数；/n将所述场景文件加入到第二HTML文件中的body标签中；/n在所述javascript文件中编码定义对所述3D模型的交互操作；以及/n在HTML网页上显示所述3D模型。/n

【技术特征摘要】
1.一种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模型。


2.如权利要求1所述的3D模型加载方法，其特征在于，所述在第一HTML文件中引入Three.js文件包括：
采用标签引入three.js。


3.如权利要求2所述的3D模型加载方法，其特征在于，所述标签为script标签。


4.如权利要求1所述的3D模型加载方法，其特征在于，所述加载器为ColladaLoader加载器。


5.如权利要求1所述的3D...

【专利技术属性】
技术研发人员：张世彤，张杰，
申请(专利权)人：吉林省科学技术信息研究所，
类型：发明
国别省市：吉林;22