[發(fā)明專利]一種在網(wǎng)頁(yè)中加載3D模型的方法

有效

• 申請(qǐng)?zhí)枺?/td>: 201710918604.8
• 申請(qǐng)日: 2017-09-30
• 公開(kāi)（公告）號(hào): CN107679188B
• 公開(kāi)（公告）日: 2021-11-16
• 發(fā)明（設(shè)計(jì)）人: 饒鐘權(quán);劉紅;鄔前偉;李慶松;黎玉玲;劉鵬程;俞益飛;周燁;張自忠;邱孝揚(yáng);趙子云;汪全;楊愷
• 申請(qǐng)（專利權(quán)）人: 深圳市同立方科技有限公司
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957;G06F3/0484
• 代理公司: 東莞市奧豐知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙) 44424
• 代理人: 田小紅

本發(fā)明公開(kāi)了一種在網(wǎng)頁(yè)中加載3D模型的方法，包括以下步驟，一在HTML代碼中引入Thee.js及相關(guān)插件；二、編寫(xiě)js代碼，利用Three.js提供的loader將3D模型導(dǎo)入js文件中；三、將3D模型添加到上一步創(chuàng)建好的場(chǎng)景中，并設(shè)置場(chǎng)景的燈光、攝像機(jī)、場(chǎng)景、渲染器；四、通過(guò)appendchild將場(chǎng)景追加到HTML代碼中的body標(biāo)簽中；五、在js文件中編碼定義對(duì)3D模型的交互操作；六、網(wǎng)頁(yè)中顯示加載的3D模型。本發(fā)明（1）不用裝額外的插件及flash，實(shí)現(xiàn)真正的網(wǎng)頁(yè)3D動(dòng)畫(huà)，減少了開(kāi)發(fā)者的工作量，從而大大降低開(kāi)發(fā)成本；（2）能隨意向網(wǎng)頁(yè)中加載外部的3D模型（3）能對(duì)加載進(jìn)來(lái)的3D模型經(jīng)行一系列的交互操作；（4）模型保持獨(dú)立性，網(wǎng)頁(yè)代碼與模型代碼分離，低耦合度，易于維護(hù)和更新。

技術(shù)領(lǐng)域

本發(fā)明涉及計(jì)算機(jī)虛擬現(xiàn)實(shí)技術(shù)領(lǐng)域，特別涉及一種在網(wǎng)頁(yè)中加載3D模型的方法。

背景技術(shù)

現(xiàn)有的FLASH不支持3D模型，只能做偽3D動(dòng)畫(huà)，而無(wú)法直接在網(wǎng)頁(yè)中展示真3D動(dòng)畫(huà)，HTML5 3D做出的3D動(dòng)畫(huà)，能進(jìn)行縮放、拖拽、翻轉(zhuǎn)等簡(jiǎn)單的交互操作，無(wú)法實(shí)現(xiàn)類似于模型炸開(kāi)、3D模型分離等交互操作，而且不能做到直接導(dǎo)入3D模型到網(wǎng)頁(yè)中，需要編碼生成3D模型，工作量非常大，時(shí)間和金錢(qián)的成本高，不夠先進(jìn)的瀏覽器無(wú)法支持網(wǎng)頁(yè)3D模型動(dòng)畫(huà)。

發(fā)明內(nèi)容

本發(fā)明的目的是提供一種在網(wǎng)頁(yè)中加載3D模型的方法，以實(shí)現(xiàn)真正的網(wǎng)頁(yè)3D動(dòng)畫(huà)、還能隨意向網(wǎng)頁(yè)中加載外部的3D模型和能對(duì)加載進(jìn)來(lái)的3D模型經(jīng)行一系列復(fù)雜交互操作。

為了實(shí)現(xiàn)上述目的，本發(fā)明提供如下技術(shù)方案：

一種在網(wǎng)頁(yè)中加載3D模型的方法，包括以下步驟，步驟一、在HTML代碼中引入Thee.js及相關(guān)插件；

步驟二、編寫(xiě)js代碼，利用Three.js提供的loader將3D模型導(dǎo)入js文件中；

步驟三、將3D模型添加到上一步創(chuàng)建好的場(chǎng)景中，并設(shè)置場(chǎng)景的燈光、攝像機(jī)、場(chǎng)景、渲染器；

步驟四、通過(guò)appendchild將場(chǎng)景追加到HTML代碼中的body標(biāo)簽中；

步驟五、在js文件中編碼定義對(duì)3D模型的交互操作；

步驟六、網(wǎng)頁(yè)中顯示加載的3D模型；

步驟五中，編碼定義對(duì)3D模型的交互操作如下，

(1)播放動(dòng)畫(huà)。點(diǎn)擊播放按鈕后，遞歸調(diào)用定義的animate()方法，通過(guò)requestAnimationFrame()方法，循環(huán)渲染，使3D模型的動(dòng)畫(huà)循環(huán)播放，動(dòng)畫(huà)播放時(shí)，可以通過(guò)鼠標(biāo)拖拽、縮放、翻轉(zhuǎn)模型；

(2)停止播放動(dòng)畫(huà)。模型動(dòng)畫(huà)播放時(shí)，點(diǎn)擊停止按鈕后，通過(guò)cancelAnimation()方法取消動(dòng)畫(huà)幀更新的請(qǐng)求，使3D模型的動(dòng)畫(huà)立即停止，動(dòng)畫(huà)停止后，不能通過(guò)鼠標(biāo)拖拽、縮放和翻轉(zhuǎn)模型。

(3)復(fù)位模型。模型動(dòng)畫(huà)在播放時(shí)、或者模型動(dòng)畫(huà)停止時(shí)、或者模型炸開(kāi)時(shí)，點(diǎn)擊復(fù)位按鈕，通過(guò)traverse()方法遍歷3D模型的每一個(gè)骨骼蒙皮動(dòng)畫(huà)，并調(diào)用pose()方法，將每一個(gè)骨骼蒙皮動(dòng)畫(huà)返回動(dòng)畫(huà)播放前的狀態(tài)，從而使模型恢復(fù)到最初完整狀態(tài)；模型復(fù)位后，支持鼠標(biāo)拖拽、縮放、翻轉(zhuǎn)操作；

(4)模型分離。點(diǎn)擊分離按鈕，記3D模型的動(dòng)畫(huà)關(guān)鍵幀數(shù)為count，通過(guò)for循環(huán)，逐幀播放3D模型的動(dòng)畫(huà)，并將每一幀動(dòng)畫(huà)的循環(huán)屬性loop設(shè)置為false，使3D模型動(dòng)畫(huà)只播放一次，這樣就可以使3D模型在最后一幀播完后靜止，并保持炸開(kāi)狀態(tài)。此時(shí)模型支持鼠標(biāo)拖拽、縮放、翻轉(zhuǎn)操作；

(5)模型拆解。利用three.js提供的射線跟蹤鼠標(biāo)的位置，檢測(cè)射線和模型是否相交，若相交，將相交的模型部分標(biāo)記為“被選中”，實(shí)時(shí)監(jiān)測(cè)鼠標(biāo)位置，實(shí)時(shí)更新模型“被選中”的部分在場(chǎng)景中的位置，從而實(shí)現(xiàn)了模型拆解；