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
——Imagic)
 二叉搜索樹(BST)底層和模擬實現)
)
