WebGL BabylonJS GUI 如何创建连接模型的按钮

如图所示:

方法:

javascript 复制代码
 createGUI(mesh: BABYLON.Mesh, title: string, index: number) {
    const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI('UI')

    const rect = new Rectangle()
    rect.width = '100px'
    rect.height = '40px'
    rect.thickness = 0
    advancedTexture.addControl(rect)
    rect.linkWithMesh(mesh)
    rect.linkOffsetY = -120

    const backgroundImage = createImage('backgroundImage', 'texture/area-btn-bg.png', 1, 0.9)
    backgroundImage.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP
    rect.addControl(backgroundImage)

    const button = Button.CreateSimpleButton(`area-button-${index}`, title)
    button.thickness = 0
    button.fontSize = '16px'
    // button.background = 'rgb(45,149,251)'
    button.cornerRadius = 80
    button.color = 'white'
    button.onPointerClickObservable.add(() => {
      if (this._isAnimation) return
      const { x, z } = areaPointList[index].position
      this._isAnimation = true
      moveTarget(this._camera, {
        position: new BABYLON.Vector3(x, 2, z),
        radius: 100,
        speed: 60,
      }).then(() => {
        this._isAnimation = false
      })
    })
    rect.addControl(button)

    const line = new Line()
    line.lineWidth = 1
    line.color = 'rgb(45,149,251)'
    line.y2 = 20
    line.linkOffsetY = -20
    advancedTexture.addControl(line)
    line.linkWithMesh(mesh)
    line.connectedControl = rect
  }
相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
董先生_ad986ad2 小时前
C# 中的 `lock` 关键字本质
开发语言·c#
元亓亓亓2 小时前
Java后端开发day36--源码解析:HashMap
java·开发语言·数据结构
道剑剑非道2 小时前
QT 打包安装程序【windeployqt.exe】报错c000007d原因:Conda巨坑
开发语言·qt·conda
小邓儿◑.◑3 小时前
C++武功秘籍 | 入门知识点
开发语言·c++
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
码银5 小时前
Java 集合:泛型、Set 集合及其实现类详解
java·开发语言