核心要點(diǎn)

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

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

3D框架的起源

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

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

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

Three.js：

<??>

Babylon.js：

<??>
<??>

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

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

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

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作為動畫的容器。另一方面，Babylon.js使用明確定義的HTML5 canvas來保存其3D圖形。接下來，我們加載渲染器，它將負(fù)責(zé)準(zhǔn)備場景并繪制到畫布上。

Three.js：

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

Babylon.js：

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

這里沒有什么太花哨的，我們只是初始化渲染器（在Babylon.js的情況下是引擎）并將它們附加到我們的畫布上。我們的下一步變得更復(fù)雜一些，因?yàn)槲覀冊O(shè)置了一個(gè)場景來容納我們的攝像機(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)建我們的場景，然后實(shí)現(xiàn)攝像機(jī)（這兩個(gè)框架都支持不同類型的攝像機(jī)），我們將從中實(shí)際查看創(chuàng)建的場景。傳遞給攝像機(jī)的參數(shù)決定了攝像機(jī)視角的各種細(xì)節(jié)，例如視野、縱橫比和深度。我們還為Babylon.js包含了一個(gè)DirectionalLight并將其附加到我們的場景中，以避免稍后看到漆黑的動畫。

有了我們的畫布、場景和攝像機(jī)，我們只需要在渲染和動畫之前繪制立方體本身。

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

Three.js：

<??>
<??>

Babylon.js：

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

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

兩個(gè)框架的故事

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

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

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

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