共用方式為

2015 年 12 月

第 30 卷，第 13 期

本文章是由機器翻譯。

遊戲開發-Babylon.js: 針對網路建置基本遊戲

由 Raanan Weber

Babylon.js 是 WebGL 3D 引擎，焦點主要集中在遊戲的開發和易用性。做為 3D 引擎，它的工具來建立、 顯示，而且紋理網狀結構中的空間，並加入光源與數位相機。因為它是遊戲已取得焦點，Babylon.js 可定期 3D 引擎不需要一些額外功能。它有衝突偵測、 場景重力、 遊戲導向相機 (比方說，遵循-相機追蹤移動的物件)、 以及 Oculus Rift 和其他的虛擬實境 (VR) 裝置的原生支援的原生支援。它有物理引擎外掛程式系統、 音訊的原生支援、 使用者輸入為基礎的動作管理員及更多。我將探討所有這些功能在本教學課程。

本教學課程

在本教學課程中，我會開發簡單發給的保齡球比賽。我建立保齡球道、 新增 10 個球瓶和保齡球球，可讓您擲回球。遊戲一定不會準備好要發行，但它會顯示您如何開發遊戲使用 Babylon.js 所提供的工具。我故意可避免在開發期間使用任何外部工具。物件、 相機、 紋理和多個將使用 JavaScript 程式碼只會建立。

我將在本教學課程使用的 Babylon.js 版本是最新穩定版本 — 2.1。David Catuhe 和巴比倫開發團隊希望架構，與舊版相容，因此我只可以假設，本教學課程會正常在未來的版本，至少直到下一個主要版本。和我使用 Visual Studio 2015 Community Edition，但您可以使用任何您想要的 IDE。

本教學課程分成兩個部分。在本文中我將提供的基本建置組塊 Babylon.js 的概觀。我要建立網狀結構，紋理，新增相機和光源，並啟用簡單的使用者互動。在第二個部分，我將示範其中 Babylon.js 搭配物理音訊，加入衝突的使用者動作，以及特殊類型的數位相機。

入門： 新的 Babylon.js 專案

簡單的 Babylon.js 專案是靜態的網站。由於我使用 Visual Studio，我將使用本機 IIS 伺服器內嵌在 Visual Studio 中裝載這些靜態檔案。Visual Studio 不會有靜態網站範本，因此需要不同的方法。

首先，建立新的空白方案。開啟 Visual Studio，然後前往 [檔案 |新 |專案。在左的窗格，然後空白方案，選取其他專案類型，如所示 圖 1。提供給方案 (我使用 BabylonBowling) 的名稱，然後按一下 [確定]。

在 Visual Studio 中建立新的空白方案
圖 1 在 Visual Studio 中建立新的空白方案

建立新的靜態網站，請先建立新的目錄來裝載它。以滑鼠右鍵按一下空白方案，然後按一下 [在檔案總管] 中開啟資料夾中所示 圖 2。

在檔案總管] 中開啟方案的資料夾
圖 2 在檔案總管] 中開啟方案的資料夾

建立名為 BabylonBowling 專案的新目錄，並關閉檔案總管]。

