Babylon.js 第15章 GUI

最新推荐文章于 2024-04-26 09:51:51 发布

Jake N

最新推荐文章于 2024-04-26 09:51:51 发布

阅读量1.3k

点赞数

分类专栏： Babylon.js教程文章标签： javascript ui html

本文链接：https://blog.csdn.net/m0_73334402/article/details/126743222

版权

一、创建GUI的两种模式

全屏模式，只能创建一个：

    // GUI
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.
        CreateFullscreenUI("UI",true);
    //渲染分辨率和纹理大小之间的比率为 1。但您可以使用
    //advancedTexture.renderScale. 例如，如果您想要更清晰的文本，这可能会很有用。
    //设置分辨率
    advancedTexture.idealWidth=500
    advancedTexture.idealHeight=500
    let button1=BABYLON.GUI.Button.CreateSimpleButton('btn','按钮')
    button1.width=5
    button1.height=1
    button1.color='white'
    button1.background='red'
    button1.fontSize=50
    button1.onPointerUpObservable.add(function(){
        sphere.scaling.y=5
    })
    advancedTexture.addControl(button1)

纹理模式：

    let advancedTexture1=BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(
        plane,
        1024,
        1024,
        false
    )
    let button1=BABYLON.GUI.Button.CreateSimpleButton('btn','按钮')
    button1.width=5
    button1.height=1
    button1.color='white'
    button1.background='red'
    button1.fontSize=50
    button1.onPointerUpObservable.add(function(){
        sphere.scaling.y=5
    })
    advancedTexture1.addControl(button1)

在复杂的网格上处理指针移动事件可能代价高昂，因此您可以使用第四个参数关闭支持指针移动事件。

二、observables属性