[發明專利]一種在網頁中加載3D模型的方法有效
| 申請號: | 201710918604.8 | 申請日: | 2017-09-30 |
| 公開(公告)號: | CN107679188B | 公開(公告)日: | 2021-11-16 |
| 發明(設計)人: | 饒鐘權;劉紅;鄔前偉;李慶松;黎玉玲;劉鵬程;俞益飛;周燁;張自忠;邱孝揚;趙子云;汪全;楊愷 | 申請(專利權)人: | 深圳市同立方科技有限公司 |
| 主分類號: | G06F16/957 | 分類號: | G06F16/957;G06F3/0484 |
| 代理公司: | 東莞市奧豐知識產權代理事務所(普通合伙) 44424 | 代理人: | 田小紅 |
| 地址: | 518000 廣東省深圳市龍崗區*** | 國省代碼: | 廣東;44 |
| 權利要求書: | 查看更多 | 說明書: | 查看更多 |
| 摘要: | |||
| 搜索關鍵詞: | 一種 網頁 加載 模型 方法 | ||
本發明公開了一種在網頁中加載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模型的方法。
背景技術
現有的FLASH不支持3D模型,只能做偽3D動畫,而無法直接在網頁中展示真3D動畫,HTML5 3D做出的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)播放動畫。點擊播放按鈕后,遞歸調用定義的animate()方法,通過requestAnimationFrame()方法,循環渲染,使3D模型的動畫循環播放,動畫播放時,可以通過鼠標拖拽、縮放、翻轉模型;
(2)停止播放動畫。模型動畫播放時,點擊停止按鈕后,通過cancelAnimation()方法取消動畫幀更新的請求,使3D模型的動畫立即停止,動畫停止后,不能通過鼠標拖拽、縮放和翻轉模型。
(3)復位模型。模型動畫在播放時、或者模型動畫停止時、或者模型炸開時,點擊復位按鈕,通過traverse()方法遍歷3D模型的每一個骨骼蒙皮動畫,并調用pose()方法,將每一個骨骼蒙皮動畫返回動畫播放前的狀態,從而使模型恢復到最初完整狀態;模型復位后,支持鼠標拖拽、縮放、翻轉操作;
(4)模型分離。點擊分離按鈕,記3D模型的動畫關鍵幀數為count,通過for循環,逐幀播放3D模型的動畫,并將每一幀動畫的循環屬性loop設置為false,使3D模型動畫只播放一次,這樣就可以使3D模型在最后一幀播完后靜止,并保持炸開狀態。此時模型支持鼠標拖拽、縮放、翻轉操作;
(5)模型拆解。利用three.js提供的射線跟蹤鼠標的位置,檢測射線和模型是否相交,若相交,將相交的模型部分標記為“被選中”,實時監測鼠標位置,實時更新模型“被選中”的部分在場景中的位置,從而實現了模型拆解;
該專利技術資料僅供研究查看技術是否侵權等信息,商用須獲得專利權人授權。該專利全部權利屬于深圳市同立方科技有限公司,未經深圳市同立方科技有限公司許可,擅自商用是侵權行為。如果您想購買此專利、獲得商業授權和技術合作,請聯系【客服】
本文鏈接:http://www.szxzyx.cn/pat/books/201710918604.8/2.html,轉載請聲明來源鉆瓜專利網。





