免责声明: 注意!!!!! 本库基于babylonjs-gui实现
仓库地址:github.com/MILIFIRE/is… (求小星星 🌟)
npm地址:www.npmjs.com/package/isi…
起因 在webgl项目中,我们会需要确认框、提示窗、加载条等等UI,实现方式两种
canvas上叠加dom元素来显示 和 纯canvas 实现
需要解决的点
1.随着VR的发现,客户会希望使用webxr技术实现交互项目,在webxr沉浸式模式下无法使用dom元素
第一种模式下M端可以,但是VR端沉浸式不可以,所以开发成文本是双倍的(需要降本增效)
- webglGUI 的代码开发类似于JQ时代落后,如果使用组件开发效率和复用性很高,代码对比
// 原生开发 GUI
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
var panel = new BABYLON.GUI.StackPanel();
advancedTexture.addControl(panel);
var rect1 = new BABYLON.GUI.Rectangle();
rect1.width = 0.2;
rect1.height = "40px";
rect1.cornerRadius = 20;
rect1.color = "Orange";
rect1.thickness = 4;
rect1.background = "green";
panel.addControl(rect1);
var rect2 = new BABYLON.GUI.Rectangle();
rect2.width = 0.1;
rect2.height = "40px";
rect2.cornerRadius = 20;
rect2.color = "Orange";
rect2.thickness = 4;
rect2.background = "green";
panel.addControl(rect2);
// 组件化开发
<AdvancedDynamicTexture v-if="textureRef" :texture="textureRef">
<StackPanel :isHighlighted="true" :rowIndex="2" :columnIndex="2">
<Rectangle
:thickness="4"
color="Orange"
:cornerRadius="20"
background="red"
width="40px"
height="40px"
></Rectangle>
<Rectangle
:thickness="4"
color="Orange"
:cornerRadius="20"
background="red"
width="40px"
height="40px"
></Rectangle>
<Rectangle
:thickness="4"
:cornerRadius="0"
background="red"
width="40px"
height="40px"
:onPointerOutObservable="log"
:scaleX="0.5"
>
</Rectangle>
</StackPanel>
</AdvancedDynamicTexture>
优点与缺点
- 组件偏少目前只有基础的组件
- 轻量化基于VUE3虚拟节点实现
- 有效降低webgl项目UI开发成本,复用性提高
- 得益于组件生命周期自动回收
教程 编写中......