babylon.js 介绍

库课科技前端
1,133 阅读9分钟

简介

Babylon.js是一个基于WebGL技术的开源3D游戏引擎和渲染引擎。它提供了一套简单易用的API，使开发者能够在Web浏览器中创建高性能、交互式的3D应用程序和游戏。 中文网教程

与three.js对比
  • API和易用性：Three.js提供了一个相对低级的API，需要开发者自己处理更多的细节和底层操作。而Babylon.js则提供了一个更高级的API，更加易于使用和理解，同时提供了更多的功能和工具。
  • 功能和特性：Three.js提供了一些基本的3D功能和特性，如渲染、光照、材质和动画等。Babylon.js则提供了更丰富的功能和特性，包括物理引擎、粒子系统、骨骼动画、碰撞检测等，使开发者能够更容易地实现复杂的效果。
  • 性能和渲染：Three.js在性能方面表现良好，可以处理大规模的3D场景和模型。Babylon.js则更加注重性能和渲染的优化，提供了一些针对移动设备和虚拟现实设备的优化技术，使得在这些平台上能够获得更好的性能和体验。
  • 社区和文档支持：Three.js拥有一个庞大的开发者社区，提供了大量的示例、教程和文档，使开发者能够快速入门和解决问题。Babylon.js的社区也很活跃，提供了丰富的资源和支持。

引入

安装依赖

<template>
  <div>
    <canvas ref="canvas" width="1600" height="800"></canvas>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { BabylonScene } from '../BabylonEnginge/babylon'
// 创建canvas
const canvas = ref<HTMLCanvasElement>();
onMounted(() => {
  var scene = new BabylonScene(canvas.value);
})
</script>
<style lang="scss"></style>

创建相机对象实例

import { Scene, Engine, FreeCamera, HemisphericLight, Vector3, MeshBuilder }from "@babylonjs/core"
export class BabylonScene {
  scene: Scene;
  engine: Engine;
  constructor (privatecanvas: HTMLCanvasElement) {
    // 创建引擎
    this.engine = new Engine(this.canvas, true);
    this.scene = this.CreateScene();
    // 循环引擎
    this.engine.runRenderLoop(() => {
      // 渲染场景
      this.scene.render();
    });
  }
  CreateScene():Scene {
    // 创建场景
    const scene = new Scene(this.engine);
    // 创建和定位自由摄影机
    const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
    // 将摄影机定位到场景原点
    camera.setTarget(Vector3.Zero());
    // 这会将相机连接到画布
    camera.attachControl(this.canvas, true);
    // 创建灯光，目标为0, 1, 0-指向天空
    const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
    // 将灯光调暗一小部分-0到1
    light.intensity = 0.7;
    //内置“球体”形状。
    const sphere= MeshBuilder.CreateSphere("sphere"，{ diameter: 2,segments: 32 }, scene);
    // 将球体向上移动其高度的1/2
    sphere.position.y = 1;
    // 内置“地面”形状。
    const ground = MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
    return scene;
  }
}

使用

// 添加相机
const camera = new ArcRotateCamera(
  'camera1',// 相机名称
  0, // 相机alpha值水平旋转角度
  1, // 相机beta值垂直旋转角度
  10, // 相机半径
  new Vector3(0,0,0), // 相机目标点
  scene // 相机绑定场景
)
  • 弧形旋转相机ArcRotateCamera

弧形旋转相机总是指向一个给定的目标位置，而且能够以此目标位置作为中心进行360°旋转。它的操作体验和观察角度比 通过相机更灵活，同样能够响应鼠标、键盘、游戏手柄和触摸事件。 可将弧形旋转相机视为一个围绕其目标位置进行观察的摄像机，或者想象一下，它更像是一个环绕地球轨道运行的间谍卫星。相对于目标(地球)位置，相机自身的位置可以设置三个参数：即纵向旋转的alpha（弧度），横向旋转的beta（弧度）和代表距目标位置距离的半径radius。

image.png

  • 跟随相机FollowCamera

跟随相机可以一直守望着ta。只要给它一个物体作为跟随目标，跟随相机能够从任何位置移动过来， 一直紧盯目标物体，一旦物体移动了，跟随相机也会跟着移动。
创建跟随相机时需要设置它的初始位置，然后目标位置根据以下三个参数进行控制：

  • camera.radius-相机距离目标的距离

  • camera.heightOffset-相机朝目标上方的偏移

  • camera.rotationOffset-相机与目标在水平面的角度偏移，默认相机和目标在同一水平面：

  • rotationOffset

    增加则相机会朝着顺时针方向围绕物体水平转动。 通过设置camera.cameraAcceleration加速度和camera.maxCameraSpeed最大速度，可以控制相机移动 到目标位置的动态效果。

  • 灯光

    点光PointLight 点光被定义为在3D世界中一个唯一的点，然后光从这个点向各个方向发射。有一个很形象的例子来比 喻点光，那就是电灯泡。

const light = new PointLight(
  'light', // 灯光名称
  new Vector3(1, 10, 10), // 光线反射方向
  scene
)
  • 平行光DirectionalLight

平行光由方向定义，光从指定方向的任意位置发出，具有无限的范围。平行光的一个形象例子就是太 阳光，就好比太阳照射到地球一样，会把地球面对太阳的方向全部照亮

  • 聚光灯SpotLight

聚光灯由位置position，方向direction，角度angle和指数exponent定义。上面的数值决定了圆锥形光 束该从什么位置开始，然后朝哪个方向照射。 角度angle（以弧度为单位）定义了聚光灯圆锥形光束的大小（照亮的区域），指数exponent决定了光 在到达目标的途中时，按距离衰减的速度。

  • 半球光HemisphericLight

