如图所示:
方法:
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
}