薦：使用NSDT 編輯器助你快速搭建3D應用場景

事實是，自從引入JavaScript WebGL API以來，現代瀏覽器具有直觀的功能，使它們能夠渲染更復雜和復雜的2D和3D圖形，而無需依賴第三方插件。

你可以用純粹的JavaScript開始你的網頁游戲開發之旅，如果你是初學者，這可能是最好的學習方式。但是，當有這么多被廣泛采用的游戲引擎可供選擇時，為什么要重新發明輪子呢？

本指南將探索排名前六位的 JS/HTML5 游戲引擎，按 GitHub 星級的數量排名，并引導您了解如何使用它們。

我們將介紹：

• Three.js
• Pixi.js
• Phaser
• Babylon.js
• Matter.js
• PlayCanvas

1. Three.js

Three.js 是最受歡迎的 JavaScript 庫之一，用于使用 WebGL 在 Web 瀏覽器中創建和動畫 3D 計算機圖形。它也是為網絡瀏覽器創建 3D 游戲的絕佳工具。

由于 Three.js 基于 JavaScript，因此在 3D 對象和用戶界面（如鍵盤和鼠標）之間添加任何交互性相對容易。這使得該庫非常適合在網絡上制作 3D 游戲。

優點

• 易于學習：Three.js最重要的優點——除了它能夠很好地執行復雜的渲染——是它很容易上手。
• 大量示例：由于其受歡迎程度，有無數示例可以幫助您入門。以下是一些示例項目，展示了 Three.js 的可能性：

• 大型社區：Three.js在GitHub上有87.1k星和33.4k分叉。它擁有大量用戶和龐大的開發人員社區，他們使用并為庫創建各種第三方工具和擴展
• 良好的文檔：強大的文檔通常是強大庫的重要指標，而 Three.js 擁有出色的文檔
• 出色的性能：Three.js 比我使用過的其他庫具有性能優勢
• PBR渲染：Three.js內置了基于物理的渲染（PBR），使渲染圖形更準確

缺點

• 沒有渲染管線：這使得許多現代渲染技術無法/不可能用 Three 實現.js
• 不是游戲引擎：盡管 Three.js 擁有創建游戲的基本功能，但它不是像 PlayCanvas 和 Unity 那樣提供交互性和渲染之外功能的游戲引擎。但是，可以構建 Three.js' API 來創建游戲引擎;這方面的一個例子是流氓引擎
• 面向新手：由于API迎合新手，因此隱藏了許多高級功能
• 缺乏支持：沒有對空間索引、精確光線投射或視錐剔除的內置支持，并且在復雜場景中碰撞檢測效率低下

三.js在行動

如果您想深入研究在網絡上創建簡單或復雜的 3D 對象，Three.js 是首選庫。它的主要優勢包括龐大的人才用戶社區以及豐富的示例和資源。

Three.js是我合作的第一個3D動畫庫，我會推薦給任何剛開始游戲開發的人。

讓我們創建一個簡單的旋轉幾何體來演示 Three.js 可以做什么：

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

animate();

創建一個函數來設置使用 Three 運行演示動畫所需的一切.js：init

function init() {
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}

接下來，創建一個函數，以使用所需的運動類型對對象進行動畫處理：animate

function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera );}

最終結果應如下所示：

2.Pixi.js

如果您正在尋找一個JS庫來創建支持跨平臺應用程序的豐富交互式2D圖形，那么Pixi.js就是您的最佳選擇。這個HTML5創建引擎使你能夠在沒有WebGL API知識的情況下開發動畫和游戲。

優點

• 快速性能：就像三.js，小精靈.js非常快
• 大型社區：Pixi.js 在 GitHub 上擁有 38.2k 顆星和 4.7k 個分支，擁有龐大的用戶/開發人員社區
• 多平臺支持：也像Three.js，Pixi.js支持多個平臺，如Web和本機系統，如Android，iOS，Windows和mac
• 簡單的API：API對于初學者來說很容易理解
• 支持 WebGL 和 Canvas 回退：Pixi.js 使用 WebGL 渲染器，但也支持 Canvas 回退

缺點

