基于Three.js的拾取方法的研究

余莉

摘? 要： Three.js是一個由JavaScript編寫的WebGL框架，可以調(diào)用API直接在瀏覽器中創(chuàng)建和渲染三維場景。與虛擬場景進行交互的最常見方式就是鼠標拾取，點擊對象可顯示所點擊物體信息，或修改物體屬性，或激活動畫。文章先介紹了拾取的基本原理，再分析和實現(xiàn)了組合模型的拾取、外部導(dǎo)入模型的拾取以及拾取多個對象等三個方面的特殊應(yīng)用，對THREE.Raycaster對象的用法進行了詳盡的介紹，能較全面地滿足拾取在教學(xué)和虛擬現(xiàn)實中的應(yīng)用。

關(guān)鍵詞： Three.js; 拾取; THREE.Raycaster對象

中圖分類號：TP37? ? ? ? ? 文獻標識碼：A? ? ?文章編號：1006-8228（2020）06-61-04

Abstract： Three.js is a WebGL framework written with JavaScript， which can call APIs to create and render 3D scene directly in browser. The most common way to interact with the virtual scene is to pick up by the mouse. Click on object can display the information of the selected object， modify the object attributes， or activate animation. The basic principle of pick-up is introduced in this paper， and three special applications are analyzed and realized， i.e. the pick-up of group model， pick-up of external imported model and pick-up multiple objects， the usage of THREE.Raycaster object is also introduced in detail， which can meet the application of pick-up in teaching and virtual reality more comprehensively.

Key words： Three.js; pick-up; THREE.Raycaster object

0 引言

隨著前端展示技術(shù)的發(fā)展，HTML5和WebGL技術(shù)在虛擬現(xiàn)實領(lǐng)域的應(yīng)用正逐漸增多。由于瀏覽器原生支持WebGL，所以不需要安裝任何插件，即可觀看3D效果，且具有很好的跨平臺性。電腦、平板、手機等終端，只要安裝有支持HTML5的瀏覽器，即可使用。但是直接使用WebGL編程是十分復(fù)雜的，需要扎實的計算機圖形學(xué)基礎(chǔ)，學(xué)習(xí)復(fù)雜的著色器語法[1]。Three.js庫是一個由JavaScript編寫的WebGL框架，實現(xiàn)了WebGL的封裝與擴展[2]，降低了初學(xué)者開發(fā)的難度。Three.js庫及其加載器可以很方便地把JSON、OBJ等格式的三維模型加載到網(wǎng)頁中來展示，并進行光照、材質(zhì)、紋理計算后的實時渲染，用戶可使用鼠標旋轉(zhuǎn)、平移和縮放，與虛擬場景進行簡單交互[3]。

1 拾取的基本原理

瀏覽器上最常見的交互就是通過鼠標點擊三維物體，檢測實物圖形是否位于鼠標指針的下方[4]，即物體的拾取操作。選中的對象會改變顏色、可見性等屬性，如圖1所示，選中的立方體被改為紅色，或者激活對象的動畫。

拾取的過程恰好與實物圖形繪制的過程相反。由于鼠標點擊對應(yīng)的是瀏覽器的屏幕坐標（X，Y），而three.js畫布是三維場景，所以需要將屏幕點擊的二維坐標轉(zhuǎn)換為Three.js的三維坐標（X'，Y'），以確定點擊的對象模型，如圖2所示，實線坐標系為二維屏幕坐標系，左上角為原點;虛線坐標系為三維世界坐標系，中心點為原點。屏幕坐標轉(zhuǎn)換成三維場景坐標代碼如下：

var vector=new THREE.Vector3（（event.clientX/

window.innerWidth）*2-1，

-（event.clientY/window.innerHeight）*2+1，0.5）;

vector=vector.unproject（camera）;

坐標拾取的方法涉及復(fù)雜的矩陣運算[5]，好在Three.js類庫提供了THREE.Raycaster對象用于鼠標拾取，這是一個傳統(tǒng)的面向?qū)ο罂臻g的拾取方法[6]。其構(gòu)造函數(shù)為new Raycaster（origin，direction，near，far）;其中origin是光線投射的起點向量，就是camera的位置;direction是光線投射的方向向量（被歸一化）。常用方法為.intersectObject（object，recursive）;其中object是參與相交檢測的模型集合，返回值為相交模型的集合，該數(shù)組按距離排序，最接近視點的排在第一個。求交的偽代碼如下：

var raycaster=new THREE.Raycaster（camera.position，

vector.sub（camera.position）.normalize（））;

var intersects=raycaster.intersectObjects

（[參與相交檢測的模型集合]）;

if （intersects.length > 0） {

//intersects[0].object為最近的拾取對象

}

//else沒有對象被拾取到

2 特殊的拾取

2.1 組合模型的拾取

⑴ 拾取組合模型的成員

可以通過Three.js自帶的功能來組合或合并已有的幾何體，創(chuàng)建出新的幾何體[7]。如圖3（a）所示的小兔子，就是通過基本的cube、sphere組合成的兔子，可以做局部（耳朵、胳膊、腿等）以及整體的動畫。例如通過點擊兔子的耳朵，讓耳朵變長，如圖3（b）所示。設(shè)計代碼如下：

