BabylonJs和Three.js核心功能比较

·  阅读 6641

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

介绍

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改