[發明專利]一種在網頁中加載3D模型的方法

有效

• 申請號: 201710918604.8
• 申請日: 2017-09-30
• 公開（公告）號: CN107679188B
• 公開（公告）日: 2021-11-16
• 發明（設計）人: 饒鐘權;劉紅;鄔前偉;李慶松;黎玉玲;劉鵬程;俞益飛;周燁;張自忠;邱孝揚;趙子云;汪全;楊愷
• 申請（專利權）人: 深圳市同立方科技有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F3/0484
• 代理公司: 東莞市奧豐知識產權代理事務所(普通合伙) 44424
• 代理人: 田小紅

本發明公開了一種在網頁中加載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提供的射線跟蹤鼠標的位置，檢測射線和模型是否相交，若相交，將相交的模型部分標記為“被選中”，實時監測鼠標位置，實時更新模型“被選中”的部分在場景中的位置，從而實現了模型拆解；