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

有效

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

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

(6)給3D模型添加文字：利用上述(5)模型拆解，標記模型“被選中”部分后，給“被選中”的部分綁定文字，實時檢測模型“被選中”部分，若場景中模型有“被選中”的部位，文字顯示，否則，文字不顯示；

(7)全屏操作：通過按鈕控制進入瀏覽器全屏或退出全屏狀態，通過setSize()方法自動調整窗口的大小，3D模型大小將根據設定的比例自動調整。

2.根據權利要求1所述的一種在網頁中加載3D模型的方法，其特征在于：步驟一中，根據不同格式的3D模型，使用three.js插件中對應的Loader工具，將3D模型文件導入自定義的javaScript代碼文件中，存放在DOM節點container中。

3.根據權利要求2所述的一種在網頁中加載3D模型的方法，其特征在于：步驟三中，在該javaScript代碼文件中對模型的場景進行設置，包括：通過自定義的init()方法設置燈光、攝像機、場景、渲染器。

4.根據權利要求2所述的一種在網頁中加載3D模型的方法，其特征在于：自定義javaScript代碼，通過appendchild()方法將步驟1中的container添加到HTML頁面中的body標簽內，至此，3D模型被成功加載到網頁中。