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

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

方法:

 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
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/517493.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在CentOS 8.5.2111下安装vncserver tigervnc-server

# 参考: How to Install TigerVNC Server on CentOS 8 前提: 默认用root操作所有命令 安装桌面GUI dnf groupinstall "Server with GUI" 安装tigervnc-server dnf install tigervnc-server 增加vncuser用户(这里默认就是vncuse…

刷题之Leetcode704题(超级详细)

704. 二分查找 力扣题目链接(opens new window)https://leetcode.cn/problems/binary-search/ 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标&am…

VRRP虚拟路由器冗余协议

vrrp是为了解决单点故障问题 将几台路由器联合成一台虚拟的路由器,保证通信的可靠性 协议小说: 协议不是在固定的哪一个层,是基于哪一层工作,比如说ospf是基于三层工作的 VRRP是基于三层工作的,就在前面会封装一个ip…

GD32F470_ADS1115 超小型 16位 模数转换器 ADC 4通道模块移植

2.9 ADS1115多路模数转换器 ADS1115 器件是兼容 IIC 的 16 位高精度低功耗模数转换器 (ADC),采用超小型无引线 X2QFN-10 封装和 VSSOP-10 封装。ADS111x 器件采用了低漂移电压基准和振荡器。ADS1114 和 ADS1115 还采用可编程增益放大器(PGA)和数字比较器。这些特性加…

Python云计算技术库之libcloud使用详解

概要 随着云计算技术的发展,越来越多的应用和服务迁移到了云端。然而,不同云服务商的API和接口千差万别,给开发者带来了不小的挑战。Python的libcloud库应运而生,它提供了一个统一的接口,让开发者可以轻松地管理不同云服务商的资源。本文将深入探讨libcloud库的特性、安装…

HCIA-RS基础-STP原理与配置

目录 STP(生成树协议)原理与配置1. 生成树的产生原因2. 生成树协议的基本原理3. 生成树协议的简单配置4. STP 存在的问题 总结 STP(生成树协议)原理与配置 1. 生成树的产生原因 在计算机网络中,生成树(Sp…

Burp内置浏览器报错提示网页证书无效的解决方式

在Proxy——代理设置中——翻到底,勾选忽略浏览器的Burp错误信息 然后刷新你的网页,就可以按常规操作,点击“继续访问”,打开网页了

Python数据分析和机器学习库之imbalanced-learn使用详解

概要 在实际的数据分析和机器学习任务中,经常会遇到数据不平衡的情况,即不同类别的样本数量差异较大,这会导致模型训练和预测的不准确性。Python的imbalanced-learn库提供了一系列处理不平衡数据的方法和工具,帮助开发者更好地应对这一问题。本文将深入探讨imbalanced-lea…

蓝桥杯算法题:区间移位

题目描述 数轴上有n个闭区间&#xff1a;D1,...,Dn。 其中区间Di用一对整数[ai, bi]来描述&#xff0c;满足ai < bi。 已知这些区间的长度之和至少有10000。 所以&#xff0c;通过适当的移动这些区间&#xff0c;你总可以使得他们的“并”覆盖[0, 10000]——也就是说[0, 100…

zdpcss_transparent_animation_login:使用纯HTML+CSS+JS开发支持设置主题和带动画的科技风登录界面

废话不多说&#xff0c;先上图&#xff0c;有图有真相&#xff1a; 在左下角有一排颜色&#xff0c;点击可以设置主题色&#xff1a; 比如&#xff0c;我这里点击了橙色&#xff0c;登录界面就变成了如下样子&#xff1a; 另外&#xff0c;在输入账号和密码的时候&#x…

集合系列(十七) -List集合移除元素相关的操作介绍

一、问题由来 在实际开发的时候&#xff0c;我们经常会碰到这么一个困难&#xff1a;一个集合容器里面有很多重复的对象&#xff0c;里面的对象没有主键&#xff0c;但是根据业务的需求&#xff0c;实际上我们需要根据条件筛选出没有重复的对象。 比较暴力的方法&#xff0c;…

【Visual Studio】将项目下的文件夹所有文件随编译自动复制输出到运行目录

要将项目根目录下的文件夹内容输出到运行目录&#xff0c;去处理其中的子文件夹和文件&#xff0c;逐个手动设置文件属性或进行复制显然不是一个可行的方法&#xff0c;因为这既繁琐又低效&#xff0c;那有没有更加高效的方式呢 文章目录 选择文件夹修改配置文件输出文件夹 这里…

亚远景科技-ASPICE评估输入

评估输入应在评估的数据收集阶段之前确定&#xff0c;并得到评估发起人的批准。 评估输入的任何更改都应征得发起人或发起人授权人的同意&#xff0c;并记录在评估记录中。 评估输入至少应明确以下内容&#xff1a; 原文链接&#xff1a;ASPICE评估-ASPICE评估输入-亚远景

Linux集群(一)Nginx搭建

目录 一、Nginx介绍 1.什么是Nginx 2.Nginx的特点 二、Nginx配置 1.jdk的安装 1.1检查jdk版本 1.2上传并安装jdk 2.安装Tomcat 3.下载Nginx 3.1安装依赖包 ​编辑 3.2安装Nginx 3.3运行 三、Nginx中的常用命令​编辑 一、Nginx介绍 1.什么是Nginx Nginx&#xff08;…

网易RAG问答知识库开源了,Star 6K!!

网易RAG问答知识库开源了&#xff0c;Star 6K&#xff01;&#xff01; RAG 问答知识库 QAnything 开源了QAnything 架构设计剖析整个架构的工作流程主要包含三个环节为什么需要两阶段检索&#xff1f;使用的基座大模型相关技术组件 QAnything 本地部署一键部署安装&#xff0c…

实操:flatpicker-时间选择工具

官网 flatpicker是一个轻量级且功能强大的日期时间选择器。精益、用户体验驱动和可扩展&#xff0c;但它不依赖于任何库。用户界面很少&#xff0c;但主题很多。丰富、公开的API和事件系统使其适用于任何环境。 https://flatpickr.js.org/ 依赖 <link rel"stylesheet…

Coursera上Learning Linux for LFCA Certification专项课程01:Linux Fundamentals 学习笔记

Linux Fundamentals Course Certificate 本文是 Linux Fundamentals 这门课的学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。 文章目录 Linux FundamentalsWeek 01: Linux Operating SystemLearning Objectives Specialization OverviewHistory of LinuxQuiz: Hist…

51单片机学习笔记12 SPI接口 使用1302时钟

51单片机学习笔记12 SPI接口 使用1302时钟 一、DS1302简介1. 功能特性2. 涓流充电3. 接口介绍时钟数据和控制线&#xff1a;电源线&#xff1a;备用电池连接&#xff1a; 二、寄存器介绍1. 控制寄存器2. 时间寄存器3. 日历/时钟寄存器 三、BCD码介绍四、DS1302时序1. 读时序2. …

基于SpringBoot的“数码论坛系统设计与实现”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“数码论坛系统设计与实现”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 系统首页界面图 数码板…

线段树练习

1.单点修改区间查询 P3374 【模板】树状数组 1 题目描述 如题&#xff0c;已知一个数列&#xff0c;你需要进行下面两种操作&#xff1a; 将某一个数加上 x 求出某区间每一个数的和 输入格式 第一行包含两个正整数 n,m&#xff0c;分别表示该数列数字的个数和操作的总个…