• 過于復雜：根據我的經驗，Three.js比Pixi更容易上手.js
• 不是一個完整的解決方案：Pixi.js自豪地只支持渲染器

Pixi.js在行動

在大多數情況下，Pixi 是一個不錯的選擇，尤其是在創建面向性能的 3D 交互式圖形并考慮設備兼容性時。Pixi在WebGL失敗的情況下對Canvas回退的支持是一個特別誘人的功能。

讓我們構建一個簡單的演示來了解 Pixi.js 的實際應用。使用以下命令或 CDN 將 Pixi.js 添加到項目中：

npm install pixi.js

或 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js" ></script>

創建腳本文件并添加以下代碼：

import * as PIXI from 'pixi.js';

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader.add('jumper', 'jumper.png').load((loader, resources) => {
const bunny = new PIXI.Sprite(resources.bunny.texture);
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

bunny.anchor.x = .5;
bunny.anchor.y = .5;

app.stage.addChild(bunny);

app.ticker.add(() => {
    bunny.rotation += .01;
});

});

結果應如下所示：

3. Phaser

Phaser 是一個跨平臺的游戲引擎，使您能夠創建基于 JavaScript 和 HTML5 的游戲，并為許多平臺進行編譯。例如，您可能決定使用第三方工具將游戲編譯為 iOS、Android 和其他本機應用程序。

優點

• 結構合理：眾所周知，移相器具有精心設計的結構
• TypeScript 支持：該庫支持使用 TypeScript 進行游戲開發
• 專注于游戲開發：Phaser主要是一個游戲開發引擎——而且是一個很好的引擎。
• 大型社區：雖然沒有前兩個庫那么大，但 Phaser 在 GitHub 上擁有 33.2k 星和 6.9k 分叉的龐大社區
• 插件很多：Phaser支持大量的插件。這包括相位器-物質-碰撞、導航網格、移相器輸入和光滑的 ui 插件，僅舉幾例
• WebGL和Canvas支持：Phaser支持WebGL，并啟用了Canvas作為后備

缺點

• 構建大小：桌面版 Phaser 的構建大小非常龐大
• 對移動開發的支持不佳：創建本機移動應用程序需要使用Cordova或其他第三方框架
• 狀態管理：開始使用 Phaser 的狀態管理器可能有些困難

移相器在行動

Phaser 非常適合開發跨平臺游戲應用程序。它支持廣泛的插件，并且使用Phaser構建游戲的大型開發人員社區使開始使用該框架變得容易。

讓我們使用 Phaser 構建一個基本應用程序。首先，將 Phaser 安裝為 Node 模塊或通過 CDN：

npm install phaser

或：

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

接下來，將一些默認配置傳遞給您的 Phaser 引擎：

const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: "arcade",
arcade: {
gravity: { y: 200 },
},
},
scene: {
preload: preload,
create: create,
},
};

const game = new Phaser.Game(config);

創建一個預加載函數以加載默認靜態文件：

function preload() {
this.load.setBaseURL("https://labs.phaser.io");
this.load.image("sky", "assets/skies/space3.png");
this.load.image("plane", "assets/sprites/ww2plane.png");
this.load.image("green", "assets/particles/green.png");
this.load.image("astroid", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid2", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid3", "assets/games/asteroids/asteroid1.png");
}

最后，定義一個函數來顯示新創建的游戲：create

function create() {
this.add.image(400, 300, "sky");
this.add.image(700, 300, "astroid");
this.add.image(100, 200, "astroid2");
this.add.image(400, 40, "astroid3");

const particles = this.add.particles("green");

const emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: "ADD",
});

const plane = this.physics.add.image(400, 100, "plane");
plane.setVelocity(100, 200);
plane.setBounce(1, 1);
plane.setCollideWorldBounds(true);
emitter.startFollow(plane);
}

4.Babylon.js

Babylon.js是一個強大，簡單，開放的游戲和渲染引擎，打包在一個友好的JavaScript框架中。

優點