以滑鼠右鍵按一下方案，然後選擇 [加入 |現有的網站。選取新建立的資料夾 (請確定您選擇您剛才建立的資料夾並不是方案的資料夾)，按一下 [開啟]。空白網站現在應為此解決方案的唯一專案。

建立專案之後，您需要新增架構和架構的相依性。有幾種可行的方式。最簡單的方法是使用 NuGet 封裝管理員。

以滑鼠右鍵按一下專案，然後選擇 [管理 NuGet 封裝。按一下 [搜尋] 欄位 (鍵盤快速鍵為 Ctrl + E)，然後輸入巴比倫。您會看到類似於視窗 圖 3。選取 BabylonJS。請確定所選取之版本 2.1 (或最新版本)，然後按一下 [安裝]。按一下 [確定] 在預覽版本中 (如果其中一個快顯) 快顯視窗及 Babylon.js 將會安裝至您的空白專案，包括示範場景。

使用 NuGet 封裝管理員新增 Babylon.js
圖 3 新增 Babylon.js 使用 NuGet 封裝管理員

對於使用 npm 封裝管理員，您可以安裝 Babylon.js 使用命令:

npm install babylonjs

安裝套件之後, 您應該在指令碼] 資料夾中有下列檔案:

  • babylon.js Babylon.js 縮製版本
  • babylon.max.js，Babylon.js 的偵錯版本
  • Oimo.js，Oimo JS 物理引擎將用於本教學課程的第二個部分
  • poly2tri.js、 選用的函數程式庫 (github.com/r3mi/poly2tri.js)
  • 手狀 minified.js，指標事件 polyfill;使用 npm 時，這是遺失，因此使用命令來安裝:
npm install handjs

NuGet 安裝程式也會建立之 index.html 檔案和 index.js 檔案。

NuGet 封裝中的錯誤會將不必要的行加入至 web.config。必須等到解決後，按兩下這個檔案，並移除以反白顯示一行 圖 4 (在我的解決方案，它的第 9 行)。

刪除反白顯示的線條從 web.config
圖 4 從 web.config 中刪除反白顯示的線條

您現在可以測試專案。預設瀏覽器使用 Ctrl + Shift + W 或按一下上方導覽列上的 [執行] 按鈕，開啟專案。如果您看到所示的 3D 太空船 圖 5, ，您的專案是所有的集合。

巴比倫預設太空船
圖 5 巴比倫預設太空船

對於使用不同的 Ide，只要遵循 「 建立基本的場景 」 教學課程 Babylon.js 文件頁面以取得目前的狀態。我還是建議使用 npm 安裝相依項目，如果未使用 NuGet。本教學課程，請參閱 bit.ly/1MXT6WP。

若要從頭開始，刪除在 index.js 函式 createScene。

建置組塊

我將討論的前兩個項目是引擎和場景。

引擎是負責與低階 WebGL API 通訊的物件 (WebGL 1 根據 OpenGL ES2 以非常類似的語法)。不會強迫您撰寫低階 WebGL 程式碼，引擎會提供更高層級和更容易瞭解的 API。它也是開發人員。除了初始專案設定] 中，我直接將不會完全使用引擎。某些較低層級功能可以使用引擎，來完成，但我不會涵蓋這。

引擎會要求兩個參數，以初始化。第一個是在其上繪製畫布。畫布是已經在 index.html 中的 HTML 項目。第二個參數是消除鋸齒的狀態 (開啟或關閉)。

開啟目前空白 index.js，並新增下列程式碼行:

function init() {
  var engine = initEngine();
}
function initEngine() {
  // Get the canvas element from index.html
  var canvas = document.getElementById("renderCanvas");
  // Initialize the BABYLON 3D engine
  var engine = new BABYLON.Engine(canvas, true);
  return engine;
}

在開發期間，我將使用 init 函式來加入新的功能，與每個步驟。建立每個項目會有它自己的函式。

若要了解場景所代表的意義，考慮使用不同的頁面的網站。單一 Web 網頁會包含文字、 影像、 事件接聽程式和其他轉譯，有一個單一頁面所需的所有資源。載入不同的網頁載入不同的資源。

如同單一網頁場景會保存所需的資源來顯示一個單一 3D 」 頁面]。 此畫面可以是非常大型的完整的資源 — 網狀結構，數位相機、 光線、 使用者動作等等。但為了各個頁面間移動到另一個，建議使用新的場景。場景也負責呈現自己的資源以及通訊引擎所需的資訊。發給的保齡球比賽需要單一場景。但如果我規劃加入新的層級或加分遊戲，我會建立使用新的場景。

若要初始化場景需要只有我建立了引擎。將下列新增至 index.js:

function createScene(engine) {
  var scene = new BABYLON.Scene(engine);
  // Register a render loop to repeatedly render the scene
  engine.runRenderLoop(function () {
      scene.render();
  });
}

