ThreeJS 模型中内嵌文字

之前有过模型中内嵌html网页,地址☞threeJS 模型中加载html页面_threejs 加载dom元素_小菜花29的博客-CSDN博客

这次是纯粹的在模型中嵌入文本信息,进行简单的文字展示

展示效果图

 1. 使用FontLoader文字加载器

引入文本json文件,代码如下

loadFont() {return new Promise(function (resolve, reject) {const loader = new THREE.FontLoader();loader.load('fonts/Microsoft YaqiHei Light_Regular.json', function (response) {try {resolve(response);} catch (error) {reject(error);}});});},

着重注意的两点:

  • 文本文件位置,放在public文件下

  •  threejs不支持中文,需要我们转换下

转换方式可以从该地址下载所需的文字文件ttf微软雅旗黑ttf下载 微软雅旗黑 Light 细体 字体下载-脚本之家 (jb51.net)

在这里进行转换成json文件,将文件放入public下面即可,上述代码中的Microsoft YaqiHei Light_Regular.json文件就是转换后的文件,文件已上传,在资源可以查看,地址☞【免费】微软雅黑文字的json文件资源-CSDN文库

2. TextureLoader创建文本

代码如下

 async createBoard() {const _this = this;const font = await _this.loadFont();const fontOption = {font: font,size: 20,height: 1,curveSegments: 1,bevelThickness: 1,bevelSize: 0,bevelEnabled: false,bevelSegments: 0};const textureLoader = new THREE.TextureLoader();// 导入纹理贴图基础贴图const img = require('@/assets/img/workbreachWhite2/bg.png');const imgLoader = textureLoader.load(img);// 给文本内容一个背景图,创建一个带纹理的平面(示例图中蓝色的背景)该段根据实际情况进行取舍const planeGeometry = new THREE.PlaneGeometry(400, 150);const planeMater = new THREE.MeshPhongMaterial({ map: imgLoader });const planeMesh = new THREE.Mesh(planeGeometry, planeMater);// 创建文字内容const txtMater = new THREE.MeshBasicMaterial({ color: 0xffffff });const txtGeometry = new THREE.TextGeometry('你好~Hello world !', fontOption);const txtMesh = new THREE.Mesh(txtGeometry, txtMater);_this.scene.add(txtMesh);_this.scene.add(planeMesh);},

细节方面,位置和旋转角度根据自己实际情况进行调整

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

事务的总结

数据库事务 数据库事务是一个被视为单一的工作单元的操作序列。这些操作应该要么完整地执行,要么完全不执行。事务管理是一个重要组成部分,RDBMS 面向企业应用程序,以确保数据完整性和一致性。事务的概念可以描述为具有以下四个关键属性描述…

04-过滤器和拦截器有什么区别?【Java面试题总结】

过滤器和拦截器有什么区别? 运行顺序不同:过滤器是在 Servlet 容器接收到请求之后,但在 Servlet被调用之前运行的;而拦截器则是在Servlet 被调用之后,但在响应被发送到客户端之前运行的。 过滤器Filter 依赖于 Servle…

VB.NET 如何将某个Excel的工作表中复制到另一个的Excel中的工作表中https://bbs.csdn.net/topics/392861034

参考http://share.freesion.com/306372/可以实现直接拷贝指定表 Private Sub Excel复制工作簿()Dim myExcelApp As New Microsoft.Office.Interop.Excel.ApplicationmyExcelApp.Workbooks.Open(System.Environment.CurrentDirectory "\\测试用例.xlsx", Type.Missin…

PostgreSQL本地化

本地化的概念 本地化的目的是支持不同国家、地区的语言特性、规则。比如拥有本地化支持后,可以使用支持汉语、法语、日语等等的字符集。除了字符集以外,还有字符排序规则和其他语言相关规则的支持,例如我们知道(‘a’,‘b’)该如何排序&…

React-native环境配置与项目搭建

基础环境搭建 安装 node.js (版本>12 ,推荐安装LTS稳定版本) 安装 Yarn (npm install -g yarn) 安装 react native 脚手架 (npm install -g react-native-cli) windows 只能搭建Android 开发环境 Mac 下既能搭建Android 环境&…

使用PAM保障开发运营安全

硬编码凭据和 DevOps 系统中缺乏凭据安全性是组织的巨大漏洞。以明文形式访问凭据的恶意内部人员可以在 IT 中建立和扩展其立足点 基础设施,构成巨大的数据被盗风险。 什么是PAM 特权访问管理 (PAM) 是指一组 IT 安全管理原则,可…

合宙Air724UG LuatOS-Air LVGL API控件--日历 (Calendar)

日历 (Calendar) LVGL 提供了一个用来选择和显示当前日期的日历控件。 示例代码 – 高亮显示的日期 highlightDate lvgl.calendar_date_t() – 日历点击的回调函数 – 将点击日期设置高亮 function event_handler(obj, event) if event lvgl.EVENT_VALUE_CHANGED then da…

ITMS介绍

ITMS(Integrated Terminal Management System),终端综合管理系统。 主要用于家庭网关的设备注册,初始化自动配置,软件版本升级,远程故障诊断修复和设备监控等。它通过北向连接服开系统用于接收业务工单&am…

汽车自适应巡航系统控制策略研究

目 录 第一章 绪论 .............................................................................................................................. 1 1.1 研究背景及意义 ..........................................................................................…

已解决下载安装Python官网安装包下载速度慢问题

本文摘要:本文已解决下载安装Python官网安装包下载速度慢的问题。 😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究…

无涯教程-机器学习 - 矩阵图函数

相关性是有关两个变量之间变化的指示,在前面的章节中,无涯教程讨论了Pearson的相关系数以及相关的重要性,可以绘制相关矩阵以显示哪个变量相对于另一个变量具有较高或较低的相关性。 在以下示例中,Python脚本将为Pima印度糖尿病数…

LNMP架构:搭建Discuz论坛

文章目录 1. 编译安装Nginx1.1 前置准备1.2 编译安装1.3 添加nginx系统服务 2.编译安装MySql2.1 前置准备2.2 编译安装2.3 修改mysql 配置文件2.4 设置路径环境变量2.5 初始化数据库2.6 添加musql系统服务2.7 修改MySql登录密码 3. 编译安装PHP3.1 前置准备3.2 编译安装3.3 复制…

【Datawhale】AI夏令营第三期——基于论文摘要的文本分类笔记(上)

暑期参加了Datawhale的第三期AI夏令营,学习的是NLP方向,在此期间,我们通过比赛打榜的形式进行NLP的学习。今天,主要分享和记录一下这一期夏令营的学习历程和笔记。 文章目录 赛题背景赛题任务赛题数据集评价指标解题思路任务一&am…

slog正式版来了:Go日志记录新选择!

在大约一年前,我就写下了《slog:Go官方版结构化日志包[1]》一文,文中介绍了Go团队正在设计并计划在下一个Go版本中落地的Go官方结构化日志包:slog[2]。但slog并未如预期在Go 1.20版本[3]中落地,而是在golang.org/x/exp…

java对象创建的过程

1、检查指令的参数是否能在常量池中定位到一个类的符号引用 2、检查此符号引用代表的类是否已被加载、解析和初始化过。如果没有,就先执行相应的类加载过程 3、类加载检查通过后,接下来虚拟机将为新生对象分配内存。 4、内存分配完成之后,…

【OpenCV入门】第八部分——滤波器

文章结构 图像平滑处理均值滤波器中值滤波器高斯滤波器双边滤波器拉普拉斯高通滤波器 图像平滑处理 图像平滑处理是指在尽量保留原图像信息的情况下,去除掉图像内部的噪声(分布不均匀的、高亮度的像素点)。而用于图像平滑处理的工具就是滤波…

HarmonyOS—使用Web组件加载页面

页面加载是 Web 组件的基本功能。根据页面加载数据来源可以分为三种常用场景,包括加载网络页面、加载本地页面、加载 HTML 格式的富文本数据。 页面加载过程中,若涉及网络资源获取,需要配置ohos.permission.INTERNET网络访问权限。 加载网络…

人工智能轨道交通行业周刊-第58期(2023.8.28-9.3)

本期关键词:成都智慧工厂、机务段、站台地标、备案大模型、AIGC报告 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMetro轨道世界铁路…

论文浅尝 | 利用对抗攻击策略缓解预训练语言模型中的命名实体情感偏差问题...

笔记整理:田家琛,天津大学博士,研究方向为文本分类 链接:https://ojs.aaai.org/index.php/AAAI/article/view/26599 动机 近年来,随着预训练语言模型(PLMs)在情感分类领域的广泛应用&#xff0c…

SpringBoot 使用MyBatis分页插件实现分页功能

SpringBoot 使用MyBatis分页插件实现分页功能 1、集成pagehelper2、配置pagehelper3、编写代码4、分页效果 案例地址&#xff1a; https://gitee.com/vinci99/paging-pagehelper-demo/tree/master 1、集成pagehelper <!-- 集成pagehelper --> <dependency><gr…