基于Unity3D 的Web 3D 全景交互技術實現

楊紹清 劉伯艷

（河南職業技術學院，河南 鄭州450046）

1 概述

720°全景交互技術，也可以稱作VR 技術的一種，是由一張全景貼圖而不是維立體模型作為場景。本文以一個房地產小區規劃全景展示作為案例實現如下功能：建立360°全景交互場景，實現手動720°視角旋轉、雙手指縮放場景，添加三個按鈕可以篩選場景中交通周邊、醫療配套、商業休閑標簽指示，最終發布為web 版，掛在服務器于手機端測試。

2 技術簡介

技術工具本文用的是Unity3d 平臺以及C# 開發語言，Unity3d 是一個專門用于搭建3D 美術場景并實現場景交互的游戲引擎，最大的特點是場景渲染效果逼真、交互開發簡單易上手，多平臺發布，同類的還有UE5（Unreal 5），渲染效果好，但開發語言較難，本文主要使用的軟件工具有Photoshop、3ds Max、Unity 3D。

3 實現步驟

3.1 搭建全景交互場景

三維場景搭建:a.在三維軟件中，我們將全景貼圖無縫貼在這球體模型上，把攝像機放在球體內部即可。首先借助3Dmax創建一個標準球體，該球體模型所有面需要做法線翻轉處理，保持內部可見。導出FBX 格式，將該球體模型導入Unity 創建好的場景中；b.準備一張做好的全景貼圖，全景貼圖的生成辦法可以用全景360 度攝像機拍攝，使用工具PTGui 或Pano2VR 拼接，在三維軟件（3Dmax，Maya）中渲染成為全景720°的全景貼圖，細節不再敘述。本案例是一張街道全景圖，為了后期能夠用按鈕交互顯示街景的建筑分類，在Photoshop 中將貼圖上建筑對應的分類標注上去，再導入Unity 中命名為Original_Texture。c.創建空物體命名VR3D360，創建一個球作為其子物體命名SphereInside，在其Inspector 面板改變網格為Sphere_001；創建材質球命名360 VRMaterials，改變其Shader 為Unlit/Texture 或者（Transparent），此時將該材質的貼圖指定為Original_Texture。這時候我們已經看到場景中一個球體被一個全景圖包裹。d.創建攝像機，這里使用默認的攝像機MainCamera，本案例中需要一個攝像機作為我們觀察全景交互的“眼睛”。

3.2 交互面板設計

使用Unity 中的UGUI 創建交互框架，在Hierarchy 面板中，創 建 三 個 Button， 分 別 命 名 為 Traffic surround_Button、Education_Button、Business_Button，同時將設計好的按鈕圖標放在Button 組件中，并設置Text 為目標名稱。若發布web 移動端，需考慮按鈕的自適應問題，這里需要設置按鈕的Rect Transform，在Anchor Presets 中將按鈕固定在屏幕某側，這里固定在了左側。

3.3 交互功能實現

本案例的主要交互功能有：a.手指滑動實現720 度視角旋轉b.雙指同時擴展收縮控制場景的放大縮小，視角遠近交互。c.按鈕交互實現場景建筑標簽切換標簽。

3.3.1 手指滑動旋轉視角

以移動端的觸摸交互為案例，單手滑動旋轉視角的腳本思路為：首先檢測用戶是否單手觸摸滑動，如果是移動觸摸狀態，獲取鼠標在屏幕上X 和Y 方向的滑動數據，讓該數據與攝像機旋轉的角度關聯起來。創建C# 腳本并命名，將腳本綁定于Main Camera 之上，即滑動旋轉視角速度，水平方向旋轉速度為xSpeed，豎直方向旋轉速度為ySpeed，單手滑動視角旋轉數據的核心代碼：

將得到的x 和y 轉換為四元數賦值給主攝像機的Transform組件中的rotation，即可實現單手觸摸并移動帶動視角旋轉，注意，攝像機水平方向的旋轉值x 可以沒有范圍限制，但是豎直方向y 的值應該有所限制，否則用戶很難回歸正常視角，限制攝像機y 方向角度的核心代碼如下：

此處在調用該函數時，angle 是手動滑動獲取到的值，本案例給與的min 是20 度，max 是80 度供參考，該函數返回一個新y 值，y 最終介于20-80 之間。