首先，我建立場景物件。接下來的幾行都必須與引擎之間唯一的互動。會告訴來轉譯這個特定的場景，每次呈現迴圈執行引擎。

若要實際建立場景 init 函式結尾加入這一行程式碼:

var scene = createScene(engine);

還有兩件事情之前繼續執行。當您調整瀏覽器視窗中時，畫布也正在調整大小。引擎也必須調整其內部的寬度和高度，以保留在檢視方塊中的場景。將下列幾行加入至 initEngine 函式前，傳回的引擎。陳述式會保留在檢視方塊中的場景:

// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
  engine.resize();
});

第二件事是 alter index.html 使用新的 init 函式。開啟 index.html，並尋找包含 createScene 呼叫的指令碼標記。變更 createScene 初始化，然後儲存 index.html 並關閉它。

場景都有一個極進階偵錯層級，可讓您偵錯所呈現的場景。它會顯示所呈現的網狀結構的數字和目前的框架秒 (FPS)。它可讓您關閉功能，例如材質和遮蔽並輕鬆地找到遺失的網狀結構。開啟偵錯層很簡單:

scene.debugLayer.show();

，而且您將能夠偵錯您自己的場景。

我現在有引擎和場景，以及我已經準備好開始將攝影機、 照明和建立我保齡球道場景的網狀結構。

數位相機

Babylon.js 提供了許多類型的數位相機，每個都有各自特定的用途。選擇之前遊戲攝影機，讓我們來檢視最常見的類型:

  • 免費的相機是第一位人員-射擊相機。可以自由地移動整個場景，請使用鍵盤鍵，並使用滑鼠就可以設定方向。選擇性的重力和衝突偵測可以啟用，以及。
  • 反正旋轉相機用來繞著特定的目標。使用滑鼠、 鍵盤或觸控事件、 使用者可以檢視所有方向的物件。
  • 觸控數位相機都是免費的相機使用觸控事件，做為輸入。它是適用於所有行動平台。
  • 遵循相機會自動遵循特定的目標。

Babylon.js 支援 WebVR 」 和 「 裝置方向相機原生，這表示您可以輕鬆地解決這類裝置為 Oculus Rift 或 Google 黏貼。

2.1 版中引進的新概念可讓每個觀景窗類型 3D 已備妥。這表示，每個觀景窗類型您可以設定成 Oculus Rift 樣式立體視覺檢視和紅色藍色的眼鏡 (anaglyph 3D)。圖 6 顯示顯示 anaglyph 無數位相機用來呈現在太空船場景和 圖 7 顯示立體視覺相機的場景。

Anaglyph 3D 攝影機
圖 6 Anaglyph 3D 攝影機

立體視覺相機
圖 7 立體視覺相機

我發給的保齡球比賽，我將使用兩種類型的數位相機。首先，讓玩家主攝影機，便會將擲回保齡球球的位置。這是完全免費的網路攝影機的目的。我也想要加入不同的檢視 — 途中球時，我想要遵循它，直到它叫用的 pin。

首先，我加入免費的相機。CreateFreeCamera 函式會將場景當成單一變數:

function createFreeCamera(scene) {
  var camera = new BABYLON.FreeCamera(
    "player camera", BABYLON.Vector3.Zero(), scene);
  return camera;
}

我在我的場景的位置 0,0,0 建立鏡頭位置。稍後，我將會延長 (必要時)，此函式來進一步設定相機。

而且，當然，別忘了將它加入至結尾 init 函式:

...
// Create the main player camera
var camera = createFreeCamera(scene);
// Attach the control from the canvas' user input
camera.attachControl(engine.getRenderingCanvas());
// Set the camera to be the main active camera
scene.activeCamera = camera;

AttachControl 函式會註冊所需的特定相機 (例如滑鼠、 觸控或鍵盤輸入) 的原生 JavaScript 事件接聽程式。設定在場景 active 相機告訴至此觀景窗應該用於呈現場景。

