Babylon.js 7.0开发入门教程

Babylon.js 是一个功能强大的开源 3D 引擎，能够使用 JavaScript 渲染交互式 3D 和 2D 图形。它是为 Web 甚至 VR 创建游戏、演示、可视化和其他 3D 应用程序的绝佳选择。Babylon.js最新版本是7.0。

Babylon.js 是免费、开源和跨平台的，是 Unity 和 Unreal Engine 等专有 3D 引擎的绝佳替代品。它也是 Three.js 和 PlayCanvas 等其他开源 3D 引擎的绝佳替代品，因为它提供开箱即用的 TypeScript 类型，针对性能进行了优化，并提供了高级调试工具。它的开发人员体验非常出色，并且拥有庞大且活跃的社区，这使其成为初学者和专家创建 Web 3D 应用程序的绝佳选择。

NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割

1、Babylon.js开发入门

Babylon.js 支持 ES6 和 CommonJS 模块导入：

CommonJS Babylon.js npm 包支持 CommonJS/ES6 导入、UMD 和 AMD 导入
对于通过 Tree Shaking 寻求优化的开发人员，Babylon.js 提供了 ES6 软件包。其中包括用于核心功能的 @babylonjs/core，以及 @babylonjs/materials、 @babylonjs/loaders、 @babylonjs/gui 等附加模块。重要的是不要混合 ES6 和遗留包

如果你想使用 CommonJS 模块导入，你可以安装 Babylon.js，如下所示：

npm install --save babylonjs

然后，将其包含在你的 JavaScript 或 TypeScript 文件中：

import * as BABYLON from "babylonjs";

如果你想使用 ES6 模块导入，可以安装 Babylon.js，如下所示：

npm install --save @babylonjs/core

然后，将其包含在你的 JavaScript 或 TypeScript 文件中：

import { Engine, Scene } from "@babylonjs/core";

我更喜欢 ES6 模块导入，因为它们允许进行树摇动，这可以显着减少最终包的大小。但是，在本教程中，我将使用 CommonJS 模块导入，因为 Babylon.js 游乐场使用的是 CommonJS 模块导入。

2、创建第一个Babylon.js 场景

Babylon.js Playground （游乐场）是学习和开发 Babylon.js 的必备工具。这是一个用户友好的环境，你可以在其中编写代码并立即在实时场景中查看结果。游乐场配有默认场景，尝试它是一个很好的开始方式。

除了使用默认场景之外，如果想查看特定功能的示例，你还可以搜索游乐场。例如，如果你搜索“物理学”，会发现几个实际应用中的物理学示例。

游乐场还经常用于在寻求帮助和帮助他人时在 Babylon.js 论坛上分享代码片段。我经常发现自己在谷歌上搜索特定的 Babylon.js 问题或功能，并找到一个游乐场示例来帮助我理解和解决我的问题。

2.1 创建和修改网格

网格是 3D 图形的基础。在 Babylon.js 中，创建基本网格（如球体）涉及几行代码：

var sphere = BABYLON.MeshBuilder.CreateSphere(
  "sphere",
  { diameter: 2, segments: 32 },
  scene
);
sphere.position.y = 1;

你还可以创建材质并将其分配给网格以更改其外观。例如，要将地平面设为红色，你可以编写：

const groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
groundMaterial.diffuseColor = BABYLON.Color3.Red();
ground.material = groundMaterial;

纹理也可以添加到材质中：

var groundTexture = new BABYLON.Texture(
  Assets.textures.checkerboard_basecolor_png.rootUrl,
  scene
);
groundMaterial.diffuseTexture = groundTexture;

2.2 导入和使用网格

Babylon.js 允许导入复杂的网格，可以在场景中缩放和定位：

BABYLON.SceneLoader.ImportMesh(
  "",
  Assets.meshes.MyCustomMesh.rootUrl,
  Assets.meshes.MyCustomMesh.filename,
  scene,
  function (newMeshes) {
    newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
  }
);

2.3 使场景具有互动性

交互性是网络体验的一个关键方面。将控件附加到相机可以通过单击和拖动操作进行用户交互。

