介绍

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要绘制一个网格,

创建geometryconst geo=new BoxGeometry(1,1,1)

创建material const material=new MeshBasicMaterial()

创建网格 const box=new Mesh(geo,material)

添加到场景 scene.add(box)

Babylon.js绘制一个网格

创建网格const box=new MeshBuilder.CreateBox(“name”,{size:1})

创建材质const material=new StandardMaterial()

应用材质 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,可以方便线上开发调试