一种在网页中加载3D模型的方法技术

本发明专利技术公开了一种在网页中加载3D模型的方法，包括以下步骤，一在HTML代码中引入Thee.js及相关插件；二、编写js代码，利用Three.js提供的loader将3D模型导入js文件中；三、将3D模型添加到上一步创建好的场景中，并设置场景的灯光、摄像机、场景、渲染器；四、通过appendchild将场景追加到HTML代码中的body标签中；五、在js文件中编码定义对3D模型的交互操作；六、网页中显示加载的3D模型。本发明专利技术（1）不用装额外的插件及flash，实现真正的网页3D动画，减少了开发者的工作量，从而大大降低开发成本；（2）能随意向网页中加载外部的3D模型（3）能对加载进来的3D模型经行一系列的交互操作；（4）模型保持独立性，网页代码与模型代码分离，低耦合度，易于维护和更新。

【技术实现步骤摘要】
一种在网页中加载3D模型的方法
本专利技术涉及计算机虚拟现实
，特别涉及一种在网页中加载3D模型的方法。
技术介绍
现有的FLASH不支持3D模型，只能做伪3D动画，而无法直接在网页中展示真3D动画，HTML53D做出的3D动画，能进行缩放、拖拽、翻转等简单的交互操作，无法实现类似于模型炸开、3D模型分离等交互操作，而且不能做到直接导入3D模型到网页中，需要编码生成3D模型，工作量非常大，时间和金钱的成本高，不够先进的浏览器无法支持网页3D模型动画。
技术实现思路
本专利技术的目的是提供一种在网页中加载3D模型的方法，以实现真正的网页3D动画、还能随意向网页中加载外部的3D模型和能对加载进来的3D模型经行一系列复杂交互操作。为了实现上述目的，本专利技术提供如下技术方案：一种在网页中加载3D模型的方法，包括以下步骤，步骤一、在HTML代码中引入Thee.js及相关插件；步骤二、编写js代码，利用Three.js提供的loader将3D模型导入js文件中；步骤三、将3D模型添加到上一步创建好的场景中，并设置场景的灯光、摄像机、场景、渲染器；步骤四、通过appendchild将场景追加到HTML代码中的body标签中；步骤五、在js文件中编码定义对3D模型的交互操作；步骤六、网页中显示加载的3D模型。进一步地，步骤五中，编码定义对3D模型的交互操作如下,（1）模型动画播放、暂停和停止；（2）模型分离复位；（3）模型拖拽、旋转和缩放；（4）模型的拆解；（5）模型添加文字说明；（6）全屏操作。进一步地，（1）播放动画。点击播放按钮后，递归调用定义的animate（）方法，通过requestAnimationFrame（）方法，循环渲染，使3D模型的动画循环播放，动画播放时，可以通过鼠标拖拽、缩放、翻转模型；（2）停止播放动画。模型动画播放时，点击停止按钮后，通过cancelAnimation（）方法取消动画帧更新的请求，使3D模型的动画将立即停止，动画停止后，不能通过鼠标拖拽、缩放、翻转模型。（3）复位模型。模型动画在播放时、或者模型动画停止时、或者模型炸开时，点击复位按钮，通过traverse()方法遍历3D模型的每一个骨骼蒙皮动画，并调用pose（）方法，将每一个骨骼蒙皮动画返回动画播放前的状态，从而使模型恢复到最初完整状态（复位状态）。模型复位后，不支持鼠标拖拽、缩放、翻转操作；（4）模型分离。点击分离按钮，记3D模型的动画关键帧数为count，通过for循环，逐帧播放3D模型的动画，并将每一帧动画的循环属性loop设置为false，使3D模型动画只播放一次，这样就可以使3D模型在最后一帧播完后静止，并保持炸开状态。此时模型支持鼠标拖拽、缩放、翻转操作；（5）模型拆解。利用three.js提供的射线跟踪鼠标的位置，检测射线和模型是否相交，若相交，将相交的模型部分标记为“被选中”，实时监测鼠标位置，实时更新模型“被选中”的部分在场景中的位置，从而实现了模型拆解；（6）给3D模型添加文字。同（5），标记模型“被选中”部分后，给“被选中”的部分绑定文字，实时检测模型“被选中”部分，若场景中模型有“被选中”的部位，文字显示，否则，文字不显示；（7）全屏操作。通过按钮控制进入浏览器全屏/退出全屏状态，通过setSize（）方法自动调整窗口的大小，3D模型大小将根据设定的比例自动调整；进一步地，步骤一中，根据不同格式的3D模型，使用three.js插件中对应的Loader工具，将3D模型文件导入自定义的javaScript代码文件中，存放在DOM节点container中。进一步地，步骤三中，在该javaScript代码文件中对模型的场景进行设置，包括：通过自定义的init()方法设置灯光（light）、摄像机（camera）、场景（scene）、渲染器（renderer）。进一步地，自定义javaScript代码，通过appendchild（）方法将步骤1中的container添加到HTML页面中的body标签内，至此，3D模型被成功加载到网页中。本专利技术的有益效果为：（1）不用装额外的插件及flash，实现真正的网页3D动画。不依赖flash，只依靠浏览器内置的WebGL，直接使用现成的3D模型，直接减少了开发者的工作量，从而大大降低开发成本。（2）能随意向网页中加载外部的3D模型，并设置该模型的位置、大小、灯光、背景等。比起HTML53D模型，使用3Dmax在外部建造模型更利于3D模型标准化和可迭代开发。另外，在网页代码中设置模型的展示样式和灯光、背景，可以进行个性化设置的同时，保持了3D模型可持续利用，只需要修改少量的代码，即可达到不同的效果。（3）能对加载进来的3D模型经行一系列的交互操作：拖拽、缩放、旋转、翻转、动画控制等。（4）模型保持独立性，网页代码与模型代码分离，低耦合度，易于维护和更新。附图说明图1是本专利技术在网页中加载3D模型的的步骤示意图。具体实施方式以下结合附图对本专利技术进行进一步说明：现在有dae格式的3D模型，按照本专利技术方法，可以将此3D模型导入到网页中，并对此模型进行一系列交互操作。（1）在html页面中引用jQuery.js和three.js，以及一些辅助的js插件，初始化场景并渲染（包括添加摄像机、灯光），将3D模型添加到场景中后，再将场景添加到html页面中，3D模型便被添加到了网页中。（2）设置模型所处的场景。用户可以调整场景中的灯光和背景，使模型处于一个最佳的视觉状态。用户不进行此设置时，场景将使用默认的灯光和背景，对3D模型的展示没有必然的影响。（3）设置3D模型的动画播放与停止。将模型导入网页后，用户可以对模型进行拖拽、缩放、旋转操作，若模型自带动画，则会自动循环播放，若没有动画则没有动画效果。为了便于观察模型的结构，用户可以随时点击停止按钮停止动画，找到最佳视角进行观察，不需要时，也可以不进行此操作。点击复位按钮和分离按钮也可以使模型到达停止状态，前者模型停止时处于最初的闭合状态，后者模型处于炸开状态。（4）3D模型分离。为了观察到模型的内部结构，用户可以点击钮时模型转到完全分离状态，模型炸开后，仍支持拖拽、缩放和旋转操作。（5）进入全屏与退出全屏显示。辅助用户找到观察模型的最佳视角，只需要通过点击按钮即可进入/退出全屏状态，如果用户不需要可忽略此按钮，通过(1)(2)(3)(4)便可将模型导入网页中，并对该模型进行交互操作。（6）3D模型拆解及添加文字。用户可以随意选中模型的某个部分进行拖拽，将鼠标放到模型的任意部位查看文字说明。以上所述并非对本专利技术的技术范围作任何限制，凡依据本专利技术技术实质对以上的实施例所作的任何修改、等同变化与修饰，均仍属于本专利技术的技术方案的范围内。本文档来自技高网...

