babylonjs设置⾯板位置_认识Babylon.GUI：Web3D交互式⽤
户界⾯
⼀、Babylon.GUI是什么
1.简介
Babylon.GUI是⼀款可⽤于Web3D⽤户界⾯的UI组件库，使⽤Babylon.GUI可以使我们像在2D平⾯中布局UI那样在3D场景中放置按钮、⽂本标签和⾯板等各种控件，此外它还⽀持在WebVR中布局UI。
2.最初的印象
⼆、使⽤
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⽅
法。
代码⽚段：
4.通过Button创建按钮
代码⽚段：
var button = BABYLON.GUI.Button.CreateSimpleButton("button", "按钮⽂本");

button.left = "0px";
button.width = "150px";
button.height = "50px";
button.thickness = 4;
button.children[0].color = "#DFF9FB";
button.children[0].fontSize = 24;
button.background = "#EB4D4B";
advancedTexture.addControl(button);
5.点击交互
GUI的所有控件都可以被侦听到以下7种事件。
事件
触发条件
onPointerMoveObservable
当光标移到控件上⽅时触发，仅在全屏模式下可⽤
onPointerEnterObservable
当光标进⼊控件时触发，仅在全屏模式下可⽤
onPointerOutObservable
当光标离开控件时触发，仅在全屏模式下可⽤
onPointerDownObservable
当指针在控件上向下时触发
onPointerUpObservable
当指针在控件上时触发
onPointerClickObservable
单击控件时触发
onClipboardObservable
触发剪贴板事件时触发
侦听时可以采⽤以下的写法(这是Babylon中回调函数的惯⽤写法)，add中的函数即为事件的回调函数。
代码⽚段：
{
clicks++;
if (clicks % 2 == 0)
{
button.background = "#EB4D4B";
}
改变button按钮的形状
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.thickness = 4;
rect.background = "green";
advancedTexture.addControl(rect);
6.2.椭圆容器Ellipse
代码⽚段：
var ellipse = new BABYLON.GUI.Ellipse();
ellipse.width = "100px";
ellipse.height = "100px";
ellipse.thickness = 4;
ellipse.background = "green";
advancedTexture.addControl(ellipse);
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.background = "green";
panel.addControl(button);
var button2 = BABYLON.GUI.Button.CreateSimpleButton("but2", "Click Me also!");
button2.width = 0.2;
button2.height = "40px";
button2.background = "green";
panel.addControl(button2);
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列的单元格
此外还可以使⽤以下功能更新或删除⾏和列：
setRowDefinition(index，height，isPixel)：更新⾏定义
setColumnDefinition(index，width，isPixel)：更新列定义
removeRowDefinition(index)：删除指定索引处的⾏定义
removeColumnDefinition(index)：删除指定索引处的列定义
7.其他控件
除了上⽂提到的Image、Button、容器三种控件外，Babylon.GUI还提供了以下的控件：
控件
作⽤
TextBlock
⽂本块，可以⽤于显⽰简单的⽂本
InputText
⽂本输⼊框，可以让⽤户在其中填写⽂本
Checkbox