WebGL框架：Three.js和Babylon.js的⽐较
今天的web浏览器已经⾛了很长的路。由于出⾊的JavaScript WebGL api ，现代浏览器完全有能⼒在没有第三⽅插件帮助的情况下呈现先进的2 d和3 d图形。利⽤专⽤的图形处理器的性能,WebGL使我们访问的⽹页实现动态阴影和现实的物理。
正如你可能已经猜到的，如此强⼤的api通常有⼀个缺点。WebGL当然也不例外，其缺点是形式的复杂性。不要害怕，然⽽，当我们探索两个完全有能⼒框架的⽬标是，让你的⽣活更容易，甚⾄可能使⽤WebGL时更有效率。
三维框架的出⾝
Three.js 早在2009年4⽉开始出⽣，在换成JavaScript语⾔之前最初是⽤ActionScript。在WebGL的引⼊之前已经创建了three.js独特⽅便的模块化渲染接⼝，并在不⽤WebGL的情况下允许它使⽤SVG和HTML5画布元素。
Babylon.js, 是相对陌⽣的来者, 它出⽣在2013年的夏天。由微软⼼中发布了Babylon.js和⾸次正式⽀持WebGL API的Internet Explorer 11。
设计的细微差异
Three.js and Babylon.js 两者都提供了易于使⽤的接⼝来处理错综复杂的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动画。我们的项⽬的选择将会是
⼀个超级简单的⽴⽅体缓慢旋转的应⽤。在创建这两个⽰例项⽬，你应该开始了解这两种技术和逐渐发现他们独特的优势。让我们开始吧。
第⼀个任务是初始化⼀个空⽩的画布，以便中包含我们的3 d动画。
Three.js:
<div id="three"></div>
var div = ElementById('three');
Babylon.js:
var canvas = ElementById(‘babylonCanvas’);
With Three.js we simply create an empty div as our container for the animation. Babylon.js on the other hand makes use of an explicitly defined HTML5 canvas to hold its 3D graphics.在使⽤Three.js时我们简单地创建⼀个空的div容器。⽽Babylon.js利⽤显式定义的HTML5 canvas来开始3D图像。
接下来，我们加载渲染器然后准备场景并绘制到画布上。
svg和canvas的区别
Three.js:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
div.appendChild(renderer.domElement);
var engine = new BABYLON.Engine(canvas, true);
这⼀步没有太多东西，我们只是初始化渲染器并把它们贴到我们的画布上。
下⼀步我们设置⼀个场景来装下我们的相机和⽴⽅体cube。
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加⼊⽅向性光源，同时将它附加到我们场景中，避免待会我们只能盯着漆⿊⼀⽚的动画。
我们的画布，场景和相机都已经准备好了，在渲染和动画起来之前我们只需要加⼊⽅块。
Three.js:
var cube = new THREE.CubeGeometry(100, 100, 100);
var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = MaxAnisotropy();
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);
⾸先，我们创建指定⼤⼩的⽴⽅体对象，然后创建我们的材质/⽹格，把材质涂在⽴⽅体的各个⾯。任何图像⽂件都可以导⼊纹理texture,⽽且两个框架都⽀持从3D模型⼯具软件(如 Blender)中导出模型。
在最后⼀步，我们添加⼀个缓慢的旋转动画，然后渲染场景。
Three.js:
function animate() {
requestAnimationFrame(animate);
}
engine.runRenderLoop(function () {
});
Three.jsjs和Babylon.js两者使⽤动画或渲染循环去更新⼀个新的旋转⾓度内容到画布上。您还将注意到Three.js与Babylon.js稍有不同。我们的最终产品是两个⽴⽅体在半空中轻轻旋转。
后⾔
两个WebGL框架基于相同的Web图形接⼝，但专注于增强的不同⽅⾯,。
最后，这两个相对年轻的框架使web开发⼈员产⽣了能够更容易地利⽤强⼤的3 d WebGL的机会。这样，任何有兴趣进⾏3d web开发的同学，当然应该仔细看看这前沿技术。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。