【技术保护点】
一种在网页中加载3D模型的方法，其特征在于：包括以下步骤，步骤一、在HTML代码中引入Thee.js及相关插件；步骤二、编写js代码，利用Three.js提供的loader将3D模型导入js文件中；步骤三、将3D模型添加到上一步创建好的场景中，并设置场景的灯光、摄像机、场景、渲染器；步骤四、通过appendchild将场景追加到HTML代码中的body标签中；步骤五、在js文件中编码定义对3D模型的交互操作；步骤六、网页中显示加载的3D模型。

【技术特征摘要】
1.一种在网页中加载3D模型的方法，其特征在于：包括以下步骤，步骤一、在HTML代码中引入Thee.js及相关插件；步骤二、编写js代码，利用Three.js提供的loader将3D模型导入js文件中；步骤三、将3D模型添加到上一步创建好的场景中，并设置场景的灯光、摄像机、场景、渲染器；步骤四、通过appendchild将场景追加到HTML代码中的body标签中；步骤五、在js文件中编码定义对3D模型的交互操作；步骤六、网页中显示加载的3D模型。2.根据权利要求1所述的一种在网页中加载3D模型的方法，其特征在于：步骤五中，编码定义对3D模型的交互操作如下,（1）模型动画播放、暂停和停止；（2）模型分离复位；（3）模型拖拽、旋转和缩放；（4）模型的拆解；（5）模型添加文字说明；（6）全屏操作。3.根据权利要求2所述的一种在网页中加载3D模型的方法，其特征在于：（1）播放动画：点击播放按钮后，递归调用定义的animate（）方法，通过requestAnimationFrame（）方法，循环渲染，使3D模型的动画循环播放，动画播放时，可以通过鼠标拖拽、缩放、翻转模型；（2）停止播放动画：模型动画播放时，点击停止按钮后，通过cancelAnimation（）方法取消动画帧更新的请求，使3D模型的动画将立即停止，动画停止后，不能通过鼠标拖拽、缩放、翻转模型；（3）复位模型：模型动画在播放时、或者模型动画停止时、或者模型炸开时，点击复位按钮，通过traverse()方法遍历3D模型的每一个骨骼蒙皮动画，并调用pose（）方法，将每一个骨骼蒙皮动画返回动画播放前的状态，从而使模型恢复到最初完整状态（复位状态）；模型复位后，不支持鼠标拖拽、缩放、翻转操作；（4）模型分离：点击分离按钮，记3D模型的动画关键...

【专利技术属性】
技术研发人员：饶钟权，刘红，邬前伟，李庆松，黎玉玲，刘鹏程，俞益飞，周烨，张自忠，邱孝扬，赵子云，汪全，杨恺，
申请(专利权)人：东莞市同立方智能科技有限公司，
类型：发明
国别省市：广东,44