three.js和Babylon.js：WebGL框架的比较

核心要点

• Three.js和Babylon.js都是强大的WebGL框架，为Web开发者提供了一个抽象的基础，用于创建功能丰富的WebGL作品，例如动画Logo和全交互式3D游戏。
• Three.js（始于2009年）旨在利用基于Web的渲染器创建GPU增强的3D图形和动画，使其成为通用Web动画的理想工具。Babylon.js（微软于2013年推出）则采取更具针对性的方法，专注于基于Web的游戏开发，并具有碰撞检测和抗锯齿等功能。
• 这两个框架都遵循场景、渲染器、摄像机、对象动画模型，可用于创建类似的3D动画。然而，Babylon.js通过专注于传统游戏引擎的需求（如引擎和自定义灯光）来区别于Three.js。
• 虽然Three.js和Babylon.js都提供高性能，但Three.js以其简单易用而闻名，适合初学者或小型项目；而Babylon.js以其健壮性和高级功能而闻名，更适合大型、更复杂的项目。

自蒂姆·伯纳斯·李爵士及其Nexus软件时代以来，当今的Web浏览器已经取得了长足的进步。得益于WebGL等出色的JavaScript API，现代浏览器完全能够在无需第三方插件的情况下渲染高级2D和3D图形。通过利用专用图形处理器的强大功能，WebGL使我们的网页能够访问动态着色和逼真的物理效果。正如您可能猜到的那样，如此强大的API通常会带来缺点。WebGL当然也不例外，其缺点在于复杂性。但是，不必担心，我们已经探索了两个功能强大的框架，旨在让您在使用WebGL时更轻松，甚至更高效。

3D框架的起源

广受欢迎的Three.js和较新的Babylon.js为Web开发者提供了一个抽象的基础，用于创建功能丰富的WebGL作品，范围从动画Logo到全交互式3D游戏。Three.js始于2009年4月，最初是用ActionScript编写的，后来被翻译成JavaScript。由于是在引入WebGL之前创建的，Three.js具有模块化渲染接口的独特优势，使其除了WebGL之外，还可以与SVG和HTML5的canvas元素一起使用。Babylon.js作为后来者，于2013年夏季问世。由微软公司开发，Babylon.js与Internet Explorer 11首次正式支持WebGL API一起推出。尽管起源于雷德蒙德的实验室，但Babylon.js（以及Three.js）仍然保持着开源许可证。

细微的设计差异

Three.js和Babylon.js都提供了易于使用的库来处理WebGL动画的复杂性。遵循场景、渲染器、摄像机、对象动画模型，这些框架在WebGL的使用方法上非常相似。在您的HTML中使用它们都像链接相应的JavaScript文件一样简单。注意：Babylon.js有一些依赖项，也需要包含开源的Hand.js。

Three.js：

<🎜>

Babylon.js：

<🎜>
<🎜>

这两个框架的主要区别在于它们的预期用途。虽然这两个框架都可以用来创建相同的3D动画，但了解每个框架的创建目标非常重要。Three.js的创建目标只有一个：利用基于Web的渲染器创建GPU增强的3D图形和动画。因此，这个框架采用了一种非常广泛的Web图形方法，而没有专注于任何单一的动画领域。这种灵活的设计使Three.js成为通用Web动画（如Logo或建模应用程序）的理想工具。在Three.js试图为WebGL提供广泛的动画功能的同时，Babylon.js则采取了更具针对性的方法。Babylon.js最初设计为Silverlight游戏引擎，它仍然偏爱基于Web的游戏开发，并具有碰撞检测和抗锯齿等功能。如前所述，Babylon.js仍然完全能够进行通用的Web图形和动画。

WebGL技术的并排演示

为了进一步演示这两个框架的异同，让我们构建一个快速的3D动画。我们选择的项目将是一个超简单的立方体，并应用缓慢的旋转。在创建这两个示例项目时，您应该开始了解这两个技术是如何逐渐分歧并展现其独特优势的。让我们开始吧。构建几乎任何类型的创意项目的第一步是在其中包含我们的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中，我们只需创建一个空的div作为动画的容器。另一方面，Babylon.js使用明确定义的HTML5 canvas来保存其3D图形。接下来，我们加载渲染器，它将负责准备场景并绘制到画布上。

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的情况下是引擎）并将它们附加到我们的画布上。我们的下一步变得更复杂一些，因为我们设置了一个场景来容纳我们的摄像机和立方体。

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);

在这里，我们以几乎相同的方式创建我们的场景，然后实现摄像机（这两个框架都支持不同类型的摄像机），我们将从中实际查看创建的场景。传递给摄像机的参数决定了摄像机视角的各种细节，例如视野、纵横比和深度。我们还为Babylon.js包含了一个DirectionalLight并将其附加到我们的场景中，以避免稍后看到漆黑的动画。

有了我们的画布、场景和摄像机，我们只需要在渲染和动画之前绘制立方体本身。

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：

<🎜>

首先，我们创建指定大小的立方体对象，然后创建将在立方体上绘制的材质/网格（认为是纹理）。任何图像文件都可以作为纹理，并且这两个框架都支持来自Blender等3D建模工具的网格导出。在最后一步中，我们应用轻微的旋转进行动画，然后渲染场景。

Three.js：

<🎜>
<🎜>

Babylon.js：

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

Three.js和Babylon.js都使用动画或渲染循环来更新画布，并绘制新的旋转图形。您还会注意到，Three.js与Babylon.js略有不同，它在渲染时附加摄像机。我们的最终产品是两个在空中轻轻旋转的立方体。很简单，对吧？

两个框架的故事

就是这样。两个非常强大的WebGL框架构建在相同的基础上，但专注于增强型基于Web图形的不同方面。您亲眼看到了它们的方法在动画方面有多么相似，两者都遵循场景、渲染器、摄像机、对象范式。尽管存在相似之处，但Babylon.js通过专注于传统游戏引擎的需求（如引擎和自定义灯光）来巧妙地区分自身。最终，这两个相对年轻的框架使Web开发者能够更轻松地利用WebGL提供的强大的3D机会。因此，任何对3D Web开发感兴趣的人都应该仔细研究这项尖端技术。

(此处应包含下载演示代码的zip文件链接)

(此处应包含Three.js和Babylon.js比较的常见问题解答) 由于篇幅限制，我无法在此处添加完整的FAQ部分。 但是，您可以根据提供的原文本中的FAQ部分，重新组织并润色成更简洁明了的版本。

以上是three.js和Babylon.js：WebGL框架的比较的详细内容。更多信息请关注PHP中文网其他相关文章！