Babylonjs入门01-HelloWorld

  • 1 介绍
  • 2 Babylonjs的HelloWorld
    • 2.1 Playgroud
    • 2.2 在自己的HTML中使用Babylonjs
  • 3 获取Babylonjs
    • 3.1 CDN的方式
    • 3.2 Github
    • 3.3 npm
  • 4 下一次再见

1 介绍

Babylonjs是一个基于WebGL的三维引擎，可以在浏览器端实现三维渲染。目前主要用于一些三维游戏的开发。不清楚的可以网上搜一下它，目前关于它的学习资料似乎也不是很多，主要都在官网上有具体的例子和详细的文档。
官网传送：Babylonjs英文官网；Babylonjs中文网；
ps：如果说英文比较好的话可以直接看英文官网，否则的话可以看一下中文网。当然，不可避免的要看大量英文的时候，可以借助谷歌浏览器的翻译组件翻译一下。

如果你继续往下看，相信你应该对巴比伦已经有了一定的了解！

本系列文将基于官网上给出的一套教程展开：链接
本人也是一边学习一边写博客，所以难免会有写不清楚甚至出现错误的地方，还请见谅！

2 Babylonjs的HelloWorld

2.1 Playgroud

最开始接触到Babylonjs很可能是在Playground中看官网的例子，打开就是Babylonjs的HelloWorld程序。
Babylonjs入门01——HelloWorld及babylon获取-编程知识网

var createScene = function () {// 首先创建了一个空白场景var scene = new BABYLON.Scene(engine);// 再来个自由相机，放在了上面场景中，相机位置是(0,,5,-10)var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);// 相机一开始看向原点位置camera.setTarget(BABYLON.Vector3.Zero());// 把相机附到画布中camera.attachControl(canvas, true);// 创建平行光，方向var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);// 你可以调节一下光强light.intensity = 0.7;// 给场景再来一个球体，直径是2，segments是块数，值越高越精细，默认是32，位置默认是原点var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);// 调节y坐标，从而球的位置是(0,1,0)，与地面相切sphere.position.y = 1;// 这里就是地面，大小为6x6var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);// OK啦！return scene;
};

相信这个例子经过我的大致翻译你已经大致明白了，不过有两个问题：第一句代码中的engine是在哪里定义的呢？该函数返回的scene是什么作用？
事实上，Playgroud有一个内定的框架，帮你完成了除了“场景”以外的事情。在你自己的HTML中，HelloWorld例子如下文。

2.2 在自己的HTML中使用Babylonjs

在食用之前我已经默认你有基本的HTML、css、JavaScript开发网页的知识，哪怕只是略微的看过书或者视频而并没有自己写过任何一个页面。下面是完整的代码以及重写的注释：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>这里是网页的标题</title><style>html, body {overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}#renderCanvas {width: 100%;height: 100%;touch-action: none;}</style><script src="https://preview.babylonjs.com/babylon.js"></script><script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script><script src="https://code.jquery.com/pep/0.4.3/pep.js"></script></head><body><canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP --><script>var canvas = document.getElementById("renderCanvas"); // 获取到renderCanvas这个要素var engine = new BABYLON.Engine(canvas, true); // 在这里创建巴比伦引擎，这就是回答了上一小节的问题之一/******* 下面就是类似于Playgroud里面createScene函数，但是有一些改动 ******/var createScene = function () {var scene = new BABYLON.Scene(engine);// 这里使用了另一种相机var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);camera.attachControl(canvas, true);// 更改成了两束光构成的混合光var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);// 添加球体var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);return scene;};/******* End of the create scene function ******//* 下面解释createScene()函数怎么用，也就是上一节的第二个问题 */var scene = createScene(); // 首先调用它并赋值给一个变量// 注册一个渲染循环来重复渲染场景engine.runRenderLoop(function () {scene.render();});// 观察浏览器/画布的“resize”事件，也就是大小出现调整的事件window.addEventListener("resize", function () {engine.resize();});</script></body></html>

关于JavaScript部分代码的解释就在代码中，这里再简单给HTML小白解释一下，style标签中描述了样式，这里是占满整个页面。
下面几句话是为了引入babylon的包。

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

除了这种方式，你还可以通过下一节的内容获取babylonjs。

3 获取Babylonjs

3.1 CDN的方式

也就是上文中的方式，通过其内容发布网络获取。这里似乎分稳定版和预览版，具体区别我也暂时不懂，每个不同的包里面有哪些内容我也不太清楚。对于不同的包官网上介绍如下：

  • babylonjs——巴比伦的核心。
  • babylonjs-materials——巴比伦支持的高级材料的集合。
  • babylonjs-loaders——巴比伦的所有官方loaders（OBJ，STL，glTF）。
  • babylonjs-post-process——巴比伦的发布相关。
  • babylonjs-procedural-textures——官方支持的程序纹理。
  • babylonjs-serializers——场景/网格序列化器。
  • babylonjs-gui——巴比伦的GUI模块，可能是开发用户界面用得到的。
  • babylonjs-viewer——独立的BabylonJS Viewer。

如果你也不太清楚的话，可以直接使用上一节中的三句代码引用，或者将下面的内容全部引用：
稳定版比如：

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

预览版比如（cdn改成preview就行）：

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>

3.2 Github

Babylon是开源的，可以在github上下载到全部源代码：链接在此
把它们放在你项目所在的文件夹内，用路径的方式引入到HTML或者你的项目中即可。

3.3 npm

NPM软件包管理器是定义和组织项目依赖项的最佳方法之一，是在Nodejs下定义的，因此你可能要先下载nodejs，然后调用npm命令进行。
本人使用的是vscode编辑器，并使用nodejs的npm软件包管理器管理外部包，也推荐大家使用。步骤如下：
首先下载vscode和node.js，官网即可下载，自己百度一下。
然后vscode客户端中打开控制台，切换到项目所在文件夹，输入下列代码即可：

npm install --save babylonjs

npm中一共有下列这些包（前文见过一次了），将babylonjs改成相应名称即可。

  • babylonjs
  • babylonjs-materials
  • babylonjs-loaders
  • babylonjs-post-process
  • babylonjs-procedural-textures
  • babylonjs-serializers
  • babylonjs-gui
  • babylonjs-viewer

另外，项目中引用时，还需要加入类似如下代码：

import * as BABYLON from 'babylonjs';

4 下一次再见

到此，babylon的初识和获取就已经结束了，后面我们将开始实战了！同学们，冲啊！！！