本文已参与「新人创作礼」活动，一起开启掘金创作之路。

介绍

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

核心类对比

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

渲染器

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

    //Three.js
    const renderer = new THREE.WebGLRenderer();
    
    //Babylon.js
    const engine=new BABYLON.Engine(canvas)

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

场景

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

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

//Three.js
const scene=new THREE.Scene()

//Babylon.js 必须传入场景对应的渲染引擎
const scene=new BABYLON.Scene(engine)

————————————–2022. 8.16补充——————————————-

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

//伪代码
box.applyMatrix4(new Matrix4().RotationX(40deg))
因为Scene基点在零点位置，所以这个变换是绕着0点就行旋转的，
如果要绕任意点旋转，可以先通移动到某个点，旋转后在移动回去

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

//伪代码，在bjs中，矩形变换都是修改矩阵
const mtx=box.getWorldMatrix();
mtx.mulity(Matrix.rotation(50deg))；
这个代表盒子绕着自身旋转50度，如果要绕任意点旋转，需要通过修改实体的轴点进行变换
box.setPovitPoint(new Vec(1,1,1));
但这操作会修改盒子的世界矩阵，如果不做处理，修改轴点的时候会发生位置改变

——————————-end—————————————–

相机

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

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

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

//Three.js
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//Babylon.js 旋转相机为例，可以想象为是围绕地球的卫星

// Parameters: name, alpha(横向旋转), beta（纵向旋转）, radius(观察半径), target position（目标点）, scene
const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
// 绑定交互
camera.attachControl(canvas, true);

绘制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,可以方便线上开发调试