一、Babylon.GUI是什么

1.简介

　　Babylon.GUI是一款可用于Web3D用户界面的UI组件库，使用Babylon.GUI可以使我们像在2D平面中布局UI那样在3D场景中放置按钮、文本标签和面板等各种控件，此外它还支持在WebVR中布局UI。

2.最初的印象

Babylon.GUI的演示Demo：https://www.babylonjs.com/demos/gui

二、使用

1.引入JS

　　通过此地址可以获得Babylon.GUI的JS版本与TS版本的最新文件，或者查看其源代码。

2.从AdvancedDynamicTexture开始

　　Babylon.GUI使用DynamicTexture来生成功能齐全且灵活的用户界面，同时它还可以享受到GPU的加速。

　　代码片段：

　　　　var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

 

　　GUI有两种模式，CreateFullscreenUI是其全屏模式，在此模式下，Babylon.GUI将覆盖整个屏幕并重新缩放以始终适应项目的渲染分辨率。

　　使用全屏模式时有两点需要注意，首先每个3D场景仅允许存在一个全屏模式的GUI，其次它会拦截所有的点击事件和触摸事件。

　　GUI的另一个模式是纹理模式，可以通过CreateForMesh来创建纹理模式的GUI，第一个参数与全屏模式一样都是指定UI的名称，第二个参数是宽度，第三个参数是高度。

　　代码片段：

　　　　var advancedTexture2 = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh("UI", 1024, 1024);

3.通过Image创建位图

　　代码片段：

　　　　var bottomBG = new BABYLON.GUI.Image("bottomBG", "images/figureBG.png");

　　　　bottomBG.width = "640px";

　　　　bottomBG.height = "300px";

　　　　advancedTexture.addControl(bottomBG);

　　通过addControl将Image控件添加到GUI并显示出来，如果想移除某个UI，可以使用removeControl方法。

　　代码片段：

　　　　advancedTexture.removeControl(bottomBG);

4.通过Button创建按钮

　　代码片段：

　　　　var button = BABYLON.GUI.Button.CreateSimpleButton("button", "按钮文本");

　　　　button.top = "0px";

　　　　button.left = "0px";

　　　　button.width = "150px";

　　　　button.height = "50px";

　　　　button.cornerRadius = 20;

　　　　button.thickness = 4;

　　　　button.children[0].color = "#DFF9FB";

　　　　button.children[0].fontSize = 24;

　　　　button.color = "#FF7979";

　　　　button.background = "#EB4D4B";

　　　　advancedTexture.addControl(button);

5.点击交互

　　GUI的所有控件都可以被侦听到以下7种事件。

事件	触发条件
onPointerMoveObservable	当光标移到控件上方时触发，仅在全屏模式下可用
onPointerEnterObservable	当光标进入控件时触发，仅在全屏模式下可用
onPointerOutObservable	当光标离开控件时触发，仅在全屏模式下可用
onPointerDownObservable	当指针在控件上向下时触发
onPointerUpObservable	当指针在控件上时触发
onPointerClickObservable	单击控件时触发
onClipboardObservable	触发剪贴板事件时触发

　　侦听时可以采用以下的写法（这是Babylon中回调函数的惯用写法），add中的函数即为事件的回调函数。

　　代码片段：

　　　　button.onPointerClickObservable.add(function ()
　　　　{

　　　　　　clicks++;

　　　　　　if (clicks % 2 == 0)
　　　　　　{

　　　　　　　　button.background = "#EB4D4B";

　　　　　　}
　　　　　　else
　　　　　　{

　　　　　　　　button.background = "#007900";

　　　　　　}

　　　　　　button.children[0].text = "被点击了: " + clicks + "次";

　　　　});

6.容器

　　容器可以用来承载其他控件，默认情况下容器不阻断鼠标事件，也就意味着即使指针在容器的上方，场景也会接收到指针事件，如果想改变这种默认行为，可以通过使用isPointerBlocker来防止。

　　代码片段：

　　　　container.isPointerBlocker = true;//阻断事件

　　默认情况下容器会将其子对象限制在其边界范围内，可以通过以下代码来禁用这个默认行为：

　　代码片段：

　　　　container.clipChildren = false;//不限制子对象的位置

6.1.矩形容器Rectangle

　　代码片段：

　　　　var rect = new BABYLON.GUI.Rectangle();

　　　　rect.width = 0.2;

　　　　rect.height = "40px";

　　　　rect.cornerRadius = 20;

　　　　rect.color = "red";

　　　　rect.thickness = 4;

　　　　rect.background = "green";

　　　　advancedTexture.addControl(rect);

