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

1,384 阅读1分钟

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

仓库地址:github.com/MILIFIRE/is… (求小星星 🌟)

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

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

image.png

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

需要解决的点

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

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

  1. 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. 得益于组件生命周期自动回收

教程 编写中......