核心要點(diǎn)

• Three.js和Babylon.js都是強(qiáng)大的WebGL框架，為Web開(kāi)發(fā)者提供了一個(gè)抽象的基礎(chǔ)，用於創(chuàng)建功能豐富的WebGL作品，例如動(dòng)畫(huà)Logo和全交互式3D遊戲。
• Three.js（始於2009年）旨在利用基於Web的渲染器創(chuàng)建GPU增強(qiáng)的3D圖形和動(dòng)畫(huà)，使其成為通用Web動(dòng)畫(huà)的理想工具。 Babylon.js（微軟於2013年推出）則採(cǎi)取更具針對(duì)性的方法，專注於基於Web的遊戲開(kāi)發(fā)，並具有碰撞檢測(cè)和抗鋸齒等功能。
• 這兩個(gè)框架都遵循場(chǎng)景、渲染器、攝像機(jī)、對(duì)象動(dòng)畫(huà)模型，可用於創(chuàng)建類(lèi)似的3D動(dòng)畫(huà)。然而，Babylon.js通過(guò)專注於傳統(tǒng)遊戲引擎的需求（如引擎和自定義燈光）來(lái)區(qū)別於Three.js。
• 雖然Three.js和Babylon.js都提供高性能，但Three.js以其簡(jiǎn)單易用而聞名，適合初學(xué)者或小型項(xiàng)目；而B(niǎo)abylon.js以其健壯性和高級(jí)功能而聞名，更適合大型、更複雜的項(xiàng)目。

自蒂姆·伯納斯·李爵士及其N(xiāo)exus軟件時(shí)代以來(lái)，當(dāng)今的Web瀏覽器已經(jīng)取得了長(zhǎng)足的進(jìn)步。得益於WebGL等出色的JavaScript API，現(xiàn)代瀏覽器完全能夠在無(wú)需第三方插件的情況下渲染高級(jí)2D和3D圖形。通過(guò)利用專用圖形處理器的強(qiáng)大功能，WebGL使我們的網(wǎng)頁(yè)能夠訪問(wèn)動(dòng)態(tài)著色和逼真的物理效果。正如您可能猜到的那樣，如此強(qiáng)大的API通常會(huì)帶來(lái)缺點(diǎn)。 WebGL當(dāng)然也不例外，其缺點(diǎn)在於復(fù)雜性。但是，不必?fù)?dān)心，我們已經(jīng)探索了兩個(gè)功能強(qiáng)大的框架，旨在讓您在使用WebGL時(shí)更輕鬆，甚至更高效。

3D框架的起源

廣受歡迎的Three.js和較新的Babylon.js為Web開(kāi)發(fā)者提供了一個(gè)抽象的基礎(chǔ)，用於創(chuàng)建功能豐富的WebGL作品，範(fàn)圍從動(dòng)畫(huà)Logo到全交互式3D遊戲。 Three.js始於2009年4月，最初是用ActionScript編寫(xiě)的，後來(lái)被翻譯成JavaScript。由於是在引入WebGL之前創(chuàng)建的，Three.js具有模塊化渲染接口的獨(dú)特優(yōu)勢(shì)，使其除了WebGL之外，還可以與SVG和HTML5的canvas元素一起使用。 Babylon.js作為後來(lái)者，於2013年夏季問(wèn)世。由微軟公司開(kāi)發(fā)，Babylon.js與Internet Explorer 11首次正式支持WebGL API一起推出。儘管起源於雷德蒙德的實(shí)驗(yàn)室，但Babylon.js（以及Three.js）仍然保持著開(kāi)源許可證。

細(xì)微的設(shè)計(jì)差異

Three.js和Babylon.js都提供了易於使用的庫(kù)來(lái)處理WebGL動(dòng)畫(huà)的複雜性。遵循場(chǎng)景、渲染器、攝像機(jī)、對(duì)象動(dòng)畫(huà)模型，這些框架在WebGL的使用方法上非常相似。在您的HTML中使用它們都像鏈接相應(yīng)的JavaScript文件一樣簡(jiǎn)單。注意：Babylon.js有一些依賴項(xiàng)，也需要包含開(kāi)源的Hand.js。

Three.js：

<??>

Babylon.js：

<??>
<??>

這兩個(gè)框架的主要區(qū)別在於它們的預(yù)期用途。雖然這兩個(gè)框架都可以用來(lái)創(chuàng)建相同的3D動(dòng)畫(huà)，但了解每個(gè)框架的創(chuàng)建目標(biāo)非常重要。 Three.js的創(chuàng)建目標(biāo)只有一個(gè)：利用基於Web的渲染器創(chuàng)建GPU增強(qiáng)的3D圖形和動(dòng)畫(huà)。因此，這個(gè)框架採(cǎi)用了一種非常廣泛的Web圖形方法，而沒(méi)有專注於任何單一的動(dòng)畫(huà)領(lǐng)域。這種靈活的設(shè)計(jì)使Three.js成為通用Web動(dòng)畫(huà)（如Logo或建模應(yīng)用程序）的理想工具。在Three.js試圖為WebGL提供廣泛的動(dòng)畫(huà)功能的同時(shí)，Babylon.js則採(cǎi)取了更具針對(duì)性的方法。 Babylon.js最初設(shè)計(jì)為Silverlight遊戲引擎，它仍然偏愛(ài)基於Web的遊戲開(kāi)發(fā)，並具有碰撞檢測(cè)和抗鋸齒等功能。如前所述，Babylon.js仍然完全能夠進(jìn)行通用的Web圖形和動(dòng)畫(huà)。

WebGL技術(shù)的並排演示