我要加入兩個組件中的第二個相機之後啟用球擲回。

建立不限

保齡球路段甚至是相當簡單的幾何結構。首先我要設定一些常數，以公尺為單位保齡球道的實際尺寸。我使用公尺的原因是在這篇文章的第二部分將說明的物理條件引擎。

您可以看到專案檔中的常數。若要計算這些值，我會使用線上提供保齡球進行的相關資訊。

設定之後的常數，我準備好開始建立將會建構保齡球道的網狀結構。我 (2D) 計劃會顯示在 圖 8。我一開始先建立網狀結構。材質網狀結構，並可供資料 — 之後會出現。

保齡球道場景的 2D 計劃
圖 8 保齡球道場景的 2D 計劃

首先，我要建立場景全域最低限度:

function createFloor(scene) {
  var floor = BABYLON.Mesh.CreateGround("floor", 100, 100, 1, scene, false);
  return floor;
}

這會建立簡單 100 x 100 公尺的最低限度。使用內部函式會在建立的 Babylon.js 所建立的所有網狀結構放置 0,0,0 的場景，並置中對齊。有三個重要的變數會轉換網狀結構，並正確地定位在場景中:

  • mesh.position 是位置的向量的空間中的網狀結構
  • mesh.scaling 是網狀結構的每個座標軸中的縮放比例
  • mesh.rotation 會在每個座標軸，旋轉的歐的角度 (以弧度為單位)如果您更熟悉四元數 (我知道我) 時，您可以使用 mesh.rotationQuaternion

我 init 函式中加入函式，並開始在場景之後, 我發現有趣的事，看不到我加入了在地板! 原因是，相機和樓層同時建立空間 (0,0,0) 中的相同位置。因為不是完全一般，上述 (或以下)，只能檢視將它在螢幕上顯示。回到 createCamera 函式中的攝影機初始設定，變更第二個變數，也就是網路攝影機的初始位置，以新的向量，攝影機就會變成 1.7 單位 (在此情況下公尺)，在地面之上:

var camera = new BABYLON.FreeCamera(
  "cam", new BABYLON.Vector3(0,1.7,0), scene);

如果您現在啟動場景，您會看到地上延伸超過螢幕的下半部所示 圖 9。

加入至場景地板
圖 9 新增至場景地板

請嘗試四處移動箭號和滑鼠來取得控制可用的攝影機的停止回應。

您會注意到地上完全黑色。我缺乏 light! 我要加入新的函式，createLight，我稍後會將延伸。

function createLight(scene) {
  var light = new BABYLON.DirectionalLight(
    "dir01", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
  // Set a position in order to enable shadows later
  light.position = new BABYLON.Vector3(20, 40, 20);
  return light;
}

別忘了初始化加入這一行:

var light = createLight(scene);

Babylon.js 有四種類型的燈號:

  • Hemispheric: 環境光，預先定義的基本色彩 (像素，朝下)，天空色彩 (會朝像素) 和反射的色彩。
  • 點: 從單一點在所有方向中，所發出的燈號，例如太陽。
  • 點: 如同名稱所示，從特定方向和發出半徑的單一點的燈號。這樣可以發出陰影。
  • 方向: 發出的特定方向燈。太陽可能點光線，但是定向光線模擬陽光更好。指示燈也可以發出陰影，而且我用在我的範例。

現在會成為白色最低限度值。Babylon.js 會將預設白色材質指派給每一個網狀結構沒有指派的資料。

路段本身會] 方塊中，在地上剛建立的配置方式:

function createLane(scene) {
  var lane = BABYLON.Mesh.CreateBox("lane", 1, scene, false);
  lane.scaling = new BABYLON.Vector3(
    laneWidth, laneHeight, totalLaneLength);
  lane.position.y = laneHeight / 2; // New position due to mesh centering
  lane.position.z = totalLaneLength / 2;
  return lane;
}

同樣地，別忘了將此函數新增至 init。

