[發(fā)明專利]一種三維場景中物體自轉(zhuǎn)及縮放的實現(xiàn)方法、裝置及設(shè)備

有效

• 申請?zhí)枺?/td>: 201911214456.7
• 申請日: 2019-12-02
• 公開（公告）號: CN110910515B
• 公開（公告）日: 2023-04-25
• 發(fā)明（設(shè)計）人: 鄭思慧;范淵
• 申請（專利權(quán)）人: 杭州安恒信息技術(shù)股份有限公司
• 主分類號: G06T19/20
• 分類號: G06T19/20
• 代理公司: 北京集佳知識產(chǎn)權(quán)代理有限公司 11227
• 代理人: 王曉坤

本發(fā)明公開了一種三維場景中物體自轉(zhuǎn)及縮放的實現(xiàn)方法、裝置、設(shè)備及計算機可讀存儲介質(zhì)包括：在三維場景中添加軌道控制器，并將三維場景設(shè)置為自動旋轉(zhuǎn)；利用requsetAnimationFrame在瀏覽器頁面每次重繪前調(diào)用回調(diào)函數(shù)更新三維場景與相機位置；在運行更新函數(shù)前，獲取相機當(dāng)前三維位置，根據(jù)當(dāng)前三維位置距三維場景中心點的距離，更新相機與三維場景中心點的目標距離，得到相機的目標三維位置；目標三維位置傳輸至軌道控制器，運行更新函數(shù)與場景渲染函數(shù)，實現(xiàn)三維場景中物體自轉(zhuǎn)同時自縮放的效果。本發(fā)明所提供的方法、裝置、設(shè)備及計算機可讀存儲介質(zhì)，減少了實現(xiàn)三維場景中物體自轉(zhuǎn)同時自縮放的效果所需成本及耗時。

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

本發(fā)明涉及三維模型顯示技術(shù)領(lǐng)域，特別是涉及一種三維場景中物體自轉(zhuǎn)及縮放的實現(xiàn)方法、裝置、設(shè)備以及計算機可讀存儲介質(zhì)。

背景技術(shù)

Three.js為一個開源WebGL庫，對WebGL提供的接口進行了非常好的封裝，簡化了很多的細節(jié)，前端開發(fā)者通常都是使用Three.js實現(xiàn)3D繪圖。Three.js提供的軌道控制器OrbitControls目前只支持三維場景中物體的自動旋轉(zhuǎn)，鼠標控制放大和縮小，并未提供API使物體可以在一定范圍內(nèi)自動放大縮小交替變。

已有的技術(shù)方案都是通過將場景中所有物體組合成一個組，改變這個組的旋轉(zhuǎn)角度，使這個組進行自旋轉(zhuǎn)動畫，再通過改變相機距離組中心的位置的大小，實現(xiàn)自縮放的效果。現(xiàn)有實現(xiàn)三維場景中物體自縮放效果的技術(shù)方案成本較高，需要花費較長的時間。

綜上所述可以看出，如何減少實現(xiàn)三維場景中物體自轉(zhuǎn)同時自縮放的效果所需成本及耗時是目前有待解決的問題。

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

本發(fā)明的目的是提供一種三維場景中物體自轉(zhuǎn)及縮放的實現(xiàn)方法、裝置、設(shè)備以及計算機可讀存儲介質(zhì)，以解決現(xiàn)有實現(xiàn)三維場景中物體自縮放效果的技術(shù)方案成本較高且耗時長的問題。

為解決上述技術(shù)問題，本發(fā)明提供一種三維場景中物體自轉(zhuǎn)及縮放的實現(xiàn)方法，包括：在三維場景中添加軌道控制器，并通過所述軌道控制器提供的設(shè)置參數(shù)將所述三維場景設(shè)置為自動旋轉(zhuǎn)；利用requsetAnimationFrame依據(jù)幀頻對瀏覽器頁面進行重繪，在所述瀏覽器頁面每次重繪前調(diào)用回調(diào)函數(shù)更新所述三維場景與相機位置，其中，所述回調(diào)函數(shù)由場景渲染函數(shù)與所述軌道控制器的更新函數(shù)組成；在運行所述軌道控制器的所述更新函數(shù)前，獲取相機的當(dāng)前三維位置，根據(jù)所述當(dāng)前三維位置距所述三維場景中心點的當(dāng)前距離，更新所述相機與所述三維場景中心點的目標距離，以得到所述相機的目標三維位置；其中，所述當(dāng)前距離大于等于預(yù)設(shè)最小距離閾值小于等于預(yù)設(shè)最大距離閾值；將所述目標三維位置傳輸至所述軌道控制器后，運行所述更新函數(shù)，以便所述相機沿預(yù)設(shè)橢圓軌道運行的同時改變所述相機與所述三維場景中心點之間的距離，然后運行所述場景渲染函數(shù)對所述三維場景重新渲染。

優(yōu)選地，所述在三維場景中添加軌道控制器，并通過所述軌道控制器提供的設(shè)置參數(shù)將所述三維場景設(shè)置為自動旋轉(zhuǎn)包括：

在所述三維場景中新建所述軌道控制器；

通過設(shè)置controls.autoRotate＝true，將所述三維場景設(shè)置為自動旋轉(zhuǎn)模式。

優(yōu)選地，所述利用requsetAnimationFrame依據(jù)幀對瀏覽器頁面進行重繪，在所述瀏覽器頁面每次重繪前調(diào)用回調(diào)函數(shù)更新所述三維場景與相機位置包括：

將render()函數(shù)與controls.update()函數(shù)設(shè)置為所述回調(diào)函數(shù)；

將所述回調(diào)函數(shù)設(shè)置為所述requsetAnimationFrame的參數(shù)；

調(diào)用所述requsetAnimationFrame依據(jù)幀對所述瀏覽器頁面進行重繪，在所述瀏覽器頁面每次重繪前調(diào)用所述render()函數(shù)與所述controls.update()函數(shù)更新所述三維場景與相機位置。