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

自蒂姆·伯纳斯·李爵士和他的Nexus软件问世以来，今天的网络浏览器已经走了很长一段路。 借助WebGL等出色的JavaScript API，现代浏览器完全能够呈现高级2D和3D图形，而无需第三方插件的帮助。 通过利用专用图形处理器的强大功能，WebGL使我们的网页可以访问动态阴影和逼真的物理。

您可能已经猜到了，这些功能强大的API通常会有一个缺点。 WebGL当然也不例外，它的缺点在于复杂性。 但是，请不要担心，因为我们探索了两个功能强大的框架，旨在使您的生活更轻松，甚至在使用WebGL时也可以使工作更有效率。

3D框架的卑微渊源

不断流行的Three.js和更新的Babylon.js为Web开发人员提供了丰富的功能丰富的WebGL创作的抽象基础，从动画徽标到完全互动的3D游戏，应有尽有。

Three.js于2009年4月开始使用，最初是用ActionScript编写的，然后翻译为JavaScript。 在创建WebGL之前创建的Three.js具有模块化呈现界面的独特便利性，使其可以与WebGL一起用于SVG和HTML5的canvas元素。

作为相对较新的Babylon.js于2013年夏天问世。在Microsoft的带领下，Babylon.js与Internet Explorer 11首次对WebGL API的官方支持一起被引入。 尽管起源于Redmond的实验室，Babylon.js（以及Three.js）仍维护着开源许可证。

设计上的细微差别

Three.js和Babylon.js都提供了易于使用的库来处理WebGL动画的复杂性。

跟随场景，渲染器，摄影机，动画对象模型，这些框架使用类似的方法供WebGL使用。 在HTML中使用这两种方法就像链接相应JavaScript文件的一行脚本语句一样简单。 注意：Babylon.js具有依赖项，这些依赖项还要求包括开源Hand.js。

Three.js：

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

Babylon.js：

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

两者之间的主要区别在于它们的预期用途。 尽管可以确实将这两个框架中的任何一个折磨成一个相同的3D动画，但重要的是要知道创建每个框架要完成的工作。

创建Three.js的初衷是：利用基于Web的渲染器来创建GPU增强的3D图形和动画。 这样，该框架对网络图形采用了非常广泛的方法，而无需关注任何单个动画细分市场。

这种灵活的设计使Three.js成为用于徽标或建模应用程序等通用Web动画的出色工具（可以在此处找到更多示例）。

在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画布来保存其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：

var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);
var material = new BABYLON.StandardMaterial("texture", sceneB);

box.material = material;
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);

首先，我们创建指定大小的多维数据集对象，然后创建将要绘制到多维数据集上的材质/网格（认为是纹理）。 任何图像文件都适用于纹理，并且两个框架都支持从Blender等3D建模工具中导出网格。

在最后一步中，我们对动画应用柔和的旋转，然后渲染场景。

Three.js：

function animate() {
     requestAnimationFrame(animate);
     mesh.rotation.x += 0.005;
     mesh.rotation.y += 0.01;
     renderer.render(sceneT, camera);
}

Babylon.js：

engine.runRenderLoop(function () {
     box.rotation.x += 0.005;
     box.rotation.y += 0.01;
     sceneB.render();
});

Three.js和Babylon.js都使用动画或渲染循环来使用新的旋转图纸更新画布。 您还将注意到Three.js与Babylon.js的区别在于，在渲染点附加了相机。 我们的最终产品是在空中轻轻旋转的两个立方体。 很简单吧？

两个框架的故事

那里有。 两个功能强大的WebGL框架围绕相同的基础构建，但专注于基于Web的增强图形的不同方面。

您已经亲眼目睹了他们的动画方法在遵循场景，渲染器，相机，对象范例方面的相似之处。 尽管有相似之处，Babylon.js通过专注于传统的游戏引擎需求（例如引擎和自定义照明）来巧妙地区分自己。

最后，这两个相对较年轻的框架使Web开发人员可以更轻松地利用WebGL提供的强大3D机会。 因此，任何对3D Web开发感兴趣的人都应该仔细研究这一前沿技术。

在zip文件中下载演示代码

From: https://www.sitepoint.com/three-js-babylon-js-comparison-webgl-frameworks/