您可以看到我如何使用調整參數 — 我建立一個方塊大小 1 x 1 x 1，並變更其調整為符合我預先定義的常數。

我使用相同的技巧，建立要做為我的裝訂邊框線 (這是什麼球都會歸類到如果擲回錯誤的方向) 的路段兩端的兩個方塊。嘗試建立您自己，並看看了我如何在隨附的專案。

保齡球 pin 碼，球

目前缺少是保齡球 pin 和球。若要建立 pin，我將使用圓柱，只是單一的圓柱，相乘多次 — 確切 10。在 Babylon.js，這類的乘積稱為執行個體。執行個體是網狀結構中，其空間中的轉換除外的完全相同複本。這表示執行個體的幾何和紋理，否則無法變更，但可以位置、 縮放和旋轉。我個人永遠不會使用原始物件中在場景中。如果我想 10 個球瓶，我將建立一個連接，停用它，並在 10 個預先定義的位置中建立 10 個執行個體:

function createPins(scene) {
  // Create the main pin
  var mainPin = BABYLON.Mesh.CreateCylinder(
    "pin", pinHeight, pinDiameter / 2, pinDiameter, 6, 1, scene);
  // Disable it so it won't show
  mainPin.setEnabled(false);
  return pinPositions.map(function (positionInSpace, idx) {
    var pin = new BABYLON.InstancedMesh("pin-" + idx, mainPin);
    pin.position = positionInSpace;
    return pin;
  });
}

使用此函式的遺漏變數位於專案檔，其中包括 pinPositions 所有 10 個球瓶的全域位置的陣列。

現在的保齡球球。保齡球球是簡單的球體，使用 3 個洞，手指。若要建立球體，我將使用 Babylon.js 提供 CreateSphere 函式:

var sphere = BABYLON.Mesh.CreateSphere("sphere", 12, 0.22, scene);

現在我需要向下切入漏洞。若要執行，我將使用稱為 「 整合到 Babylon.js 建設性實線幾何 (CSG) 的功能，可以讓我加法或減法網狀結構從現有的網狀結構，或更棒的是，增加或減去另一個幾何。也就是說，如果兩個網狀結構交集，我可以 「 移除 」 從另一個並取得已變更的網狀結構。在我的案例中，我想在球體中建立三個圓形的漏洞。圓柱會完全吻合。

首先，我建立的第一個洞，我將使用的磁柱:

var cylinder = BABYLON.Mesh.CreateCylinder(
  "cylinder", 0.15, 0.02, 0.02, 8, 1, scene, false);

接下來，我要變更的磁柱與球體交集的位置:

cylinder.position.y += 0.15;

然後，我將建立 CSG 物件，並使用它們來減少從球體的磁柱:

var sphereCSG = BABYLON.CSG.FromMesh(sphere);
var cylinderCSG = BABYLON.CSG.FromMesh(cylinder);
sphereCSG.subtractInPlace(cylinderCSG);
var ball = sphereCSG.toMesh("test", sphere.material, scene, false);

圖 10 顯示球體和磁柱的外觀，和旁邊就使用 CSG 建立保齡球球。

建立保齡球球
圖 10 建立保齡球球

圖 11 和在遊樂場 babylonjs-playground.com / #BIG0J 顯示用於從頭開始建立球的整個程式碼。

圖 11 建立使用 CSG 保齡球球

// The original sphere, from which the ball will be made
var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
sphere.material = new BABYLON.StandardMaterial("sphereMat", scene);
// Create pivot-parent-boxes to rotate the cylinders correctly
var box1 = BABYLON.Mesh.CreateBox("parentBox", 1, scene);
var box2 = box1.clone("parentBox");
var box3 = box1.clone("parentBox");
// Set rotation to each parent box
box2.rotate(BABYLON.Axis.X, 0.3);
box3.rotate(BABYLON.Axis.Z, 0.3);
box1.rotate(new BABYLON.Vector3(0.5, 0, 0.5), -0.2);
[box1, box2, box3].forEach(function (boxMesh) {
// Compute the world matrix so the CSG will get the rotation correctly
  boxMesh.computeWorldMatrix(true);
  // Make the boxes invisible
  boxMesh.isVisible = false;
});
// Create the 3 cylinders
var cylinder1 = BABYLON.Mesh.CreateCylinder(
  "cylinder", 4, 1, 1, 30, 1, scene, false);