　　示例Demo：https://www.babylonjs-playground.com/#XCPP9Y#8

6.2.椭圆容器Ellipse

　　代码片段：

　　　　var ellipse = new BABYLON.GUI.Ellipse();

　　　　ellipse.width = "100px";

　　　　ellipse.height = "100px";

　　　　ellipse.color = "Orange";

　　　　ellipse.thickness = 4;

　　　　ellipse.background = "green";

　　　　advancedTexture.addControl(ellipse);

　　示例Demo：https://www.babylonjs-playground.com/#XCPP9Y#10

6.3.堆栈容器StackPanel

　　堆栈容器可以按水平或垂直方向来堆叠其子对象，所有的子对象必须事先定义好宽度、高度后才可使用堆栈容器。

　　代码片段：

　　　　var panel = new BABYLON.GUI.StackPanel();

　　　　advancedTexture.addControl(panel);

 

　　　　var button = BABYLON.GUI.Button.CreateSimpleButton("but", "Click Me");

　　　　button.width = 0.2;

　　　　button.height = "40px";

　　　　button.color = "white";

　　　　button.background = "green";

　　　　panel.addControl(button);

 

　　　　var button2 = BABYLON.GUI.Button.CreateSimpleButton("but2", "Click Me also!");

　　　　button2.width = 0.2;

　　　　button2.height = "40px";

　　　　button2.color = "white";

　　　　button2.background = "green";

　　　　panel.addControl(button2);

　　示例Demo：https://www.babylonjs-playground.com/#XCPP9Y#11

6.4.网格容器Grid

　　网格容器可以定义行与列，并允许其子对象指定它们要待的单元格。

　　addColumnDefinition（width，isPixel）：使用此函数可以创建一个新列。如果isPixel为false，则为百分比模式，宽度width可以在0到1之间，如果isPixel为true，则宽度width为具体的像素值。

　　addRowDefinition（height，isPixel）：使用此函数可以创建一个新行。如果isPixel为false，则为百分比模式，高度height可以在0到1之间，如果isPixel为true，则高度height为具体的像素值。

　　代码片段：

　　　　var grid = new BABYLON.GUI.Grid();

　　　　//这是一个由4列组成的网格，其中第一个和最后一个宽100像素，第二个和第三个分别具有剩余空间的50%的宽度。

　　　　grid.addColumnDefinition(100, true);//100像素 　　　

　　　　grid.addColumnDefinition(0.5);//50%

　　　　grid.addColumnDefinition(0.5);//50%

　　　　grid.addColumnDefinition(100, true);//100像素

 

　　　　var rect = new BABYLON.GUI.Rectangle();

　　　　rect.background = "green";

　　　　rect.thickness = 0;

　　　　grid.addControl(rect, 0, 1);//将矩形容器rect放置到网格容器的第1行第2列中（网格的行与列均从0开始计）

　　　　var targetGrid = grid.(0, 2);//获取第1行第3列的单元格

　　示例Demo：https://www.babylonjs-playground.com/#KX33X8#1

　　此外还可以使用以下功能更新或删除行和列：

　　setRowDefinition（index，height，isPixel）：更新行定义

　　setColumnDefinition（index，width，isPixel）：更新列定义

　　removeRowDefinition（index）：删除指定索引处的行定义

　　removeColumnDefinition（index）：删除指定索引处的列定义

7.其他控件

　　除了上文提到的Image、Button、容器三种控件外，Babylon.GUI还提供了以下的控件：

控件	作用
TextBlock	文本块，可以用于显示简单的文本
InputText	文本输入框，可以让用户在其中填写文本
Checkbox	复选框
RadioButton	单选按钮
Slider	滑块，可以用来在一个范围内控制一个值
Line	线段，在两点之间绘制一条线
MultiLine	多线，可以在任意数量的网格、控件、点之间绘制线
ColorPicker	拾色器，可以让用户在其中挑选颜色
DisplayGrid	显示网格，用于在GUI内部显示网格
VirtualKeyboard	虚拟键盘

　　想更深入了解Babylon.GUI，或者在使用过程中遇到问题时，可以查阅此文档。

三、结语

　　Babylon.GUI预设的多种UI控件可以帮助我们便捷地在Web3D中布局UI，节省控件开发及屏幕适配的时间，但它不是唯一一个可用于Babylon的UI组件库，CastorGUI、Dat.GUI，甚至HTML都可以用来为Babylon构建UI。

　　对Babylon这款Web3D引擎感兴趣的同学可以通过此文章进一步了解：《认识Babylon：Web3D入门指南》