圖片

開發(fā)棋類游戲，需要實(shí)現(xiàn)鼠標(biāo)控制棋子的功能，使得游戲能夠?qū)⑹髽?biāo)在屏幕上的位置準(zhǔn)確地映射到棋盤上的對應(yīng)落子點(diǎn)。

如果開發(fā)的是2D游戲的話，實(shí)現(xiàn)就比較簡單，鼠標(biāo)屏幕坐標(biāo)和棋盤都是二維平面。就像下圖圍棋所示，可以根據(jù)xy坐標(biāo)表示鼠標(biāo)的位置，同時(shí)圍棋落子點(diǎn)的坐標(biāo)也可以計(jì)算得出xy坐標(biāo)，這樣很輕松地就能實(shí)現(xiàn)鼠標(biāo)位置和圍棋落子點(diǎn)坐標(biāo)的映射和距離比較。

圖片

如果開發(fā)的是3D游戲，這個(gè)問題就不那么好處理了，增加一個(gè)維度意味著復(fù)雜度的增加。玩家可以通過變換攝像機(jī)從不同角度觀察場景中的物體，這樣也會導(dǎo)致物體在觀察空間下的坐標(biāo)發(fā)生變化，那么在3D場景中怎么樣才能從二維屏幕中的鼠標(biāo)位置得出鼠標(biāo)點(diǎn)中哪個(gè)物體以及點(diǎn)中物體的具體坐標(biāo)呢？對于圍棋游戲來說就是怎么判斷鼠標(biāo)點(diǎn)中位置最接近圍棋盤中具體哪個(gè)落子位置呢？

先來梳理一下思路，圍棋棋盤放置到3D空間中的位置是固定的，也就是說圍棋棋盤每個(gè)交叉點(diǎn)的xyz坐標(biāo)可以認(rèn)為是已知的。那么如果能得到鼠標(biāo)屏幕位置對應(yīng)3D空間中棋盤的坐標(biāo)，那么判定鼠標(biāo)在棋盤落子點(diǎn)的哪個(gè)位置就自然不是問題了。

下圖是計(jì)算機(jī)圖形學(xué)中的視錐體模型，描述的是觀察者（攝像機(jī)）在視角下可見的空間范圍，前后兩個(gè)平面分別是近平面和遠(yuǎn)平面，這里可以近似認(rèn)為近平面就是計(jì)算機(jī)屏幕，如果從觀察者到屏幕鼠標(biāo)做一條射線，通過計(jì)算射線和圍棋平面的交點(diǎn)就可以得出鼠標(biāo)位置點(diǎn)擊到的棋盤坐標(biāo)，這樣就可以拿射線交點(diǎn)坐標(biāo)和圍棋棋盤坐標(biāo)一一比較得出更接近哪個(gè)落子點(diǎn)了。

圖片

關(guān)于射線和平面的求交算法這里不做講解，如果有興趣請查閱圖形學(xué)相關(guān)的資料進(jìn)行查閱。像Babylon.js這樣的3D框架已經(jīng)實(shí)現(xiàn)了創(chuàng)建射線、求射線和網(wǎng)格交點(diǎn)這些算法，這里介紹如何使用Babylon.js的提供的API來實(shí)時(shí)跟蹤鼠標(biāo)位置，并獲取觀察者到鼠標(biāo)射線與場景中物體的交點(diǎn)坐標(biāo)。

圖片

主要用到的API是scene.pick方法，scene是空間場景Scene類的實(shí)例。關(guān)于pick方法及參數(shù)說明如下：

pick(x, y, predicate?, fastCheck?, camera?, trianglePredicate?) 方法用于從屏幕上的指定位置（x, y）拾取對象。以下是該方法參數(shù)的詳細(xì)解釋：

x, y：這兩個(gè)參數(shù)指定了屏幕上的坐標(biāo)，用于確定拾取操作的起點(diǎn)。這些坐標(biāo)通常是鼠標(biāo)事件中獲取的，表示用戶點(diǎn)擊或觸摸屏幕的位置。

predicate?（可選）：這是一個(gè)過濾函數(shù)，允許你自定義拾取邏輯。它接受一個(gè)AbstractMesh對象作為參數(shù)，并返回一個(gè)布爾值。如果返回true，則該網(wǎng)格會被考慮在內(nèi)進(jìn)行拾取；如果返回false，則該網(wǎng)格會被忽略。這個(gè)參數(shù)可以用來排除某些對象，或者只拾取特定類型的網(wǎng)格。例如，你可以設(shè)置一個(gè)predicate來忽略不可見的網(wǎng)格或者只拾取特定標(biāo)簽的網(wǎng)格。

fastCheck?（可選）：這是一個(gè)布爾值參數(shù)，用于優(yōu)化拾取性能。如果設(shè)置為true，Babylon.js將跳過一些檢查，從而加快拾取速度，但可能會降低拾取的準(zhǔn)確性。默認(rèn)值為false，意味著執(zhí)行完整的拾取檢查。

camera?（可選）：這個(gè)參數(shù)允許你指定一個(gè)特定的相機(jī)來進(jìn)行拾取操作。如果不提供，將使用場景中的默認(rèn)相機(jī)。這在多相機(jī)場景中特別有用，你可以指定哪個(gè)相機(jī)的視角用于拾取。

trianglePredicate?（可選）：這是一個(gè)更細(xì)粒度的過濾函數(shù)，用于在三角形級別上控制拾取邏輯。它接受四個(gè)參數(shù)：三個(gè)表示三角形頂點(diǎn)的向量和一個(gè)射線對象。返回一個(gè)布爾值，決定是否拾取該三角形。這個(gè)參數(shù)可以用來實(shí)現(xiàn)更復(fù)雜的拾取邏輯，比如只拾取面向攝像機(jī)的三角形。

pick方法返回一個(gè)PickingInfo對象，其中包含了拾取操作的結(jié)果，例如拾取的網(wǎng)格、距離、撞擊點(diǎn)等信息。如果沒有拾取到任何對象，則返回null。

下面的示例代碼展示了監(jiān)測鼠標(biāo)的實(shí)時(shí)移動，通過pick方法獲取射線與網(wǎng)絡(luò)的相交信息，還可以判斷相交的網(wǎng)絡(luò)名稱，如果相交的網(wǎng)格是圍棋棋盤則簡單打印了交點(diǎn)的坐標(biāo)信息?？梢娡ㄟ^Babylon.js提供的API可以非常輕松地實(shí)現(xiàn)鼠標(biāo)和3D場景的交互操作，激發(fā)自己的創(chuàng)意并借助框架提供的能力可以輕松地開發(fā)出有趣的3D應(yīng)用。

// 監(jiān)測鼠標(biāo)的實(shí)時(shí)移動
scene.onPointerMove = function castRay() {
  // (scene.pointerX, scene.pointerY)為鼠標(biāo)實(shí)時(shí)屏幕坐標(biāo)
  var hit = scene.pick(scene.pointerX, scene.pointerY)
    // hit.pickedMesh表示射線與場景的物體有相交
    // hit.pickedMesh.name表示相交物體的name屬性值
  if (hit && hit.pickedMesh && hit.pickedMesh.name == "goboard"){
      //hit.pickedPoint表示射線與場景中物體相交點(diǎn)的坐標(biāo)
    console.log(hit.pickedPoint.x, hit.pickedPoint.y, hit.pickedPoint.z)                   
  }
}

參考文獻(xiàn)

[1]. https://doc.babylonjs.com/typedoc/classes/BABYLON.Scene#pick
[2]. https://doc.babylonjs.com/features/featuresDeepDive/mesh/interactions/picking_collisions/