一种在网页中加载3D模型的方法.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN107679188A(43)申请公布日2018.02.09(21)申请号201710918604.8(22)申请日2017.09.30(71)申请人东莞市同立方智能科技有限公司地址523000广东省东莞市南城街道新基地科技创意产业园F栋203-205室(72)发明人饶钟权刘红邬前伟李庆松黎玉玲刘鹏程俞益飞周烨张自忠邱孝扬赵子云汪全杨恺(74)专利代理机构东莞市奥丰知识产权代理事务所(普通合伙)44424代理人田小红(51)Int.Cl.G06F17/30(2006.01)权利要求书2页说明书3页附图1页(54)发明名称一种在网页中加载3D模型的方法(57)摘要本发明公开了一种在网页中加载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）模型保持独立性，网页代码与模型代码分离，低耦合度，易于维护和更新。CN107679188ACN107679188A权利要求书1/2页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模型的动画关键帧数为count，通过for循环，逐帧播放3D模型的动画，并将每一帧动画的循环属性loop设置为false，使3D模型动画只播放一次，这样就可以使3D模型在最后一帧播完后静止，并保持炸开状态；此时模型支持鼠标拖拽、缩放、翻转操作；（5）模型拆解：利用three.js提供的射线跟踪鼠标的位置，检测射线和模型是否相交，若相交，将相交的模型部分标记为“被选中”，实时监测鼠标位置，实时更新模型“被选中”的部分在场景中的位置，从而实现了模型拆解；（6）给3D模型添加文字：同（5）模型拆解，标记模型“被选中”部分后，给“被选中”的部分绑定文字，实时检测模型“被选中”部分，若场景中模型有“被选中”的部位，文字显示，否则，文字不显示；（7）全屏操作：通过按钮控制进入浏览器全屏/退出全屏状态，通过setSize（）方法自动调整窗口的大小，3D模型大小将根据设定的比例自动调整。4.根据权利要求1所述的一种在网页中加载3D模型的方法，其特征在于：步骤一中，根据不同格式的3D模型，使用three.js插件中对应的Loader工具，将3D模型文件导入自定义的javaScript代码文件中，存放在DOM节点container中。5.根据权利要求1所述的一种在网页中加载3D模型的方法，其特征在于：步