劉曉林 牛德雄

文章編號：2096-1472（2022）-02-55-04

DOI：10.19644/j.cnki.issn2096-1472.2022.002.013

摘? 要：隨著5G網絡服務的商用，對網絡帶寬要求高的虛擬現實應用迎來快速發(fā)展期。用戶訪問虛擬現實應用通常需要專門的虛擬設備或安裝手機應用軟件，而使用萬維網虛擬現實技術，用戶訪問網頁鏈接就可以體驗到虛擬現實應用，極大地降低了虛擬現實應用的使用門檻。基于高拓展、高兼容、低開發(fā)成本、高性能且免費的萬維網虛擬現實開發(fā)框架技術，結合學校教學成果展示的需求，開發(fā)一套萬維網虛擬現實全景應用，就能實現智能手機上無須安裝軟件即可身臨其境地訪問學校的教學成果。利用這套技術方案開發(fā)萬維網虛擬現實全景應用還可以廣泛應用于教育、旅游、商業(yè)等行業(yè)的宣傳與體驗活動。

關鍵詞：虛擬現實;全景;萬維網;5G;萬維網圖形庫

中圖分類號：TP399? ? ?文獻標識碼：A

Design and Implementation of Virtual Reality Panorama?Application on World Wide Web

LIU Xiaolin， NIU Dexiong

（Guangdong Polytechnic of Science and Technology， Zhuhai 519090， China）

9192205@qq.com; 178074603@qq.com

Abstract： With the commercialization of 5G network services， virtual reality applications with high network bandwidth requirements usher in a period of rapid development. Users' access to virtual reality applications usually need special virtual equipment or installation of mobile phone applications. While using World Wide Web virtual reality technology， users can experience virtual reality applications by accessing web links， which greatly reduces the threshold for using virtual reality. Considering the need for teaching achievements display， this paper proposes to develop a set of World Wide Web virtual reality panorama applications， which can realize immersive access to school achievements without installing software on smart phones. The development is based on free World Wide Web virtual reality development framework technology， which is of high expansion， high compatibility， low development cost， and high performance. The proposed World Wide Web virtual reality panorama applications with this set of technical solutions can also be widely used in publicity and experience activities such as education， tourism， commerce and other industries.

Keywords： virtual reality; panorama; World Wide Web; 5G; WebGL

1? ?引言（Introduction）

隨著5G網絡服務的商用，對網絡帶寬要求高的虛擬現實應用迎來了快速發(fā)展期。用戶訪問虛擬現實應用通常需要專門的虛擬設備或安裝手機應用軟件，而使用Web虛擬現實技術，用戶只要訪問網頁鏈接就可以體驗到虛擬現實應用，大大降低了使用門檻，擴大了應用范圍。

對比多種全景漫游制作技術方案，其中Three.js框架是基于原生WebGL封裝運行的三維引擎，具有拓展性高、兼容性好、開發(fā)成本低、性能優(yōu)且免費的幾大優(yōu)勢，相對更符合本項目需求的特點。利用Three.js框架可以制作出酷炫的3D動畫，還可以通過鼠標、鍵盤、拖拽等事件形成交互，增加一些三維動畫和三維交互可以產生更好的用戶體驗。通過Three.js框架實現全景視圖應用在房產、家裝行業(yè)能夠帶來更直觀的視覺體驗;應用在電商行業(yè)可以實現產品的三維效果，讓用戶可以360 度全方位地體驗商品，給用戶帶來更好的購物體驗;還可以開發(fā)微信小游戲等。隨著應用技術的發(fā)展、基礎網絡的建設，Web虛擬現實技術還能得到更廣泛的應用。

2? ?需求分析（Requirement analysis）

2.1? ?需求概述

通過需求調研，結合學?！霸浦懈呗殹钡闹黝}，確定選擇學校計算機學院一樓智慧展廳作為展示對象，以VR全景形式在線上進行展示。手機上無須安裝App就能隨時隨地訪問，身臨其境地參觀展廳。

2.2? ?功能需求