• Playground：Babylon提供了一個Playground工具，用于在進入全面開發之前進行測試 - 并且它有很好的文檔可以啟動。
• 強大的社區支持：Babylon有一個論壇，里面有一個活躍的開發人員和用戶的大型社區，他們非常有幫助。該框架在GitHub上有18.9k星和3k分叉
• 最新的代碼庫：該框架享有經常更新的代碼庫和活躍的第三方工具開發。官方回購文件最近于11/26/22更新
• PBR 渲染：對 PBR 渲染支持非常出色
• 信任投票：Babylon被Adobe，Microsoft等大品牌使用和支持
• 維護：錯誤通常會很快得到解決

缺點

• 缺乏成熟度：巴比倫于2013年首次發布，與許多競爭對手相比，它相當年輕
• 文檔：引擎缺少 API 文檔
• 不適合小型項目

Babylon.js在行動

許多大品牌都信任巴比倫.js作為他們選擇的游戲開發引擎。Babylon Playground 是一個蓬勃發展的代碼示例中心，是幫助您開始使用框架的絕佳工具。

巴比倫及其模塊發布在npm上。若要安裝它，請在命令行工具中運行以下命令：

npm install babylonjs --save

或者，您可以通過 CDN 將庫集成到項目中。為此，請創建一個文件并添加以下代碼：index.html

<canvas id="renderCanvas"></canvas>

<script src="https://cdn.babylonjs.com/babylon.js"></script>

<script src="script.js"></script>

安裝后，您可以通過導入全局對象或解構場景和引擎方法來開始使用庫，如下所示：

import * as BABYLON from 'babylonjs'

// OR

import { Scene, Engine } from 'babylonjs'

接下來，創建一個文件并包含以下代碼：script.js

const { createScene } = require('scene.js')

window.addEventListener('DOMContentLoaded', function(){
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
window.addEventListener('resize', function(){
engine.resize();
});
});

創建一個文件并添加以下代碼：scene.js

export function(){
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0,1,0), scene);
const sphere = BABYLON.Mesh.CreateSphere('sphere', 16, 2, scene);
sphere.position.y = 1;
const ground = BABYLON.Mesh.CreateGround('ground', 6, 6, 2, scene);
return scene;
}

以下是動畫外觀的預覽：

5.Matter.js

Matter.js是一個用于Web的JavaScript 2D剛體物理引擎。即使它是一個JavaScript物理引擎，你也可以將它與各種包和插件結合起來，創建有趣的網頁游戲。

優點

• 令人興奮的功能：Matter.js提供了許多功能，例如剛性、復合體和復合材料體、穩定的堆疊和靜止、運動守恒等等

缺點

• 無CCD：Matter.js缺乏連續碰撞檢測（CCD）會導致快速移動的物體穿過其他物體的問題

物質.js在行動

Matter.js 本質上是創建簡單、移動的動畫對象的最佳庫。Matter.js是一個物理庫，更關注2D對象。但是，您可以將其與第三方解決方案結合使用以創建動態游戲。

要開始使用 Matter.js在原版項目中，請下載 or matter。最小值.js從官方 GitHub 存儲庫打包文件，并使用以下代碼將其添加到 HTML 文件中：matter.js

<script src="matter.js"></script>

但是，如果您使用的是捆綁器，例如 Parcel，則可以通過以下命令將軟件包安裝為 Node 模塊：npmyarn

npm install matter-js
//OR
yarn add matter-js

以下是使用內置渲染器和運行器入門的最小示例：

// module aliases
const Engine = Matter.Engine;
const Render = Matter.Render;
const World = Matter.World;
const Bodies = Matter.Bodies;

// create an engine
const engine = Engine.create();

// instantiating the renderer
const render = Render.create({
element: document.body,
engine: engine,
options: {
wireframes: false,
showAngleIndicator: false,
background: "white",
},
});

// create two boxes and a ground
const boxA = Bodies.rectangle(300, 300, 70, 70);
const boxB = Bodies.rectangle(400, 10, 60, 60);
const ground = Bodies.rectangle(300, 510, 910, 10, { isStatic: true });

// add all bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Matter.Runner.run(engine);

// run the renderer
Render.run(render);

你應該看到兩個矩形物體掉落，然后在它們落在地面上時相互撞擊。如果沒有，請檢查瀏覽器控制臺以查看是否有任何錯誤：

