在之前的文章中，我们已经建立了一个场景，并且实现了动画，这一次着重介绍怎么实现交互式用户界面，以及怎么让模型按照我们的想法运动。 Babylon.js GUI库是可以用来生成交互式用户界面的扩展。它建立在DynamicTexture之上，来建立一个具有完全功能的用户接口。
首先从Babylon.GUI开始，需要一个AdvancedDynamicTexture对象。
在此模式下，Babylon.GUI将覆盖整个屏幕并重新缩放以始终适应您的渲染分辨率。它还将拦截点击（包括触摸）。要以全屏模式创建AdvancedDynamicTexture，只需运行以下代码：
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“myUI”);
默认情况下，渲染分辨率和纹理大小之间的比率为1。但是您可以使用将其强制为不同的值advancedTexture.renderScale。例如，如果您想要更清晰的文本，这可能会很有用。
前景和背景：全屏模式可以在场景的前景或背景中渲染。可以这样设置：
var advancedTexture =BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“myUI”, foreground? : Boolean ); advancedTexture.isForeground = false;
请注意
每个场景仅允许一个全屏模式GUI 全屏模式不适用于WebVR，因为它是纯2D渲染。对于WebVR场景，您将必须使用下面的纹理模式。
在此模式下，BABYLON.GUI将用作给定网格的纹理。您将必须定义纹理的分辨率。要在纹理模式下创建AdvancedDynamicTexture，只需运行以下代码：
var advancedTexture2 = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(myPlane, 1024, 1024);
请注意，在复杂的网格物体上处理指针移动事件可能会花费很多，因此您可以使用第四个参数关闭支持指针移动事件的功能：
var advancedTexture2 =BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(myPlane, 1024, 1024,false);
一旦有了AdvancedDynamicTexture对象，就可以开始添加控件。
控件是UI的抽象。有两种控件：
纯控件： 纯控件定义了对用户有用的操作或信息。它可以是TextBlock或Button。 容器： 容器用于组织用户界面。它们可以包含其他控件或容器。
所有控件共享以下属性：
属性类型默认注释alphanumber1在0和1之间。0表示完全透明，1表示完全不透明colorstringBlack前景色fontFamilystringArial字体可以被继承。如果将其设置在容器上，它将被传输到该容器的所有子级。fontSizenumber18可以继承fontStylestringUnset可以继承fontWeightstringUnset可以继承zIndexnumber0zIndex可用于对z轴上的控件重新排序shadowBlurnumber0应用于阴影的模糊量shadowOffsetXnumber0阴影在X轴上的偏移量shadowOffsetYnumber0阴影在y轴上的偏移量shadowColorstring“#000”阴影的颜色isPointerBlockerbooleanfalse确保在场景事件之前触发gui事件hoverCursorstring“”当鼠标悬停在控件上时使用的光标，需要将isPointerBlocker设置为true控件可以直接添加到AdvancedDynamicTexture或具有以下内容的容器中：
container.addControl(control);
可以使用以下方法删除它们：
container.removeControl(control);
您还可以使用来控制控件的可见性control.isVisible = false。如果isVisible为true，则所有孩子也将不可见。如果您只想隐藏当前控件但保持其子控件可见，则可以使用control.notRenderable = true。
常见的控件有TextBlock、InputText、Button、Checkbox、RadioButton、Slider、Line、Rectangle、StackPanel等，如果有过GDI+的经验，这个看起来会很熟悉。如果想要做详细的的了解，官方说明 已经很好了，官方示例 也是很值得参考的。
当然在使用哪个过程中也会有些许不如意的地方，比如当我在场景中移动的时候，希望模型的标签（数据面板）总是正对着自己，如果使用全屏模式是可以实现的，但是全屏模式的控件并不会随着距离的变化而缩放，这样在较远的位置上，还是一个大大的面板，显然不符合想法；如果是纹理模式却无法做到始终正对着视角。
也有可能是有什么方法，还没找到，如果有路过的大神，可以在评论区留言。
网页上我们想要数据交互，立马就想到了Ajax，当然在这里也可以使用，在创建场景时加入就可以了。
var createScene = function () {……}
获取数据之后直接绑定到控件上就可以了，就像是textbox.text="XYZ"一样。
setInterval(function aa() { $.ajax({ url: '数据路径', type: 'get', dataType: 'json', async: false, success: function (data) { dealdata(data); }, error: function () { writelog(); } }); }, 1000);当然如果使用的是vue框架也是可以的。
官方提供了一个调试的方法，有兴趣的小伙伴可以了解一下。 检查器概述 检查器简介
到这里共用了三篇文章，将加载模型、实现动画、外部数据梳理了一下，通过这些知识已经可以完成一个实践了，可以实现你的场景并关联相关数据内容，但是要达到完美应用还有很多地方需要深入研究，比如： 1、模型的优化，3D图形渲染是需要很多资源的，虽然物理设备的性能参数越来越高，但是对于本身图形的优化仍是不可或缺的一部分，骨骼、贴纸、或者缩减面都是需要投入的。 2、加载的优化，对于一个庞大的虚拟世界，视线肯定是有限的，那么按需加载就很有必要了，需要对LOD有清晰的认知，用唯心主义的说法就是“世界因我而在，闭上眼世界就消失了”。 3、数据的优化，数据的优化包含两方面，第一个与模型加载类似，看不到的地方没有必要那么多数据；第二个就是如何保证场景中的模型状态与实体状态保持一致，如何自动识偏与纠正。 4、仿真问题，仿真是一个很大的问题，虽然重力、碰撞有了一定的实践，但是想要做到CAE软件一样的物理特性模拟还有很长一段路需要走，所以不要过分依赖于图形展示，逻辑运算与图形界面不要混为一谈，核心的 物理模拟与数据分析 任然需要 核心的算法 实现。
上一篇：BabylonJS入门——初探：注入活力