cylinder1.position.y += 4;
cylinder1.parent = box1;
var cylinder2 = cylinder1.clone("cylinder", box2);
var cylinder3 = cylinder1.clone("cylinder", box3);
// Create the sphere's CSG object
var sphereCSG = BABYLON.CSG.FromMesh(sphere);
// Subtract all cylinders from the sphere's CSG object
[cylinder1, cylinder2, cylinder3].forEach(function (cylinderMesh) {
  sphereCSG.subtractInPlace(BABYLON.CSG.FromMesh(cylinderMesh));
});
// Create a new mesh from the sphere CSG
var ball = sphereCSG.toMesh("bowling ball", sphere.material, scene, false);

材質

我建立的網狀結構的所有有白色的預設內容。若要讓畫面更吸引人，我應該加入其他資料。標準的 Babylon.js 材料 (預設的著色器) 有很多玩，定義這我不會在此討論。(若要深入了解您可以嘗試出 BabylonJS 材質編輯器預設 Babylon.js 著色器 materialeditor.raananweber.com。) 將不過，討論我材質路段和保齡球球。

為了紋理保齡球球，我將使用另一個很棒的 Babylon.js 功能 — 程序的紋理。程序紋理不是標準的紋理，使用 2D 映像。它們以程式設計方式建立所產生的 GPU 的紋理 (而不是 CPU)，這對效能影響場景。巴比倫有許多類型的程序紋理 — 木材、 磚塊、 火災、 定域機組，草等等。我要使用的是彈珠紋理。

將下列程式碼行之後建立球的網格就變得像綠色彈珠球形 圖 12:

var marbleMaterial = new BABYLON.StandardMaterial("ball", scene);
var marbleTexture = new BABYLON.MarbleProceduralTexture(
  "marble", 512, scene);
marbleTexture.numberOfTilesHeight = 2;
marbleTexture.numberOfTilesWidth = 2;
marbleMaterial.ambientTexture = marbleTexture;
// Set the diffuse color to the wanted ball's color (green)
marbleMaterial.diffuseColor = BABYLON.Color3.Green();
ball.material = marbleMaterial;

彈珠套用到球的材質
圖 12 彈珠套用到球的材質

也可以透過加入路段木製的紋理使用標準的材料擴散材質。但這不為什麼我要討論路段材料。如果您看一下真實的保齡球道，您會發現它有多組點和一組箭頭或三角形。若要模擬的我可以建立非常大的紋理它們，但可能會影響效能 (因為非常大的紋理) 或減少的影像品質。

我也可以使用樣式、 Babylon.js 2.1 引進的新功能。圖樣是一種"drawing"之上已經材質的網狀結構。它們可用，比方說，來模擬 gunshots 牆上的，或像我一樣，將裝飾新增至保齡球路段。樣式是網狀結構，並因此材質使用標準的資料。圖 13 示範如何新增四行和 圖 14 顯示路段之後加入樣式，以及如何 floor 和裝訂邊看起來為材質使用程序紋理 (基礎構件和草) 之後的外觀。

圖 13 新增四行圖樣

// Set the decal's position
var foulLinePosition = new BABYLON.Vector3(0, laneHeight, foulLaneDistance);
var decalSize = new BABYLON.Vector3(1,1,1);
// Create the decal (name, the mesh to add it to, position, up vector and the size)
var foulLine = BABYLON.Mesh.CreateDecal("foulLine", lane, foulLinePosition, BABYLON.Vector3.Up(), decalSize);
// Set the rendering group so it will render after the lane
foulLine.renderingGroupId = 1;
// Set the material
var foulMaterial = new BABYLON.StandardMaterial("foulMat", scene);
foulMaterial.diffuseTexture =
  new BABYLON.Texture("Assets/dots2-w-line.png", scene);