為了進(jìn)一步演示這兩個(gè)框架的異同，讓我們構(gòu)建一個(gè)快速的3D動(dòng)畫(huà)。我們選擇的項(xiàng)目將是一個(gè)超簡(jiǎn)單的立方體，並應(yīng)用緩慢的旋轉(zhuǎn)。在創(chuàng)建這兩個(gè)示例項(xiàng)目時(shí)，您應(yīng)該開(kāi)始了解這兩個(gè)技術(shù)是如何逐漸分歧並展現(xiàn)其獨(dú)特優(yōu)勢(shì)的。讓我們開(kāi)始吧。構(gòu)建幾乎任何類(lèi)型的創(chuàng)意項(xiàng)目的第一步是在其中包含我們的3D動(dòng)畫(huà)的空白畫(huà)布。

Three.js：

<div style="height:250px; width: 250px;" id="three"></div>

var div = document.getElementById('three');

Babylon.js：

<div style="height:250px; width: 250px;" id="babylon">
  <canvas id="babylonCanvas"></canvas>
</div>

var canvas = document.getElementById('babylonCanvas');

在Three.js中，我們只需創(chuàng)建一個(gè)空的div作為動(dòng)畫(huà)的容器。另一方面，Babylon.js使用明確定義的HTML5 canvas來(lái)保存其3D圖形。接下來(lái)，我們加載渲染器，它將負(fù)責(zé)準(zhǔn)備場(chǎng)景並繪製到畫(huà)布上。

Three.js：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
div.appendChild(renderer.domElement);

Babylon.js：

var engine = new BABYLON.Engine(canvas, true);

這裡沒(méi)有什麼太花哨的，我們只是初始化渲染器（在Babylon.js的情況下是引擎）並將它們附加到我們的畫(huà)布上。我們的下一步變得更複雜一些，因?yàn)槲覀冊(cè)O(shè)置了一個(gè)場(chǎng)景來(lái)容納我們的攝像機(jī)和立方體。

Three.js：

var sceneT = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;

Babylon.js：

var sceneB = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera
("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);
sceneB.activeCamera.attachControl(canvas);

var light = new BABYLON.DirectionalLight
("light", new BABYLON.Vector3(0, -1, 0), sceneB);
light.diffuse = new BABYLON.Color3(1, 0, 0);
light.specular = new BABYLON.Color3(1, 1, 1);

在這裡，我們以幾乎相同的方式創(chuàng)建我們的場(chǎng)景，然後實(shí)現(xiàn)攝像機(jī)（這兩個(gè)框架都支持不同類(lèi)型的攝像機(jī)），我們將從中實(shí)際查看創(chuàng)建的場(chǎng)景。傳遞給攝像機(jī)的參數(shù)決定了攝像機(jī)視角的各種細(xì)節(jié)，例如視野、縱橫比和深度。我們還為Babylon.js包含了一個(gè)DirectionalLight並將其附加到我們的場(chǎng)景中，以避免稍後看到漆黑的動(dòng)畫(huà)。

有了我們的畫(huà)布、場(chǎng)景和攝像機(jī)，我們只需要在渲染和動(dòng)畫(huà)之前繪製立方體本身。

Three.js：

var cube = new THREE.CubeGeometry(100, 100, 100);

var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();

var material = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(cube, material);
sceneT.add(mesh);

Babylon.js：

<??>

首先，我們創(chuàng)建指定大小的立方體對(duì)象，然後創(chuàng)建將在立方體上繪製的材質(zhì)/網(wǎng)格（認(rèn)為是紋理）。任何圖像文件都可以作為紋理，並且這兩個(gè)框架都支持來(lái)自Blender等3D建模工具的網(wǎng)格導(dǎo)出。在最後一步中，我們應(yīng)用輕微的旋轉(zhuǎn)進(jìn)行動(dòng)畫(huà)，然後渲染場(chǎng)景。

Three.js：

<??>
<??>

Babylon.js：

<div style="height:250px; width: 250px;" id="three"></div>

Three.js和Babylon.js都使用動(dòng)畫(huà)或渲染循環(huán)來(lái)更新畫(huà)布，並繪製新的旋轉(zhuǎn)圖形。您還會(huì)注意到，Three.js與Babylon.js略有不同，它在渲染時(shí)附加攝像機(jī)。我們的最終產(chǎn)品是兩個(gè)在空中輕輕旋轉(zhuǎn)的立方體。很簡(jiǎn)單，對(duì)吧？

兩個(gè)框架的故事

就是這樣。兩個(gè)非常強(qiáng)大的WebGL框架構(gòu)建在相同的基礎(chǔ)上，但專注於增強(qiáng)型基於Web圖形的不同方面。您親眼看到了它們的方法在動(dòng)畫(huà)方面有多麼相似，兩者都遵循場(chǎng)景、渲染器、攝像機(jī)、對(duì)象範(fàn)式。儘管存在相似之處，但Babylon.js通過(guò)專注於傳統(tǒng)遊戲引擎的需求（如引擎和自定義燈光）來(lái)巧妙地區(qū)分自身。最終，這兩個(gè)相對(duì)年輕的框架使Web開(kāi)發(fā)者能夠更輕鬆地利用WebGL提供的強(qiáng)大的3D機(jī)會(huì)。因此，任何對(duì)3D Web開(kāi)發(fā)感興趣的人都應(yīng)該仔細(xì)研究這項(xiàng)尖端技術(shù)。

(此處應(yīng)包含下載演示代碼的zip文件鏈接)

(此處應(yīng)包含Three.js和Babylon.js比較的常見(jiàn)問(wèn)題解答) 由於篇幅限制，我無(wú)法在此處添加完整的FAQ部分。 但是，您可以根據(jù)提供的原文本中的FAQ部分，重新組織並潤(rùn)色成更簡(jiǎn)潔明了的版本。

以上是three.js和Babylon.js：WebGL框架的比較的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！