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

最新推荐文章于 2024-05-07 08:53:02 发布

Axlxhxx

最新推荐文章于 2024-05-07 08:53:02 发布

阅读量417

点赞数 4

文章标签： webgl javascript 前端开发语言 3d

本文链接：https://blog.csdn.net/creatlh/article/details/137331842

版权

如图所示：
在这里插入图片描述

方法：

 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
  }