var camera = new BABYLON.ArcRotateCamera(
  "Camera",
  0,
  0,
  10,
  BABYLON.Vector3.Zero(),
  scene
);
camera.attachControl(canvas, true);

2.4 添加虚拟现实支持

虚拟现实是一项令人兴奋的新技术，可以让用户更加身临其境地体验 3D 环境。 Babylon.js 内置了对虚拟现实的支持，只需几行代码即可启用：

const experience = await scene.createDefaultXRExperienceAsync();
const camera = experience.baseExperience.camera;
camera.attachControl(true);

你只需创建 XR 体验，从基础体验中获取相机，并将其附加到画布上，你就应该为 VR 做好准备。如果没有 VR 耳机，你仍然可以使用沉浸式 Web 模拟器 Chrome 扩展程序在 VR 中测试场景。

2.5 添加物理

物理是许多 3D 应用的重要组成部分。 Babylon.js 有一个内置的物理引擎，可以通过几行代码启用：

var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);

可以通过设置网格的 physicsImpostor属性将物理应用于网格：

sphere.physicsImpostor = new BABYLON.PhysicsImpostor(
  sphere,
  BABYLON.PhysicsImpostor.SphereImpostor,
  { mass: 1, restitution: 0.9 },
  scene
);

2.6 添加灯光

灯光对于创建逼真的场景至关重要。在 Babylon.js 中，有四种主要类型的灯光，每种类型都提供独特的属性和效果：

定向光：模仿阳光，在整个场景中发出平行光线。它由方向向量定义并且具有无限范围。
点光：类似于灯泡，从空间中的单个点向各个方向均匀地辐射光。
聚光灯：功能类似于手电筒，从给定方向的特定位置发出锥形光束。其照明面积和衰减由角度和指数参数控制。
半球光：模拟周围环境照明，由方向定义，通常向上。其效果受设置不同颜色属性的影响。

每种灯光类型都可以使用强度和范围等属性进行自定义，并且可以控制它们照亮哪些网格。对于更复杂的光照场景，可以利用光照贴图来预先计算和存储光照效果。

例如，要向场景添加定向光，可以编写：

var light = new BABYLON.DirectionalLight(
  "DirectionalLight",
  new BABYLON.Vector3(0, -1, 0),
  scene
);

2.7 添加阴影

阴影是创建真实场景的重要组成部分，因为它们可以提供有关对象相对位置和距离的线索，从而增强深度和维度的感知，从而帮助传达场景的 3D 结构。 Babylon.js 有多种类型的阴影，包括 PCF、PCFSoft 和 PCSS。例如，要将 PCF 阴影添加到场景中，您可以编写：

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.usePoissonSampling = true;
shadowGenerator.bias = 0.0001;
shadowGenerator.normalBias = 0.01;
shadowGenerator.setDarkness(0.5);
shadowGenerator.useBlurExponentialShadowMap = true;
shadowGenerator.blurKernel = 32;
shadowGenerator.blurScale = 2;
shadowGenerator.blurBoxOffset = 1;
shadowGenerator.useKernelBlur = true;

shadowGenerator.addShadowCaster(sphere);

2.8 添加音频

音频是许多 3D 应用程序的重要组成部分。 Babylon.js 有一个内置的音频引擎，可以通过几行代码启用：

var audioEngine = new BABYLON.AudioEngine();

可以通过创建声音对象将音频添加到场景中：

var sound = new BABYLON.Sound(
  "Sound",
  `${Assets.sound.cannonBlast.rootUrl}${Assets.sound.cannonBlast.filename}`,
  scene,
  null,
  { loop: true, autoplay: true }
);

这个特定的示例将在场景中循环播放“炮弹爆炸”声音。大炮爆炸资源已预加载到 Babylon.js 游乐场中。如果您要在应用程序中加载自定义资源，您只需提供一个指向文件系统上的声音文件的 URL。有关更多详细信息，您可以查看有关 Babylon.js 中播放声音的文档。

2.9 添加用户界面元素

用户界面元素可用于向场景添加交互性。 Babylon.js 提供了一个构建在 DynamicTexture 之上的 GUI 库扩展。

例如，要将一个对话框添加到包含按钮的场景中，可以编写：