3.3.2 雙指控制視角縮放

該功能本質上是檢測到用戶雙手觸摸并移動，再計算是放大還是縮小移動，好讓攝像機做出對應反應。首先系統需要檢測到觸摸點數量大于1（Input.touchCount > 1），然后驗證兩個觸摸手指都在移動(Input.GetTouch(0).phase == TouchPhase.Moved|| Input.GetTouch(1).phase == TouchPhase.Moved)，如果兩個條件都成立，那么就說明用戶正在多指觸摸并移動，這里只計算前兩個手指觸摸坐標。檢測了雙指觸摸移動，創建函數命名為isEnlarge 判斷雙指是做放大移動還是縮小移動。該函數通過比較兩手指觸摸起點距離（leng1）和滑動結束點的距離（leng2）大小，從而判斷是張開還是收縮，核心代碼如下：privatebool isEnlarge (Vector2 oldP1, Vector2 oldP2, Vector2 newP1, Vector2 newP2)//計算雙指滑動前后的距離變化{ //函數傳入上一次觸摸兩點的位置與本次觸摸兩點的位置計算出用戶的手勢float leng1 = Mathf.Sqrt((oldP1.x- oldP2.x) * (oldP1.x- oldP2.x) + (oldP1.y- oldP2.y) * (oldP1.y- oldP2.y));//勾股定理計算兩老點之間的距離float leng2 = Mathf.Sqrt ((newP1.x- newP2.x) * (newP1.x-newP2.x) + (newP1.y- newP2.y) * (newP1.y- newP2.y));if (leng1 < leng2) //放大手勢

{ returntrue;}else{ returnfalse; //縮小手勢}}

判斷好手勢的縮放以后，創建函數控制攝像機的前后移動對應手勢縮放，但是要有最大最小移動值限制。

3.3.3 按鈕交互

該功能主要實現控制全景圖中標簽的切換，實現按鈕交互，用戶可以從地圖中篩選所關注的地點，本案例中可以幫助用戶篩選場景中“交通周邊”、“醫療配套”、“商業休閑”。同時地圖會以標簽指示出對應的建筑。該算法的基本原理是，通過偵聽按鈕事件，讓按鈕控制對應的更換場景球的貼圖的函數，核心算法：publicvoid Addlistener()

{ Changebutton[0].onClick.AddListener(onbutton0);Changebutton[1].onClick.AddListener(onbutton1);Changebutton[2].onClick.AddListener(onbutton2);}publicvoid onbutton0()

{ TheMaterial.mainTexture = BlueTexture[0];}

另外兩個按鈕代碼同上，BlueTexture[]是存儲貼圖的數組，用于存放不同標簽的全景圖，更換的地方是材質球的貼圖參數。

3.4 發布與測試

3.4.1 發布設置，本案例最終發布為web 版，用于手機移動端，Unity 允許發布為WebGL(html5)，直接發布為網頁模板。在發布測試中注意：1. 在Other Setting 中Strip Engine Code 此選項可減少未用到的代碼提高效率。如果使用了AssetBundle 加載，需取消勾選此選項。2. 這里開啟了Publishing Setting-Data Caching，幫助數據緩存的提高加載速度。

3.4.2 測試設備配置

首先部署在服務器上，測試服務器配置參數：CPU: Intel Xeon E5-2682v4，內存：4GB，寬帶5Mbps。移動設備參數：運行內存4GB，機械存儲128GB，操作系統EMUI 9.1 (基于Android 9)，處理器4 *CortexA73 2.2GHz + 4*CortexA53 1.7GHz，瀏覽器：Google Chrome。

3.4.3 測試結果與分析

a.加載速度測試，第一次開啟測試10 秒，第二次6 秒。b.效果顯示測試，UI 顯示正常、場景資源顯示正常，與發布前一致，效果良好。c.交互功能測試，按鈕測試正常，手指滑動旋轉視角正常，速度快慢需要反復調試，雙指縮放正常。

4 結論

對于傳統的平面、視頻展示效果來說，全景交互展示效果不僅僅聲音畫面結合，還具有交互性，對于風景、建筑展示非常適用。Unity3d 能夠實現自定義功能開發，能夠實現各類自定義化全景交互功能并且能夠發布多種平臺，對于VR 全景開發來說提供了技術支撐。