劉曉林 牛德雄

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

DOI：10.19644/j.cnki.issn2096-1472.2022.002.013

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

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

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

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

2? ?需求分析（Requirement analysis）

2.1? ?需求概述

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

2.2? ?功能需求

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

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

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

（4）場景互動介紹：點(diǎn)擊下方菜單的“點(diǎn)贊”按鈕，可以實(shí)時(shí)地為全景視圖點(diǎn)贊互動，提升區(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工具操作簡單，非常實(shí)用，通過導(dǎo)入全景圖、設(shè)置交互熱點(diǎn)、微調(diào)與導(dǎo)出幾個(gè)步驟即可直接生成HTML5、Flash、QuickTime等格式的全景。Pano2vr對PC機(jī)、iOS的支持比較好，對Android的支持表現(xiàn)不佳。Pano2vr工具需要購買授權(quán)碼才可商用，非免費(fèi)。

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

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

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

經(jīng)過比較，Three.js具有拓展性高、兼容性高、開發(fā)成本低、性能高并且免費(fèi)的幾大優(yōu)勢，結(jié)合需求調(diào)研結(jié)果，相對更符合本項(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針對手機(jī)、游戲主機(jī)等嵌入式設(shè)備的版本。

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

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

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

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

其中，相機(jī)拍攝處理數(shù)據(jù)的方法是以相機(jī)角度作為場景起源的所有頂點(diǎn)坐標(biāo)，通過矩陣計(jì)算將世界坐標(biāo)轉(zhuǎn)換成相對于相機(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ī)相反的方向移動的。

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

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

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

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

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

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

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

//創(chuàng)建場景

var scene = new THREE.Scene（）;

（2）向場景中添加參數(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）

}）;

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

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

scene.add（campusObject）;

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

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

首先要創(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)建渲染器

渲染器用來設(shè)定渲染的結(jié)果會在頁面的什么元素上面呈現(xiàn)，以及按什么規(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來判斷手指劃過的距離，并以此計(jì)算出相機(jī)應(yīng)該在x軸和y軸方向上各移動多少角度。一般不考慮z軸，因?yàn)橄鄼C(jī)默認(rèn)的是由+z至-z拍攝，z軸轉(zhuǎn)動只會讓視線變斜。

監(jiān)聽陀螺儀：陀螺儀也分為x軸（beta：-180°至+180°）、y軸（gamma：-90°至+90°）、z軸（alpha：0°至360°）。先通過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（）;

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

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

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

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

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

[2] 姚軍，黨智軍，胡琳卿.VR技術(shù)在高校校園中的應(yīng)用[J].中國科技信息，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)頁上渲染3D圖形和動畫）[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.

作者簡介：

劉曉林（1978-），男，碩士，高級工程師.研究領(lǐ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全景展示移動Web應(yīng)用項(xiàng)目”資助.

2555500520268