半球光是模拟环境光的简便方法，它由一个方向参数定义，位于世界坐标中心(0,0,0)，一般设置灯光方 向朝正上方。

  • 了解基本形状物体及要素
    常用的物体：立方体、球体、平面和地面；使用MeshBuilder方法来创建物体 CreateShape中的Shape可替换为想要创建的物体名称
    第一个参数表示这个物体的名称，第三个参数是加入到的场景scene变量，我们重点介绍第二的参数options可以为物体 设置一些体积、长宽、是否可更改等参数 更多创建方法 立方体：
MeshBuilder.CreateBox(
  'box',
  { size: 2 },
  scene
)
// 球体
MeshBuilder.CreateSphere(
  'sphere',
  { diameter: 2 },//直径
  scene
)
  • 物体的位置和旋转 位置Position,旋转Rotation和缩放Scaling

Babylon.js使用了两种坐标参照系，即世界坐标系world和局部坐标系local，世界坐标系可以理解为：全局坐标系。世界坐标系的原点位置任何时候都是(0,0,0)不会被改变，而局部坐标系会随着物体位置、旋转、缩放的改变而改变。
例如：一个物体的初始位置是(0,0,0)，它世界坐标系和局部坐标系就都是(0,0,0)，当这个物体移动到位置(0,10,0)的时候，也就是向上移动了10的距离，这个时候它世界坐标系还是(0,0,0)和局部坐标系是(0,10,0)。所有位置，旋转和缩放比例均使用三维矢量分别设置，设置的格式为：newVector3（x，y，z）

  1. 准则1-局部坐标系对于局部坐标，物体以中心为原点并沿着其局部坐标轴进行旋转，旋转的顺序为Y、X、Z。如果我们按照三个不同方向正对着观察物体的旋转，那么它们的旋转方向都是逆时针。
    下图中按照顺序展示了执行旋转操作后实验体的方位，
    图1.初始状态
    图2.绕着局部坐标系Y轴旋转π/2弧度
    图3.围绕局部坐标系X轴旋转π/2弧度
    图4.围绕局部坐标系Z轴旋转了π/2弧度。
    图中较小的轴表示世界轴的方向

image.png 2. 准则2-世界坐标系 又称为全局坐标系，与准则1的局部坐标相比，按照世界坐标对物体进行旋转：旋转中心点没有变， 但是旋转轴线变了。
对于世界坐标，物体以中心为原点保持和之前一样，沿着与世界坐标轴进行旋转，旋转的顺序为Z、X、 Y。如果我们按照三个不同方向正对着观察物体的旋转，那么它们的旋转方向都是逆时针。
下图中按照顺序展示了执行旋转操作后实验体的方位，
图1.初始状态
图2.绕着世界坐标系Z轴旋转π/2弧度
图3.围绕局部坐标系X轴旋转π/2弧度
图4.围绕局部坐标系Y轴旋转了π/2弧度

image.png

  • 材质material
    材质被用来覆盖在你的物体上，用来给物体上色或者贴图，要注意一般来说材质要配合灯光才能显示出效果，同一个材质是可以应用到多个物体上面去的。
    使用漫反射颜色diffuseColor、镜面颜色specularColor、自发光颜色emissiveColor以及环境颜色ambientColor来设置材质颜色，这四个颜色可以同时设置也可以只设置其中某一个。再次强调，仅当场景的环境颜色已设置时，环境颜色才能看到效果。
var myMaterial = new StandardMaterial("myMaterial", scene);
myMaterial.diffuseTexture = new Texture("https://kuke-prerelease-new.oss-cn-beijing.aliyuncs.com/img/operatecenter/receiptPath/pc/20240429/1714360973451_
5546.png",scene);
sphere.rotation = new Vector3(Math.PI, 0, 0)
//myMaterial.wireframe = true // 线框
//myMaterial.diffuseColor = new Color3(0, 1, 1);// 漫反射颜色
//myMaterial.specularColor = new Color3(0.5, 0.6, 0.87);// 镜面颜色
myMaterial.emissiveColor = new Color3(1, 0.5, 1);// 自发光颜色
//myMaterial.ambientColor = new Color3(0.23, 0.98, 0.53);// 环境光颜色
sphere.material = myMaterial;
  • 动画
    动画的创建基于一个Animation对象，由各种属性和一组keys组成。每个key代表其在给定时间的动画状态值。
const animationTorus = new Animation("myAnimation", "position", 30, Animation.ANIMATIONTYPE_VECTOR3, Animation.ANIMATIONLOOPMODE_CYCLE);

-- 参数1-动画的名称
-- 参数2-这个与对象的属性相关，可以是任何物体的属性，具体取决于需要更新的内容，上例中我们要在X轴的方向调整Box，所以这里设置为position。
-- 参数3-每秒请求的帧数：动画中可能达到的最高FPS。
-- 参数4-数值变化类型。
确切的值是：
浮点数：BABYLON.Animation.ANIMATIONTYPE_FLOAT
二维向量：BABYLON.Animation.ANIMATIONTYPE_VECTOR2
三维向量：BABYLON.Animation.ANIMATIONTYPE_VECTOR3
四元数：BABYLON.Animation.ANIMATIONTYPE_QUATERNION
矩阵：BABYLON.Animation.ANIMATIONTYPE_MATRIX
颜色：BABYLON.Animation.ANIMATIONTYPE_COLOR3
-- 参数5-动画的在执行完一个周期后，需要执行的行为模式，例如继续运动、从头开始执行还是立即停止，可选三种模式：
相对，相对运动，即：执行完一次，在接着最后的状态，继续执行：
BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
循环，动画循环执行，即：执行完一次，从头开始再执行： BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
常量，动画执行一次就停止不动了：
BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

avatar
文章
阅读
粉丝