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
  }
相关推荐
一小池勺18 小时前
CommonJS
前端·面试
孙牛牛18 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端
Stanford_110618 小时前
关于嵌入式硬件需要了解的基础知识
开发语言·c++·嵌入式硬件·微信小程序·微信公众平台·twitter·微信开放平台
用户527096487449018 小时前
Git 最佳实践
前端
星秀日18 小时前
JavaWeb--Ajax
前端·javascript·ajax
4_0_418 小时前
全栈视角:从零构建一个现代化的 Todo 应用
前端·node.js
白水先森18 小时前
Python 运算符与列表(list)
java·开发语言
BumBle19 小时前
uniapp 用css实现圆形进度条组件
前端·vue.js·uni-app
小政同学19 小时前
【Python】小练习-考察变量作用域问题
开发语言·python
杏花春雨江南19 小时前
npm error Could not resolve dependency:
前端·npm·node.js