TGideas-腾讯互动娱乐创意设计团队

认识Babylon.GUI:Web3D交互式用户界面

Babylon.GUI是一款可用于Web3D用户界面的UI组件库,通过它可以很方便地在3D场景中进行UI布局。

一、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入门指南》

求经验
关闭

分享

返回顶部