劉曉林 牛德雄

文章編號(hào)：2096-1472（2022）-02-55-04

DOI：10.19644/j.cnki.issn2096-1472.2022.002.013

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

關(guān)鍵詞：虛擬現(xiàn)實(shí);全景;萬(wàn)維網(wǎng);5G;萬(wàn)維網(wǎng)圖形庫(kù)

中圖分類號(hào)：TP399? ? ?文獻(xiàn)標(biāo)識(shí)碼：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網(wǎng)絡(luò)服務(wù)的商用，對(duì)網(wǎng)絡(luò)帶寬要求高的虛擬現(xiàn)實(shí)應(yīng)用迎來(lái)了快速發(fā)展期。用戶訪問虛擬現(xiàn)實(shí)應(yīng)用通常需要專門的虛擬設(shè)備或安裝手機(jī)應(yīng)用軟件，而使用Web虛擬現(xiàn)實(shí)技術(shù)，用戶只要訪問網(wǎng)頁(yè)鏈接就可以體驗(yàn)到虛擬現(xiàn)實(shí)應(yīng)用，大大降低了使用門檻，擴(kuò)大了應(yīng)用范圍。

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

2? ?需求分析（Requirement analysis）

2.1? ?需求概述

通過(guò)需求調(diào)研，結(jié)合學(xué)?！霸浦懈呗殹钡闹黝}，確定選擇學(xué)校計(jì)算機(jī)學(xué)院一樓智慧展廳作為展示對(duì)象，以VR全景形式在線上進(jìn)行展示。手機(jī)上無(wú)須安裝App就能隨時(shí)隨地訪問，身臨其境地參觀展廳。

2.2? ?功能需求

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

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

（3）場(chǎng)景分享介紹：點(diǎn)擊下方菜單的“分享”按鈕，生成二維碼圖片，用戶可以通過(guò)分享的二維碼進(jìn)行掃碼訪問全景視圖。

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

（5）設(shè)備模式切換介紹：默認(rèn)展示的視角是手機(jī)VR全景視圖，點(diǎn)擊右上角的“設(shè)備”按鈕，可以配合VR頭戴設(shè)備進(jìn)行全景預(yù)覽，視覺體驗(yàn)更加真實(shí)，用戶體驗(yàn)更加良好。

（6）音效開關(guān)：點(diǎn)擊右上角的音效按鈕，可以打開/關(guān)閉音效。

3? ?技術(shù)選型與設(shè)計(jì)（Technical selection and design）

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

（1）Pano2vr工具操作簡(jiǎn)單，非常實(shí)用，通過(guò)導(dǎo)入全景圖、設(shè)置交互熱點(diǎn)、微調(diào)與導(dǎo)出幾個(gè)步驟即可直接生成HTML5、Flash、QuickTime等格式的全景。Pano2vr對(duì)PC機(jī)、iOS的支持比較好，對(duì)Android的支持表現(xiàn)不佳。Pano2vr工具需要購(gòu)買授權(quán)碼才可商用，非免費(fèi)。

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

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

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

經(jīng)過(guò)比較，Three.js具有拓展性高、兼容性高、開發(fā)成本低、性能高并且免費(fèi)的幾大優(yōu)勢(shì)，結(jié)合需求調(diào)研結(jié)果，相對(duì)更符合本項(xiàng)目需求的特點(diǎn)。

Three.js技術(shù)體系如圖1所示。

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

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

（3）OpenGL是開放式圖形標(biāo)準(zhǔn)，跨編程語(yǔ)言、跨平臺(tái)，C、C++、Java、JavaScript、Python等都能支持OpenGL，很多CAD制圖軟件都采用這種標(biāo)準(zhǔn)。

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

使用Three.js框架的場(chǎng)景（scene）、相機(jī)（camera）和渲染器（renderer）三個(gè)組件進(jìn)行處理，把物體渲染到網(wǎng)頁(yè)上展示。場(chǎng)景是容器，把物體放置在構(gòu)建的3D場(chǎng)景中的具體位置上;相機(jī)對(duì)著場(chǎng)景拍攝，拍攝結(jié)果通過(guò)渲染器實(shí)時(shí)地繪制在瀏覽器上，如圖2所示。

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

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

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

R表示右方（Right）向量，U表示上方（Up）向量，D表示光線方向，P表示位置向量。注意，位置向量需要取它的反方向，因?yàn)槲矬w是朝著攝像機(jī)相反的方向移動(dòng)的。

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

使用Three.js開發(fā)Web虛擬現(xiàn)實(shí)全景應(yīng)用的核心流程如圖4所示。

4? ?系統(tǒng)實(shí)現(xiàn)（System implementation）

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

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

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

場(chǎng)景即是畫布，是所有物體（object）的容器。在最開始的時(shí)候?qū)?chǎng)景實(shí)例化，將準(zhǔn)備好的物體都添加到場(chǎng)景中即可。

//創(chuàng)建場(chǎng)景

var scene = new THREE.Scene（）;

（2）向場(chǎng)景中添加參數(shù)

//生成一個(gè)球體，并讓相機(jī)位于它的中心

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

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

//添加材質(zhì)：把準(zhǔn)備好的背景圖添加到材質(zhì)上。

var material = new THREE.MeshBasicMaterial（{

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

}）;

//場(chǎng)景中添加已準(zhǔn)備好的物體。

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

scene.add（campusObject）;

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

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

首先要?jiǎng)?chuàng)建一個(gè)相機(jī)：

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

（4）設(shè)置相機(jī)參數(shù)

設(shè)置相機(jī)的位置與相機(jī)的面向。

camera.position.set（5，10，25）; // 設(shè)置相機(jī)的位置

camera.lookAt（new THREE.Vector3（0， 0， 0））; // 相機(jī)看向原點(diǎn)

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

渲染器用來(lái)設(shè)定渲染的結(jié)果會(huì)在頁(yè)面的什么元素上面呈現(xiàn)，以及按什么規(guī)則來(lái)渲染。

/* 渲染器 */

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)聽滑動(dòng)：通過(guò)監(jiān)聽touchstart、touchmove、touchend來(lái)判斷手指劃過(guò)的距離，并以此計(jì)算出相機(jī)應(yīng)該在x軸和y軸方向上各移動(dòng)多少角度。一般不考慮z軸，因?yàn)橄鄼C(jī)默認(rèn)的是由+z至-z拍攝，z軸轉(zhuǎn)動(dòng)只會(huì)讓視線變斜。

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

（7）進(jìn)行渲染

Three.js框架中的requestAnimationFrame（實(shí)時(shí)渲染）能讓canvas實(shí)時(shí)更新，進(jìn)行相機(jī)視角變化后的渲染。

// 實(shí)時(shí)渲染

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（）;

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

5? ?結(jié)論（Conclusion）

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

參考文獻(xiàn)（References）

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

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

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

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

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

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

[7] KRAIS24.OpenGL相機(jī)[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快速實(shí)現(xiàn)全景圖[EB/OL].（2019-11-08）[2021-11-24].https：//zhuanlan.zhihu.com/p/40881782.

作者簡(jiǎn)介：

劉曉林（1978-），男，碩士，高級(jí)工程師.研究領(lǐng)域：移動(dòng)應(yīng)用開發(fā)，虛擬現(xiàn)實(shí)，IT項(xiàng)目管理.

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

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

2555500520268