var guiManager = new BABYLON.GUI.GUI3DManager(scene);

const slate = new BABYLON.GUI.HolographicSlate("down");
slate.minDimensions = new BABYLON.Vector2(5, 5);
slate.dimensions = new BABYLON.Vector2(5, 5);
slate.titleBarHeight = 0.75;
slate.title = "Button!";
guiManager.addControl(slate);

var button = BABYLON.GUI.Button.CreateSimpleButton("button", "Click me!");
button.width = 0.5;
button.height = 0.25;
button.background = "green";
button.textBlock.color = "white";
button.onPointerClickObservable.add(() => {
  alert("Hi!");
});

slate.content = button;
slate.position = new BABYLON.Vector3(-2, 2, 0);

要使用 ES6 版本，你需要安装 @babylonjs/gui 包：

npm install --save @babylonjs/gui

然后，将其导入 JavaScript 或 TypeScript 文件，如下所示：

import { GUI3DManager, HolographicSlate, Button } from "@babylonjs/gui";

提示：如果你不喜欢允许用户倾斜 HolographicSlate 的控件，可以在将石板添加到场景后，通过设置 slate._gizmo._rootMesh.setEnabled(false); 来禁用它们。

2.10 添加动画

动画可用于向场景添加运动。 Babylon.js 有多种类型的动画，包括关键帧、骨骼和变形目标。

例如，要将关键帧动画添加到场景中，可以编写：

var animationBox = new BABYLON.Animation(
  "myAnimation",
  "scaling.x",
  30,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);
var keys = [];
keys.push({
  frame: 0,
  value: 1,
});
keys.push({
  frame: 20,
  value: 0.2,
});
keys.push({
  frame: 100,
  value: 1,
});
animationBox.setKeys(keys);
sphere.animations.push(animationBox);
scene.beginAnimation(sphere, 0, 100, true);

以下是该代码的作用的解释：

动画创建。

创建一个名为“myAnimation”的 BABYLON.Animation 对象来为 scaling.x 属性设置动画，表明动画将影响对象的宽度。它以每秒 30 帧的速度运行，值表示为浮点数，并连续循环。

定义关键帧。

定义了三个关键帧：

在第 0 帧，比例为 1（原始尺寸）。
在第 20 帧，比例减小到 0.2。
在第 100 帧处，比例返回到 1。

应用和启动动画。

动画被分配给球体对象并立即开始，在第 0 帧和第 100 帧之间循环。这会在球体的宽度上创建脉动效果。

要更深入地了解动画，可以查看 Babylon.js 动画文档。

2.11 调试

调试是任何开发过程的重要组成部分。 Babylon.js 有一个内置的调试层，可以通过几行代码启用：

scene.debugLayer.show();

调试层提供了一个用户友好的界面，用于检查和修改场景。它还可以向你显示当前的帧速率和其他性能指标，并允许你导出性能数据。

如果使用 ES6 模块导入，则需要安装 @babylonjs/inspector 包：

npm install --save @babylonjs/inspector

然后，将其导入 JavaScript 或 TypeScript 文件，如下所示：

import "@babylonjs/inspector";

2.12 托管和共享你的场景

一旦你对自己的创作感到满意，可以将其下载为 HTML 文件并将其托管在 GitHub Pages 等平台上，以便全世界都可以访问。

你还可以通过Playground URL 与其他人分享你的场景。例如，默认场景的 URL 为：https://playground.babylonjs.com/#6QY4X1#1 。

如果想将场景与你选择的框架集成，可以查看 Babylon.js 外部库文档，其中可以找到 Babylon.js 与 React、Vue 或 Ionic Angular 等框架一起使用的示例。

3、结束语

Babylon.js 是一个功能强大的开源 3D 引擎，能够使用 JavaScript 渲染交互式 3D 和 2D 图形。它得到了良好的支持和维护，通过许多交互式游乐场示例和支持性社区论坛提供了良好的开发人员体验，使其成为创建游戏、演示、可视化和其他网络 3D 应用程序（最终甚至是本机平台）的绝佳选择。

原文链接：Babylon.js 7.0 开发入门 - BimAnt