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);
    },

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

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

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

相关文章

掉了无数头发成地中海后,我整理出了这套40+的大屏模板,快收藏!

最近又有不少粉丝后台问我接不接做可视化大屏,看来可视化大屏是越来越火啦,但老李还是要说一下,老李本身工作就很忙,实在是顾不过来,但老李会在自己体验过后为大家挑选合适的工具和模板,提升大家做大屏的效…

江西武功山旅游攻略(周末两日游)

一、 往返路线 1: 出发路线 周五晚上上海出发坐火车🚄到江西萍乡(11.5小时,卧铺550左右) 打车到江西武功山景区,120-150元左右,人均30元,1小时10分左右到达 或者 🚗到达萍乡北之后 出站后步行200米到长途汽车站,乘旅游巴士直达武功山游…

2023高教社杯数学建模思路 - 案例:FPTree-频繁模式树算法

文章目录 算法介绍FP树表示法构建FP树实现代码 建模资料 ## 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法,就是频繁模式树算法&#xff0c…

leetcode 1022.从根到叶的二进制数之和

⭐️ 题目描述 🌟 leetcode链接:https://leetcode.cn/problems/sum-of-root-to-leaf-binary-numbers/description/ 代码: class Solution { public:int sum (TreeNode* root , int num 0) {if (root nullptr) {return 0;}int cur num r…

无涯教程-分类算法 - 多项式逻辑回归模型函数

Logistic逻辑回归的另一种有用形式是多项式Lo​​gistic回归,其中目标或因变量可以具有3种或更多可能的unordered类型,即没有定量意义的类型。 用Python实现 现在,无涯教程将在Python中实现上述多项式逻辑回归的概念。为此,使用…

算法通关村第8关【白银】| 二叉树的深度和高度问题

1.最大深度问题 思路:递归三部曲 第一步:确定参数和返回值 题目要求求二叉树的深度,也就是有多少层,需要传递一个root从底层向上统计 int maxDepth(TreeNode root) 第二步:确定终止条件 当递归到null时就说明到底了…

【MCU】SD NAND芯片之国产新选择

文章目录 前言传统SD卡和可贴片SD卡传统SD卡可贴片SD卡 实际使用总结 前言 随着目前时代的快速发展,即使是使用MCU的项目上也经常有大数据存储的需求。可以看到经常有小伙伴这样提问: 大家好,请问有没有SD卡芯片,可以直接焊接到P…

科技探究之旅--亲子研学活动

2023年8月26日,广州市从化区齐家社会工作服务中心(以下简称“齐家”)的“星乐园-乡村儿童公益辅导服务项目”组织了新开村及西湖村助学点24对亲子到广州市白云区文搏3D打印基地进行“科技探究之旅--亲子研学”活动,旨在发现、点燃…

长胜证券:沪指高开回落涨1.13%,地产、券商等板块强势

28日,A股两市早盘大幅高开,盘中有所回落,沪指、深证成指涨幅收窄至1.5%以内。截至收盘,沪指涨1.13%报3098.64点,深成指涨1.01%,创业板指涨0.96%,两市合计成交11266亿元。盘面上,渔业…

面试中的代码写作:如何撰写清晰、高效的示例代码

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

leetcode刷题(字符串相加、包含每个查询的最小区间、模拟行走机器人、环形子数组的最大和、满足不等式的最大值、四数之和、树中距离之和)

目录 1、字符串相加 2、包含每个查询的最小区间 3、模拟行走机器人 4、环形子数组的最大和 5、满足不等式的最大值 6、四数之和 7、 树中距离之和 1、字符串相加 class Solution:def addStrings(self, num1: str, num2: str) -> str:i len(num1) - 1 # num1的末…

HarmonyOS Codelab 优秀样例——购物应用,体验一次开发多端部署魅力

一. 样例介绍 本篇Codelab基于自适应布局和响应式布局,实现购物应用在手机、折叠屏、平板不同屏幕尺寸设备上按不同设计显示。通过三层工程结构组织代码,实现一次开发,多端部署 。 手机运行效果如图所示: 折叠屏运行效果图&#x…

【Leetcode】124.二叉树中的最大路径和(Hard)

一、题目 1、题目描述 二叉树中的 路径 被定义为一条节点序列,序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root ,返回其…

ResNet详解:网络结构解读与PyTorch实现教程

目录 一、深度残差网络(Deep Residual Networks)简介深度学习与网络深度的挑战残差学习的提出为什么ResNet有效? 二、深度学习与梯度消失问题梯度消失问题定义为什么会出现梯度消失?激活函数初始化方法网络深度 如何解决梯度消失问…

概念解析 | 无人机集群形状与轨迹建模: 集群舞蹈的艺术

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:无人机集群形状和轨迹建模 无人机集群形状与轨迹建模: 集群舞蹈的艺术 无人机集群的形状和轨迹建模可能听起来像是一部科幻小说的标题,但它实际上是现实中的一个重要研究领…

随机化快速排序(Java 实例代码)

随机化快速排序 一、概念及其介绍 快速排序由 C. A. R. Hoare 在 1960 年提出。 随机化快速排序基本思想:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数…

安防监控视频平台EasyCVR视频汇聚平台调用接口出现跨域现象的问题解决方案

视频监控汇聚EasyCVR可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有GB28181、RTSP/Onvif、RTMP等,以及厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等,能对外分发RTSP、RTMP、FLV、HLS、WebRTC等格式的视…

【程序猿书籍大放送:第二期】《强化学习:原理与Python实战》

🌹欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享,与更多的人进行学习交流 爱书不爱输的程序猿:送书第二期 一、搞懂大模型的智能基因,RLHF系统设计关键问答1.RLHF是什么?2.RLHF适用于哪些任务?3…

1.1 数据库系统简介

1.1.数据库系统简介 前言: 数据库系统是一个软件系统,用于管理和操作数据库。它提供了一个组织良好、高效并能够方便存取的数据存储机制,并且能够支持各种数据操作、事务管理、并发控制和恢复功能。以下是数据库系统的一些主要特点和组件&a…

对标 GPT-4?科大讯飞刘庆峰:华为GPU技术能力已与英伟达持平

科大讯飞创始人、董事长刘庆峰在亚布力中国企业家论坛第十九届夏季高峰会上透露了关于自家大模型进展的一些新内容。刘庆峰认为,中国在人工智能领域的算法并没有问题,但是算力方面似乎一直被英伟达所限制。 以往的“百模大战”中,训练大型模型…