[發明專利]一種基于Threejs生成全景圖表的方法、終端設備及存儲介質

有效

• 申請號: 202011462659.0
• 申請日: 2020-12-14
• 公開（公告）號: CN112464126B
• 公開（公告）日: 2022-07-15
• 發明（設計）人: 黃天祺;王博;彭琪偉
• 申請（專利權）人: 廈門市美亞柏科信息股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 廈門市精誠新創知識產權代理有限公司 35218
• 代理人: 何家富

1.一種基于Threejs生成全景圖表的方法，其特征在于，包括以下步驟：

S1：當頁面解析到全景容器組件時，加載全景容器組件中配置的各圖表組件，并將其掛載至全景容器組件內；

S2：當全景容器組件被掛載至頁面上后，對全景容器組件對應的場景和相機進行初始化；場景和相機的初始化過程包括：在mounted周期回調過程中調用new THREE.Scene()對場景進行初始化，調用new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000)對相機進行初始化，并設置視錐體的垂直視野角為75度、長寬比跟窗口自適應、近平面1、遠平面1000，模擬人眼的視覺；

S3：當各圖表組件均被掛載至頁面上后，根據每個圖表組件生成場景對象，并將生成的場景對象添加至對應的場景內；步驟S3具體包括：當前、后、左和右四個方向的圖表組件均被掛載至頁面上后，每一個方向的圖表組件均調用new THREE.CSS3DObject()生成四個方向的場景對象，并設定前、后、左和右四個方向的position分別為[0, 0, 512]、[0, 0, -512]、[512, 0, 0]和[-512, 0, 0]，設定前、后、左和右四個方向的rotation分別為[0,Math.PI, 0]、[0, 0, 0]、[0, -Math.PI/2, 0]和[0, Math.PI/2, 0]，調用場景的add方法將生成的四個方向的場景對象添加至場景內；

S4：初始化全景容器組件的渲染器，并設置渲染效果的寬和高，通過渲染器將各圖表組件重新渲染出全景效果，將渲染器掛載至頁面內；渲染器通過調用newTHREE.CSS3DRenderer()進行初始化；渲染效果的寬和高的范圍通過將props接收到的用于場景展示的寬和高作為參數，調用渲染器的setsize方法進行設定；渲染器通過調用全景容器組件的appenChild方法將渲染器的domElement掛載到頁面上；

S5：全景容器組件調用addEventListener對用戶鼠標操作事件進行綁定，使全景效果跟著鼠標的拖動進行轉動；

S6：將接收到的用于場景展示的寬和高作為參數調用requestAnimationFrame（），根據幀速率反復觸發requestAnimationFrame（）來調整相機的位置；

S7：頁面顯示全景圖表效果。

2.根據權利要求1所述的基于Threejs生成全景圖表的方法，其特征在于：步驟S1中圖表組件的掛載過程包括：全景容器組件通過props接收前、后、左和右四個方向的圖表組件，在created周期回調過程中，利用import函數加載四個方向的圖表組件，加載后觸發then回調，在then回調里面通過vue框架的Vue.extend創建構造器并調用$mount動態將四個方向的圖表組件分別掛載到全景容器組件的front、back、left、right四個節點下。

3.根據權利要求1所述的基于Threejs生成全景圖表的方法，其特征在于：全景容器組件掛載的過程包括：

S101：在HTML頁面中預留全景容器組件Dom的掛載點，將全景容器組件以自定義標簽的形式寫在掛載點處；

S102：調整全景容器組件的位置，并設定其對應的width和height屬性；

S103：將全景容器組件內需要渲染的前、后、左和右四個方向的圖表組件的存儲路徑填寫在標簽front、back、left和right的屬性內。

4.根據權利要求1所述的基于Threejs生成全景圖表的方法，其特征在于：步驟S5對用戶鼠標操作事件綁定的過程包括：

當用戶觸發鼠標擊下事件時，在鼠標不釋放的情況下監聽鼠標移動事件，并通過上下左右移動做出相應的角度補償，確定中心視角的x、y、z參數，調用相機的lookAt()方法重新設定相機視角的位置，以接收到場景偏移的反饋；

當用戶觸發鼠標擊起事件時，則移除鼠標擊下和鼠標移動，場景視角不再變化；

當用戶觸發鼠標滾輪事件時，通過事件的event.deltaY確定鼠標滾輪的滾動方向為向下滾動或向上滾動，設定相機靠近或遠離，并調用相機的updateProjectionMatrix()方法更新場景。