WebGL：BabylonJS入门——初探：数据展示

Babylon.GUI的两种模式

在之前的文章中，我们已经建立了一个场景，并且实现了动画，这一次着重介绍怎么实现交互式用户界面，以及怎么让模型按照我们的想法运动。
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对象，就可以开始添加控件。

BabylonJS控件

控件是UI的抽象。有两种控件：

纯控件： 纯控件定义了对用户有用的操作或信息。它可以是TextBlock或Button。
容器： 容器用于组织用户界面。它们可以包含其他控件或容器。

所有控件共享以下属性：

属性	类型	默认	注释
alpha	number	1	在0和1之间。0表示完全透明，1表示完全不透明
color	string	Black	前景色
fontFamily	string	Arial	字体可以被继承。如果将其设置在容器上，它将被传输到该容器的所有子级。
fontSize	number	18	可以继承
fontStyle	string	Unset	可以继承
fontWeight	string	Unset	可以继承
zIndex	number	0	zIndex可用于对z轴上的控件重新排序
shadowBlur	number	0	应用于阴影的模糊量
shadowOffsetX	number	0	阴影在X轴上的偏移量
shadowOffsetY	number	0	阴影在y轴上的偏移量
shadowColor	string	“#000”	阴影的颜色
isPointerBlocker	boolean	false	确保在场景事件之前触发gui事件
hoverCursor	string	“”	当鼠标悬停在控件上时使用的光标，需要将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入门——初探：注入活力