（1）場景預覽介紹：從中心區(qū)域的俯視圖開始，然后會自動過渡到平視圖，并且開始自動漫游。

（2）場景交互：用戶可以與系統(tǒng)交互，選擇自己關注的區(qū)域進行縮放全景瀏覽，在界面上放大縮小拉近視圖，可以訪問更多詳細的區(qū)域。點擊展廳標注點的圖片可以放大全屏展示，點擊展廳的視頻標注可打開播放視頻，還可以訪問線上介紹展示的資料數據。

（3）場景分享介紹：點擊下方菜單的“分享”按鈕，生成二維碼圖片，用戶可以通過分享的二維碼進行掃碼訪問全景視圖。

（4）場景互動介紹：點擊下方菜單的“點贊”按鈕，可以實時地為全景視圖點贊互動，提升區(qū)域熱度。

（5）設備模式切換介紹：默認展示的視角是手機VR全景視圖，點擊右上角的“設備”按鈕，可以配合VR頭戴設備進行全景預覽，視覺體驗更加真實，用戶體驗更加良好。

（6）音效開關：點擊右上角的音效按鈕，可以打開/關閉音效。

3? ?技術選型與設計（Technical selection and design）

首先，最為常用的全景漫游制作工具是Pano2vr和Krpano。

（1）Pano2vr工具操作簡單，非常實用，通過導入全景圖、設置交互熱點、微調與導出幾個步驟即可直接生成HTML5、Flash、QuickTime等格式的全景。Pano2vr對PC機、iOS的支持比較好，對Android的支持表現不佳。Pano2vr工具需要購買授權碼才可商用，非免費。

（2）Krpano工具功能強大完善，各平臺兼容性高，拓展性很強，各類VR場景特效都可支持。但它需要使用Krpano xml編程語言，沒有圖形用戶界面，新手上手及后期維護成本較大，雖然生成的全景漫游專業(yè)，但對載入速度、內存占用都有影響。若想做高階、個性化、定制化全景漫游項目，Krpano工具是最好的選擇。Krpano工具需要購買授權碼才可商用，非免費。

（3）Three.js框架是GitHub的一個開源項目，是使用JavaScript語言編寫3D程序的框架，具有拓展性高、兼容性好、開發(fā)成本低、高性能且免費的幾大優(yōu)勢。

Flash、QuickTime以及基于Java、JavaScript語言開發(fā)的其他方式不一一具體說明，大致的優(yōu)劣勢對比如表1所示（具體評分僅供參考，軟件版本更新也許會有各方面的升級）。

經過比較，Three.js具有拓展性高、兼容性高、開發(fā)成本低、性能高并且免費的幾大優(yōu)勢，結合需求調研結果，相對更符合本項目需求的特點。

Three.js技術體系如圖1所示。

（1）Three.js是基于WebGL的JavaScript開源框架，因其易用性好而被廣泛使用。

（2）WebGL是一種JavaScript的3D圖形接口，基于OpenGL ES 2.0。OpenGL ES 2.0是OpenGL針對手機、游戲主機等嵌入式設備的版本。

（3）OpenGL是開放式圖形標準，跨編程語言、跨平臺，C、C++、Java、JavaScript、Python等都能支持OpenGL，很多CAD制圖軟件都采用這種標準。

（4）Canvas是HTML5的畫布元素，在使用Canvas時，需要用到Canvas的上下文，可以用2D上下文繪制二維的圖像，也可以使用3D上下文繪制三維的圖像，其中3D上下文就是指WebGL。

使用Three.js框架的場景（scene）、相機（camera）和渲染器（renderer）三個組件進行處理，把物體渲染到網頁上展示。場景是容器，把物體放置在構建的3D場景中的具體位置上;相機對著場景拍攝，拍攝結果通過渲染器實時地繪制在瀏覽器上，如圖2所示。

立方體網格模型和光照組成了一個虛擬的三維場景。虛擬相機就像生活中使用的相機一樣可以拍照，只不過是拍攝虛擬的景物，拍攝一個物體的時候需要設置相機的位置、角度和投影方式。創(chuàng)建好一個三維場景，配置好相機，按下“快門”，通過渲染器進行拍照，執(zhí)行渲染操作后就生成了渲染結果投影圖。

