BabylonJs和Three.js核心功能比较

Three.js和Babylon.js 都是对于Webgl的封装，Three.js比较早，使用人数和社区活跃度都比Babylon高，Babylon开发过程中，大部分情况下只能去官方的社区去提问或者去找对应的问题，好在官方的社区回复的速度还是挺快的. 2个框架在功能方面，基本上不存在哪个能实现另一个不能实现的情况，只不过Babylon.js可以使用webgpu. 源码方面Babylon基于Typescript，three.js大部分代码还是es5，所以阅读起来可能Babylon会可读性高一些。

推荐使用NSDT 3DConvert进行3D模型格式转换，支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换，在转换过程中，能够很好的保留模型原有的颜色、材质等信息。

核心类对比

以创建一个场景简单的场景为例，首先渲染场景的三大要素，场景，相机，渲染器。

渲染器

Three中的渲染器是WebGLRenderer，Babylon的渲染器类是Engine，它们都是封装了webgl的api. 使用方式。

传入的属性差不多，就是画布，是否抗锯齿等。

场景

2个库都有Scene类. Three.js的Scene跟场景中的对象一样，都是继承了Three.js的基类，Object3D,这个类中有children属性，用于存这个对象所拥有的子对象。对于场景来说，他的子对象就是场景中所拥有的实体。

Babylon.js的Scene作用比Three.js丰富，其中保存了这个场景中所有的对象，包括顶点（VertexData），顶点对应的Geometry,节点（Node）,材质对象，动画等。

由于Three.js的Scene也是一个Object3D，所以在Three中实体的矩阵变换都是围绕着Scene变换的，比如：

在Babylonjs中，放在Scene的实体都在根节点，如果没做特殊处理的话，根节点的变换都是绕着自身的，比如：

相机

Three.js常用的相机主要是2个，一个是透视相机(PerspectiveCamera)，一个是正交相机(OrthographicCamera).它们也是继承了基类（Object3D），只不过它们封装了透视矩阵和正交矩阵。

Babylon.js的相机功能比较丰富，包括：

• 万能相机(Universal Camera),主要用于FPS游戏的相机。
• 弧形旋转相机（Arc Rotate Camera），主要用在3D编辑器里面的相机。
• 跟随相机（FollowCamera），可以跟随某个物体的相机 这些相机可以切换为透视模式或者正交模式。

绘制Box

Three.js要绘制一个网格：

1. 创建geometryconst geo=new BoxGeometry(1,1,1)
2. 创建material const material=new MeshBasicMaterial()
3. 创建网格 const box=new Mesh(geo,material)
4. 添加到场景 scene.add(box)

Babylon.js绘制一个网格：

1. 创建网格const box=new MeshBuilder.CreateBox("name",{size:1})
2. 创建材质const material=new StandardMaterial()
3. 应用材质 box.material=material

在babylon中，new一个Mesh就会自动把网格加入场景中。

其他差异

Babylon没有Three.js中的全局灯（AmbientLight）,但在场景中有默认的全局光照颜色（ambientColor. Three.js材质的color对应的就是Babylon材质的diffuseColor。

使用体验

Babylon.js封装的功能比较丰富，比如相机控制开箱即用，扩展起来也比较方便。 但Babylon.js的数学库用的不是很舒服，three.js的数学库用起来比较直观，比如矩阵变换，只要applyMatrix4,Babylon就相对麻烦 Babylon提供了Playground,可以方便线上开发调试。