Babylon.js 入门 - 第 1 章 - 第一个场景、模型、应用
Babylon.js 入门 - 第 1 章 - 第一个场景、模型、应用
现在是时候一起开始我们的学习之旅了。第一步将向您介绍使用 Babylon.js 创建场景、编写简单模型并将其导出的基础知识。Babylon.js 不仅可以创建模型，还可以将在其他软件中创建的一系列模型类型导入 Babylon.js。我们将向您展示如何将模型导入场景、将其显示在 Web 上或从中创建 Web 应用程序。从通常的 Hello World 开始，我们将逐步构建一个简单的世界。在旅程的最后，我们将创建一个展示 Babylon.js 功能的小村庄。
第一个场景
第一个场景和模型
无论您是创建一个完整的世界还是只是将一个模型放入网页中，您都需要一个包含该世界或模型的场景、一台摄像机来观察它、一个光源照亮它，当然，至少还有一个可视对象作为模型。所有模型，无论是一个盒子还是一个复杂的角色，都是由三角形或面的网格制成的。
我们可以直接在 Babylon.js 中用代码创建大量网格，也可以把其他软件创建的网格导入为模型。让我们从一个盒子开始。
向你的第一个世界问好
所有使用 Babylon.js 引擎的项目都需要一个添加了相机和光源的场景。然后我们可以创建我们的盒子。
等等……你问的 Babylon.js 引擎是什么？很好的问题。下面看到的引擎变量是负责与 WegGL、Audio 等较低级别 API 交互的类。创建一个 Babylon.js 中的场景(将视觉呈现到屏幕的上下文)的构造函数需要引擎与这些较低级别的 API 进行交互。这就是创建场景时需要引擎变量的原因。
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
像大多数使用 MeshBuilder 创建的网格一样，创建的盒子的中心位于原点，并且创建需要三个参数。它们是名称(string)、选项(object)、和场景(scene)。通过将选项设置为空对象 {}，盒子将默认其宽度、高度和深度为一个单位大小。
为了更方便，我们需要将它们放在一个名为 createScene 的函数中，该函数必须返回一个场景。
const createScene = () => {const scene = new BABYLON.Scene(engine);const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));camera.attachControl(canvas, true);const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));const box = BABYLON.MeshBuilder.CreateBox("box", {});return scene;
}
由于此时只有一个场景，您可能会注意到参数场景(scene)可以在创建相机、灯光和盒子的参数中删除，因为默认情况下将它们放置在当前场景中。
示例链接
示例代码：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Babylon.js sample codetitle><script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js">script><script src="https://preview.babylonjs.com/ammo.js">script><script src="https://preview.babylonjs.com/cannon.js">script><script src="https://preview.babylonjs.com/Oimo.js">script><script src="https://preview.babylonjs.com/earcut.min.js">script><script src="https://preview.babylonjs.com/babylon.js">script><script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js">script><script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">script><script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js">script><script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js">script><script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js">script><script src="https://preview.babylonjs.com/gui/babylon.gui.min.js">script><script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js">script><style>html,body {overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}#renderCanvas {width: 100%;height: 100%;touch-action: none;}style>
head><body><canvas id="renderCanvas">canvas><script>var canvas = document.getElementById("renderCanvas");var startRenderLoop = function (engine, canvas) {engine.runRenderLoop(function () {if (sceneToRender && sceneToRender.activeCamera) {sceneToRender.render();}});}var engine = null;var scene = null;var sceneToRender = null;var createDefaultEngine = function () {return new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true,stencil: true,disableWebGL2Support: false});};const createScene = () => {const scene = new BABYLON.Scene(engine);const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));camera.attachControl(canvas, true);const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));const box = BABYLON.MeshBuilder.CreateBox("box", {});return scene;}window.initFunction = async function () {var asyncEngineCreation = async function () {try {return createDefaultEngine();} catch (e) {console.log("the available createEngine function failed. Creating the default engine instead");return createDefaultEngine();}}window.engine = await asyncEngineCreation();if (!engine) throw 'engine should not be null.';startRenderLoop(engine, canvas);window.scene = createScene();};initFunction().then(() => {sceneToRender = scene});// Resizewindow.addEventListener("resize", function () {engine.resize();});script>
body>html>
增强您的网站效果
网页上的第一个模型
如果模型的文件类型是 Babylon.js 可以识别的文件类型，那么您可以使用 Babylon.js 的查看器通过 Babylon.js 识别的模型文件类型有 .babylon、.gltf 和 .glb，推荐使用 .glb。无论场景是使用 Babylon.js 构建还是使用您最喜欢的设计软件创建，都没有区别。
为了使用查看器，您需要将以下代码添加到 HTML 页面的
