ISIN-UI 可能是第一个VUE3的Webgl组件库

免责声明: 注意!!!!! 本库基于babylonjs-gui实现

仓库地址：github.com/MILIFIRE/is… （求小星星 🌟）

npm地址：www.npmjs.com/package/isi…

起因 在webgl项目中，我们会需要确认框、提示窗、加载条等等UI，实现方式两种

canvas上叠加dom元素来显示 和 纯canvas 实现

需要解决的点

1.随着VR的发现，客户会希望使用webxr技术实现交互项目，在webxr沉浸式模式下无法使用dom元素

第一种模式下M端可以，但是VR端沉浸式不可以，所以开发成文本是双倍的(需要降本增效)

2. 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>

优点与缺点

1. 组件偏少目前只有基础的组件
2. 轻量化基于VUE3虚拟节点实现
3. 有效降低webgl项目UI开发成本，复用性提高
4. 得益于组件生命周期自动回收

教程 编写中......