6.PlayCanvas

PlayCanvas使用HTML5和WebGL在任何移動或桌面瀏覽器中運行游戲和其他交互式3D內容。雖然它是免費和開源的，但PlayCanvas更關注游戲引擎而不是渲染引擎。因此，它更適合創建
使用WebGL和HTML3 Canvas的5D游戲。

優點

• 游戲引擎：與其他引擎不同，PlayCanvas 是一個游戲引擎，具有您在庫或框架中找不到的功能
• 開源：PlayCanvas是一個開源工具，用于強大的游戲開發
• 移動優化：游戲開發平臺移動優先
• 零編譯時間：引擎的零編譯時間自然使過程更快
• 資產管道：PlayCanvas 使用最佳做法來決定內容的交付方式和形式
• 集成物理引擎：您可以使用強大的子彈物理引擎彈藥輕松地將物理集成到游戲中.js
• 熱重載：您不必每次進行更改時都重新加載瀏覽器
• 僅在瀏覽器上運行的渲染引擎：PlayCanvas具有僅在瀏覽器上運行的高級WebGL功能

缺點

• 付費專用項目：免費層不支持私有項目，因此所有代碼和資源都公開托管
• 碰撞偏移：沒有碰撞偏移
• 缺乏示例：PlayCanvas 的教程很少而且相距甚遠

PlayCanvas 在行動

PlayCanvas非常適合創建小型公共項目或學校項目 - 至少，這是我使用它的目的。如果您需要更多功能和對游戲開發的更多控制，您可能需要考慮訂閱高級功能。

現在，讓我們使用引擎進行一些基本的渲染。第一步，從 GitHub 存儲庫下載包文件，并使用以下代碼將其添加到項目中：

<script src='https://code.playcanvas.com/playcanvas-stable.min.js'>

接下來，使用以下代碼創建一個文件并將其鏈接到 HTML 文件：script.js

<canvas id='canvas'></canvas> <script src='/script.js'>

現在，打開該文件并添加以下代碼以實例化新的 PlayCanvas 應用程序：script.js

const canvas = document.getElementById('canvas');
const app = new pc.Application(canvas);

window.addEventListener('resize', () => app.resizeCanvas());

const box = new pc.Entity('cube');
box.addComponent('model', {
type: 'box'
});
app.root.addChild(box);

要為對象創建相機和光源，請添加以下代碼：

const camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(.1, .1, .1)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

const light = new pc.Entity('light');
light.addComponent('light');
app.root.addChild(light);
light.setEulerAngles(46, 0, 0);

app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();

上面的代碼應產生以下結果：

結語

通過分解與上面列出的每個 JS/HTML5 游戲引擎相關的優缺點和用例，我希望您能深入了解哪一個最適合您想要創建的游戲或動畫類型。

在大多數情況下，我建議使用 Three.js，特別是如果您正在尋找更多的渲染引擎而不是游戲引擎。由于它在開發人員生態系統中的受歡迎程度，很容易找到充足的資源來幫助您啟動和運行。

如果你更關注游戲開發，我會推薦巴比倫.js因為它很簡單。Babylon還具有更新的代碼庫和活躍的第三方開發，游樂場功能是一個很好的測試工具。PlayCanvas是一個可靠的備份選項 - 它主要是一個游戲引擎，您可以使用它來構建復雜的3D游戲。

您在游戲開發項目中使用什么游戲引擎？請在評論中告訴我們！

LogRocket：通過理解上下文更輕松地調試JavaScript錯誤

調試代碼始終是一項繁瑣的任務。但是，您越了解錯誤，就越容易修復它們。

LogRocket 允許您以新穎獨特的方式理解這些錯誤。我們的前端監控解決方案跟蹤用戶與 JavaScript 前端的互動情況，使您能夠準確了解用戶導致錯誤的行為。

LogRocket 記錄控制臺日志、頁面加載時間、堆棧跟蹤、帶有標頭 + 正文的慢速網絡請求/響應、瀏覽器元數據和自定義日志。了解 JavaScript 代碼的影響從未如此簡單！

原文鏈接：推薦前 6 名 JavaScript 和 HTML5 游戲引擎