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
  }
相关推荐
chxii2 分钟前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
「QT(C++)开发工程师」5 分钟前
嵌入式Lua脚本编程核心概念
开发语言·lua
_extraordinary_7 分钟前
Java Spring事务,事务的传播机制
java·开发语言·spring
AntBlack27 分钟前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好34 分钟前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O39 分钟前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木1 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特1 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生1 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569151 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试