其中，相機拍攝處理數據的方法是以相機角度作為場景起源的所有頂點坐標，通過矩陣計算將世界坐標轉換成相對于相機位置和方向的觀察視圖坐標。定義相機時，需要根據它在世界空間中的位置及它所看的方向、指向相機右側的向量和指向相機上方的向量，創(chuàng)建一個以相機的位置作為原點的三維垂直坐標系統(tǒng)，如圖3所示。

矩陣的最大好處就是基于坐標空間的三個軸，再加上一個位置向量就能建立一個變換矩陣。用這個矩陣乘上任何位置向量都可以將這個位置向量轉換到觀察坐標系中。觀察矩陣LookAt的計算如下式所示：

R表示右方（Right）向量，U表示上方（Up）向量，D表示光線方向，P表示位置向量。注意，位置向量需要取它的反方向，因為物體是朝著攝像機相反的方向移動的。

總之，使用攝像機的位置、攝像機的觀察目標（可以生成光線方向），以及世界空間的右方向量、上方向量這些數據，通過計算就可以生成任意的觀察矩陣;相機位置移動，重新計算就可以生成動態(tài)圖像，實現在虛擬現實場景中移動的效果。

使用Three.js開發(fā)Web虛擬現實全景應用的核心流程如圖4所示。

4? ?系統(tǒng)實現（System implementation）

創(chuàng)造一個球體，并在其表面貼上專門的智慧校園展廳素材圖，然后將相機放在球體的中心，監(jiān)聽手指拖動或者陀螺儀移動來改變相機的方向，從而實現全景圖。通過下面這一行代碼先引入Three.js文件，然后按步驟實現虛擬現實全景應用。

<script src="https：//threejs.org/build/three.min.js"></script>

（1）創(chuàng)建場景

場景即是畫布，是所有物體（object）的容器。在最開始的時候對場景實例化，將準備好的物體都添加到場景中即可。

//創(chuàng)建場景

var scene = new THREE.Scene（）;

（2）向場景中添加參數

//生成一個球體，并讓相機位于它的中心

var geometry = new THREE.SphereGeometry（500， 60， 40）;

geometry.scale（-1，1，1）;

//添加材質：把準備好的背景圖添加到材質上。

var material = new THREE.MeshBasicMaterial（{

map： new THREE.TextureLoader（）.load（opt.url）

}）;

//場景中添加已準備好的物體。

var campusObject = new THREE.Mesh（geometry， material）;

scene.add（campusObject）;

（3）創(chuàng)建相機

用戶是通過相機來查看在sence下的三維場景的。在Three.js里包含了正交投影照相機（Orthographic Camera）和透視投影照相機（Perspective Camera）兩種相機，從模擬人眼看物體的方式來選擇，透視投影照相機更適合。相機需要傳的四個參數分別是fov（相機攝像角度，可用于放大和縮小）、width/height（寬高比）、near（近距離界限）、far（遠距離界限），如圖5所示。

首先要創(chuàng)建一個相機：

var camera = new THREE.PerspectiveCamera（45， width/height， 1， 100）; //創(chuàng)建相機

（4）設置相機參數

設置相機的位置與相機的面向。

camera.position.set（5，10，25）; // 設置相機的位置

camera.lookAt（new THREE.Vector3（0， 0， 0））; // 相機看向原點

（5）創(chuàng)建渲染器

渲染器用來設定渲染的結果會在頁面的什么元素上面呈現，以及按什么規(guī)則來渲染。

/* 渲染器 */

var renderer = new THREE.WebGLRenderer（{antialias：true}）;

renderer.setPixelRatio（window.devicePixelRatio）;

renderer.setSize（opt.width， opt.height）;

canvas = renderer.domElement;

（6）添加canvas元素

opt.container.appendChild（canvas）; // 添加canvas