foulMaterial.diffuseTexture.hasAlpha = true;
foulLine.material = foulMaterial;
// If the action manager wasn't initialized, create a new one
scene.actionManager = new BABYLON.ActionManager(scene);
// Register an action to generate a new color each time I press "c"
scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction({
  trigger: BABYLON.ActionManager.OnKeyUpTrigger, parameter: "c" },
  // The function to execute every time "c" is pressed"
  function () {
    ball.material.diffuseColor =
      new BABYLON.Color3(Math.random(), Math.random(), Math.random());
  }
));

加入樣式以道
圖 14 路段與加入的樣式

使用者輸入 — Babylon.js 動作管理員

為全功能的遊戲引擎 Babylon.js 有簡單的方式來與使用者輸入互動。例如，假設我想要變更使用 C 索引鍵的球的色彩。每次我按下 C，我想要將隨機色彩設為球:

// If the action manager wasn't initialized, create a new one
scene.actionManager = new BABYLON.ActionManager(scene);
// Register an action to generate a new color each time I press C
scene.actionManager.registerAction(
  new BABYLON.ExecuteCodeAction({ trigger:
  BABYLON.ActionManager.OnKeyUpTrigger, parameter: "c" },
  // The function to execute every time C is pressed
  function () {
    ball.material.diffuseColor =
      new BABYLON.Color3(Math.random(), Math.random(), Math.random());
  }
));

Babylon.js 動作管理員是功能強大的工具，來控制根據觸發程序的動作。觸發程序可以滑鼠移動或按下滑鼠，網狀結構交集或鍵盤輸入。有許多的觸發程序和動作可供選擇。看一下 Babylon.js 教學課程中的站台 (bit.ly/1MEkNRo) 以查看它們全部。

我要使用動作管理員來控制球，並重設場景。我在第二個部分的教學課程中加入這些動作。

使用外部資源

我建立了網狀結構我需要使用 Babylon.js 的內部函式。大部分的情況下，這將會不太夠。Babylon.js 提供了各式各樣的網狀結構 — 從球體和複雜的功能區的方塊，但很難建立複雜的模型，例如人員、 武器您命運吧---Web 或為太空複製的太空船。

Babylon.js 提供匯出工具外掛程式許多已知 3D 工具，例如 Blender 和 3D Studio。您也可以從很棒的 Clara.io 匯出您的模型，並下載.babylon 檔案。

Babylon.js 會使用自己的檔案格式可包含整個的場景，包括網狀結構、 相機、 光線、 動畫、 幾何及其他資訊。因此如果您希望，您可以使用混合只是用來建立整個場景的模型。您也可以匯入單一網狀結構。

但是，不屬於本教學課程的範圍。在本文中，我只被要示範如何建立使用 Babylon.js 單獨一個簡單的遊戲。

接下來呢？

我已略過許多 Babylon.js 中整合的功能。它具有極大量的功能，以及我強烈建議您檢查遊樂場 (babylonjs playground.com)，文件頁面 (doc.babylonjs.com)，和 Babylon.js 主頁 (babylonjs.com) 若要查看無限的可能性。如果您有本教學課程中的任何部分的問題，請連絡 me 或任何 Babylon.js 英雄們在非常活躍的 Babylon.js HTML5 遊戲開發人員論壇 (bit.ly/1GmUyzq)。

在下一步的文章中，我將建立實際的遊戲 — 新增物理和衝突偵測、 擲回球、 音效以及其他功能。

Raanan Weber是 IT 顧問、 完整堆疊開發人員、 丈夫和父親。在閒暇他會加到 Babylon.js 及其他開放原始碼專案。您可以閱讀他的部落格 blog.raananweber.com。

感謝以下的微軟技術專家對本文的審閱: David Catuhe