var intersects=raycaster.intersectObjects（rabbit.children）;

if （intersects.length>0） {

intersects[0].object.flag=！intersects[0].object.flag;

//單擊一次true，再一次false

}

然后在requestAnimationFrame（render）;回調(diào)的render（）函數(shù)中添加if（rabbit.ear1.flag）rabbit.ear1.scale.y*=1.01;語句。

⑵ 拾取組合模型組

但是，使用raycaster射線無法獲取組group，只能獲取組中的元素。如果我們希望點擊兔子，就能讓兔子旋轉(zhuǎn)，那么必須是點擊兔子的頭、身體或者四肢，即參與相交檢測的模型集合必須是rabbit.children，rabbit本身并不能被拾取到，如圖3（c）所示。偽代碼為：

var intersects=raycaster.intersectObjects（rabbit.children）;

if （intersects.length>0） {

if （intersects[0].object.parent==rabbit）

//如果點擊兔子的children

rabbit.flag=！rabbit.flag; //兔子被選中或者取消選中

else

//如果有其他模型被選中時的代碼

}

然后在render（）函數(shù)中添加if（rabbit.flag==rabbit） rabbit.rotation.y+=0.02;語句。

2.2 外部導(dǎo)入模型的拾取

使用基本幾何體創(chuàng)建模型的工作量較大，通過各種加載器，Three.js可以加載JSON、OBJ、STL等多種格式的模型，降低了模型制作的成本。如圖4（a）中房子的模型是用3DMAX制作的，圖4（b）中火箭是用MAYA制作的。在google chrome瀏覽器的“開發(fā)者工具”里，可以使用console.log（rocket.children）;來查看火箭模型的成員，如圖4（c）所示，該火箭是由15個部分組成的。圖4（a）中的小房子是只有一個成員的數(shù)組，見圖4（d）。外部導(dǎo)入模型的拾取方式偽代碼為：

var intersects=raycaster.intersectObjects（[其他拾取模型]

.concat（rocket.children））;

if （intersects.length>0） {

if （intersects[0].object.parent==rocket）

//如果點擊火箭的children

rocketflag=！rocketflag; //rocketflag是個全局變量

else

//如果有其他模型被選中時的代碼

}

然后在render（）函數(shù)中添加if （rocketflag） rocket.position.y+=0.02;語句，火箭就會升空。

2.3 拾取多個對象

通常情況下，拾取是選中離視點最近的那一個三維模型。但某些特殊情況下，用戶希望選中raycaster射線上所有的對象。例如在模擬一個機關(guān)槍的掃射效果時，需要選中射程上的所有對象，如圖5（a）中用鼠標表明鼠標拾取位置，并用線框標識射程上的兩個對象;圖5（b）是這兩個對象不可見后的效果。

代碼如下：

var intersects=raycaster.intersectObjects（scene.children，true）;

//第二個參數(shù)true表明對象的所有后代也參與求交，默認值為false

for （var i=0; i

intersects[i].object.visible=false;

//相交集合中所有元素都不可見

}

3 小結(jié)

本文針對于網(wǎng)頁中常見的拾取方式進行設(shè)計和實現(xiàn)，闡釋了傳統(tǒng)的基于對象空間的拾取方法的基本原理，并分別實現(xiàn)了對組合模型的拾取、外部導(dǎo)入模型的拾取和拾取多個對象等三方面的特殊應(yīng)用，能夠很好地滿足教學(xué)和虛擬現(xiàn)實中拾取的需求，因此該研究具有一定的應(yīng)用價值。下一步的工作可考慮虛擬場景漫游中碰撞檢測的快速實現(xiàn)，以及提高實時繪制性能的LOD技術(shù)的應(yīng)用等。

參考文獻（References）：

[1] 張文娟，吳瓊，曹欣然.基于WebGL的三維落葉場景仿真[J].計算機技術(shù)與發(fā)展，2018.28（6）：171-175

[2] 趙海鵬，周楊，卞和方.基于Three.js的三維虛擬校園系統(tǒng)設(shè)計與實現(xiàn)[J].蘭州交通大學(xué)學(xué)報，2019.3.

[3] 汪浩，田豐，張文俊.基于WebGL的交互平臺設(shè)計與實現(xiàn)[J].電子測量技術(shù)，2015.8：119-122

[4] 寧靜.基于WebGL實物交互技術(shù)及其實現(xiàn)的研究[D].華中科技大學(xué)，2014.

[5] 施珂奕，鄧春健，鄒昆.基于OpenGL的三維模型點坐標拾取方法[J].液晶與顯示，2016.31（7）：708-713

[6] 鄒建達，原力，毛力奮.基于Three.js的在仿真中的可視化和拾取研究[J].電腦與信息技術(shù)，2019.5.

[7] Jos Dirksen.Three.js開發(fā)指南：WebGL的JavaScript 3D庫[M].機械工業(yè)出版社，2017.