監(jiān)聽滑動：通過監(jiān)聽touchstart、touchmove、touchend來判斷手指劃過的距離，并以此計算出相機應該在x軸和y軸方向上各移動多少角度。一般不考慮z軸，因為相機默認的是由+z至-z拍攝，z軸轉動只會讓視線變斜。

監(jiān)聽陀螺儀：陀螺儀也分為x軸（beta：-180°至+180°）、y軸（gamma：-90°至+90°）、z軸（alpha：0°至360°）。先通過window、orientation判斷是否支持陀螺儀，如果支持就監(jiān)聽陀螺儀事件，并把變化的角度傳給相機。

（7）進行渲染

Three.js框架中的requestAnimationFrame（實時渲染）能讓canvas實時更新，進行相機視角變化后的渲染。

// 實時渲染

var render = function （） {

requestAnimationFrame（ render ）;

lat -= orientLat;

lon -= orientLon;

camera.rotation.x = lat * Math.PI / 180;

camera.rotation.y = lon * Math.PI / 180;

camera.rotation.z = 0;

renderer.render（scene， camera）;

};

render（）;

利用智慧校園展廳的素材，通過上述Web虛擬現實全景應用開發(fā)流程開發(fā)完成的校園Web虛擬現實全景應用，可以體驗到身臨其境的效果，也可以進行交互。智能運營中心視角如圖6（a）所示，前方視角如圖6（b）所示。

5? ?結論（Conclusion）

基于Three.js開發(fā)的Web虛擬現實全景應用，具有拓展性高、兼容性好、開發(fā)成本低、性能高的優(yōu)點。基于Three.js開發(fā)的校園移動Web虛擬現實全景應用已成功發(fā)布到學校官網信息中心“云中廣科”智慧校園建設成果展示欄目，以Web虛擬現實全景的形式向社會展示，實現了在智能手機上不安裝App就能隨時隨地訪問，身臨其境地參觀展廳的展示內容?；赥hree.js開發(fā)Web虛擬現實全景應用的技術可以推廣用于許多學校的成果展示，以及企業(yè)產品的展示營銷。

參考文獻（References）

[1] 馮武鋒，高杰，徐卸土，等.5G應用技術與行業(yè)實踐[M].北京：人民郵電出版社，2020：55.

[2] 姚軍，黨智軍，胡琳卿.VR技術在高校校園中的應用[J].中國科技信息，2019（10）：69-70.

[3] w3sft.走進3D的奇妙世界[EB/OL].（2019-12-05）[2021-11-27].https：//zhuanlan.zhihu.com/p/95463367.

[4] 王延朝.基于Krpano的三維全景系統(tǒng)的開發(fā)和應用[D].上海：華東師范大學，2012.

[5] （美）喬斯·德克森.Three.js開發(fā)指南（基于WebGL和HTML5在網頁上渲染3D圖形和動畫）[M].3版.周翀，張薇，譯.北京：機械工業(yè)出版社，2019：24.

[6] 趙海鵬，周楊，卞和方.基于Three.js的三維虛擬校園系統(tǒng)設計與實現[J].蘭州交通大學學報，2019，38（3）：85-94.

[7] KRAIS24.OpenGL相機[EB/OL].（2021-07-29） [2021-11-24].https：//blog.csdn.net/krais_wk/article/details/119182495.

[8] LIU D W， PENG J， WANG Y Y， et al. Implementation of interactive three-dimensional visualization of air pollutants using WebGL[J]. Environmental Modelling & Software， 2019， 114（04）：188-194.

[9] 如何用Three.js快速實現全景圖[EB/OL].（2019-11-08）[2021-11-24].https：//zhuanlan.zhihu.com/p/40881782.

作者簡介：

劉曉林（1978-），男，碩士，高級工程師.研究領域：移動應用開發(fā)，虛擬現實，IT項目管理.

牛德雄（1965-），男，碩士，副教授.研究領域：Web開發(fā)，軟件工程，需求工程.

基金項目：由廣東科學技術職業(yè)學院發(fā)展建設專題（XJJS202008）“VR全景展示移動Web應用項目”資助.

2555500520268