当前位置：首页 > article >正文

学习threejs，使用TextGeometry文本几何体

article 2026/2/25 11:11:16

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.TextGeometry
- - 1.1.1 ☘️代码示例
  - 1.1.2 ☘️构造函数
  - 1.1.4 ☘️方法
二、🍀使用TextGeometry文本几何体
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用TextGeometry文本几何体，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.TextGeometry

THREE.TextGeometry一个用于将文本生成为单一的几何体的类。它是由一串给定的文本，以及由加载的font（字体）和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。

1.1.1 ☘️代码示例

代码示例

const loader = new FontLoader();loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {const geometry = new TextGeometry( 'Hello three.js!', {font: font,size: 80,height: 5,curveSegments: 12,bevelEnabled: true,bevelThickness: 10,bevelSize: 8,bevelSegments: 5} );
} );

1.1.2 ☘️构造函数

TextGeometry(text : String, parameters : Object)
text — 将要显示的文本。
parameters — 包含有下列参数的对象：

font — THREE.Font的实例。
size — Float。字体大小，默认值为100。
height — Float。挤出文本的厚度。默认值为50。
curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
bevelEnabled — Boolean。是否开启斜角，默认为false。
bevelThickness — Float。文本上斜角的深度，默认值为20。
bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
bevelSegments — Integer。斜角的分段数。默认值为3。

可用的字体
文本几何体使用 typeface.json所生成的字体。一些已有的字体可以在/examples/fonts中找到，且必须在页面中引入。
在这里插入图片描述 ### 1.1.3 ☘️属性

共有属性请参见其基类ExtrudeGeometry。

.parameters : Object
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。

1.1.4 ☘️方法

共有方法请参见其基类ExtrudeGeometry。

二、🍀使用TextGeometry文本几何体

1. ☘️实现思路

1、初始化renderer渲染器。
2、初始化Scene三维场景scene。
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
4、创建THREE.DirectionalLight平行光源dirLight、dirLight2，设置dirLight和dirLight2的位置，scene场景加入dirLight和dirLight2。
5、加载几何模型：定义createMesh方法（参数为geom），方法内创建MeshPhongMaterial高光材质meshMaterial，传入geom和meshMaterial调用createMultiMaterialObject方法创建网格对象plane。定义controls方法，方法内定义gui初始化值用于控制TextGeometry文本几何体的属性，定义asGeom方法，分别传入new THREE.TextGeometry(“Gis”, options)、new THREE.TextGeometry(“Sharer”, options)调用createMesh方法创建两个TextGeometry文本网格对象text1和text2，设置text1的位置，scene添加text1和text2。调用controls.asGeom方法。具体代码参考下面代码样例。
6、加入gui控制。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>学习threejs，使用TextGeometry文本几何体</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../assets/fonts/helvetiker_regular.typeface.js"></script><script type="text/javascript" src="../assets/fonts/helvetiker_bold.typeface.js"></script><script type="text/javascript" src="../assets/fonts/bitstream_vera_sans_mono_roman.typeface.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Js代码块 -->
<script type="text/javascript">function init() {var stats = initStats();// 创建三维场景scenevar scene = new THREE.Scene();// 创建相机cameravar camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器webGLRenderer，设置颜色、大小和投影var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 设置相机位置和方向camera.position.x = 100;camera.position.y = 300;camera.position.z = 600;camera.lookAt(new THREE.Vector3(400, 0, -300));// 添加平行光var dirLight = new THREE.DirectionalLight();dirLight.position.set(25, 23, 15);scene.add(dirLight);// 添加平行光var dirLight2 = new THREE.DirectionalLight();dirLight2.position.set(-25, 23, 15);scene.add(dirLight2);document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var text1;var text2;var controls = new function () {this.size = 90;this.height = 90;this.bevelThickness = 2;this.bevelSize = 0.5;this.bevelEnabled = true;this.bevelSegments = 3;this.bevelEnabled = true;this.curveSegments = 12;this.steps = 1;this.font = "helvetiker";this.weight = "normal";this.asGeom = function () {scene.remove(text1);scene.remove(text2);var options = {size: controls.size,height: controls.height,weight: controls.weight,font: controls.font,bevelThickness: controls.bevelThickness,bevelSize: controls.bevelSize,bevelSegments: controls.bevelSegments,bevelEnabled: controls.bevelEnabled,curveSegments: controls.curveSegments,steps: controls.steps};console.log(THREE.FontUtils.faces);text1 = createMesh(new THREE.TextGeometry("Gis", options));text1.position.z = -100;text1.position.y = 100;scene.add(text1);text2 = createMesh(new THREE.TextGeometry("Sharer", options));scene.add(text2);};};controls.asGeom();var gui = new dat.GUI();gui.add(controls, 'size', 0, 200).onChange(controls.asGeom);gui.add(controls, 'height', 0, 200).onChange(controls.asGeom);gui.add(controls, 'font', ['bitstream vera sans mono', 'helvetiker']).onChange(controls.asGeom);gui.add(controls, 'bevelThickness', 0, 10).onChange(controls.asGeom);gui.add(controls, 'bevelSize', 0, 10).onChange(controls.asGeom);gui.add(controls, 'bevelSegments', 0, 30).step(1).onChange(controls.asGeom);gui.add(controls, 'bevelEnabled').onChange(controls.asGeom);gui.add(controls, 'curveSegments', 1, 30).step(1).onChange(controls.asGeom);gui.add(controls, 'steps', 1, 5).step(1).onChange(controls.asGeom);render();function createMesh(geom) {var meshMaterial = new THREE.MeshPhongMaterial({specular: 0xffffff,color: 0xeeffff,shininess: 100,metal: true});var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);return plane;}function render() {stats.update();requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下：
在这里插入图片描述

学习threejs，使用TextGeometry文本几何体

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.TextGeometry1.1.1 ☘…...

编程日记 2026/2/14 18:44:42

Go红队开发—CLI框架(一)

CLI开发框架命令行工具开发，主要是介绍开发用到的包，集成了一个框架，只要学会了基本每个人都能开发安全工具了。该文章先学flags包，是比较经典的一个包，相比后面要学习的集成框架这个比较自由比较细化点&#xff0…...

编程日记 2026/2/15 6:53:50

解决点击按钮页面自动刷新

在React中，当你点击按钮时，如果按钮的type属性没有明确指定，它的默认值是submit。这意味着如果这个按钮被放置在一个<form>表单中，点击它会触发表单的提交行为，导致页面刷新。在你的代码中，展开/折叠…...

编程日记 2025/7/24 5:45:20

高效团队开发的工具与方法引言

引言在现代软件开发领域，团队协作的效率和质量直接决定了项目的成败。随着项目规模的扩大和技术复杂度的增加，如何实现高效团队开发成为每个开发团队必须面对的挑战。高效团队开发不仅仅是个人技术能力的简单叠加，更需要借助合适的工具和方…...

编程日记 2026/2/17 10:11:17

【Java全栈进阶架构师实战：从设计模式到SpringCloudAlibaba，打造高可用系统】

🌟 分享一个教程，助刚踏入IT行业、工作几年的老油条、或热爱学习的工作党们更上一层楼的！ 🌟 适合人群：初中级Java开发者、求职面试备战者、技术提升党！ 📚 内容亮点： 1️⃣ …...

编程日记 2026/2/15 5:48:44

[蓝桥杯 2023 省 A] 异或和之和

题目来自洛谷网站： 暴力思路： 先进性预处理，找到每个点位置的前缀异或和，在枚举区间。暴力代码： #include<bits/stdc.h> #define int long long using namespace std; const int N 1e520;int n; int arr[N…...

编程日记 2026/2/16 20:08:19

TDengine 3.3.2.0 集群报错 Post “http://buildkitsandbox:6041/rest/sql“

修复： vi /etc/hosts将buildkitsandbox映射为本机节点...

编程日记 2026/2/15 5:31:43

vue数据重置

前言大家在开发后台管理系统的过程中，一定会遇到一个表格的条件查询重置功能吧，如果说查询条件少，重置起来还算是比较简单，如果元素特别多呢，那玩意写起来可遭老罪喽，那今天就给大家整一个如何快速重置数…...

编程日记 2026/2/14 11:21:12

22、web前端开发之html5（三）

六. 离线存储与缓存在网络环境不稳定或需要优化资源加载速度的场景下，离线存储与缓存技术显得尤为重要。HTML5引入了多种离线存储和缓存机制，帮助开发者提升用户体验。本节将详细介绍Application Cache、localStorage、sessionStorage以及IndexedDB等技…...

编程日记 2026/2/23 4:00:38

git revert 用法实战：撤销一个 commit 或 merge

git revert 1 区别 • 常规的 commit （使用 git commit 提交的 commit） • merge commit 2 首先构建场景 master上的代码 dev开发分支上，添加一个a标签，并commit这次提交切到master上，再次进行改动和提交将de…...

编程日记 2026/2/17 5:59:39

修形还是需要再研究一下

最近有不少小伙伴问到修形和蜗杆砂轮的问题，之前虽然研究过一段时间，但是由于时间问题放下了，最近想再捡起来。之前计算的砂轮齿形是一整段的，但是似乎这种对于有些小伙伴来说不太容易接受，希望按照修形的区域进行分…...

编程日记 2026/2/16 10:17:27

AI本地部署之dify

快捷目录 Windows 系统一、环境准备：首先windows 需要准备docker 环1. 安装Docker desktop2. 安装Docker3. 配置Docker 镜像路径4. 配置Docker 下载镜像源5. 重启Docker服务二、Dify 下载和安装1. Dify下载2. Dify 配置3. Dify 安装附件知识：4. Dify创建账号三、下载Ollama d…...

编程日记 2026/2/16 22:35:37

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…...

编程日记 2026/2/16 4:20:10

GPIO八种模式的应用场景总结

以下是 GPIO不同模式及其适用应用场景的详细总结： GPIO模式分类及适用场景 GPIO模式电气特性典型应用场景关键注意事项浮空输入引脚电平由外部信号决定，无内部上拉/下拉电阻• 按键检测（外接物理上拉/下拉）• 数字信号输入&#…...

编程日记 2026/2/16 16:48:11

Python应用指南：利用高德地图API获取POI数据（关键词版）

都说“为一杯奶茶愿意赴一座城”，曾经不知有多少年轻人为了一口茶颜悦色不惜跨越千里来到长沙打卡，而如今也有不少年轻人被传说中的“奶茶界的海底捞”所吸引，千里迢迢来到安徽只为尝一口卡旺卡奶茶。要说起来这卡旺卡奶茶，尽管这…...

编程日记 2026/2/16 10:20:50

【零基础入门unity游戏开发——2D篇】2D物理系统 —— 2D刚体组件（Rigidbody 2d）

考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把【零基础入门unity游戏开发】分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、流程控制、面向对象等，适合没有编程基础的…...

编程日记 2026/2/16 18:05:04

Linux网络相关概念和重要知识（2）（UDP套接字编程、聊天室的实现、观察者模式）

目录 1.UDP套接字编程 （1）socket编程 （2）UDP的使用 ①socket ②bind ③recvfrom ④sendto 2.聊天室的实现 （1）整体逻辑 （2）对sockaddr_in的封装 （3&#xff09…...

编程日记 2026/2/16 23:47:36

机器学习之条件概率

1. 引言概率模型在机器学习中广泛应用于数据分析、模式识别和推理任务。本文将调研几种重要的概率模型，包括EM算法、MCMC、朴素贝叶斯、贝叶斯网络、概率图模型（CRF、HMM）以及最大熵模型，介绍其基本原理、算法流程、应用场景及优势。 2. EM算法（Expectation-Maximizati…...

编程日记 2026/2/16 16:57:19

国科云：浅谈DNS在IPv6改造过程中的重要性

在IPv6改造过程中，DNS（域名系统）起着至关重要的作用，主要体现在以下几个方面： 地址解析与映射 IPv6地址采用128位的地址空间，与IPv4的32位地址相比，地址长度大大增加，这使得手动记…...

编程日记 2026/2/24 4:53:45

JVM 03

今天是2025/03/24 15:21 day 11 总路线请移步主页Java大纲相关文章今天进行JVM 5,6 个模块的归纳首先是JVM的相关内容概括的思维导图 5. 优化技术 JVM通过多种优化技术提升程序执行效率，核心围绕热点代码检测和编译优化实现动态性能提升。热点代码检测 JVM…...

编程日记 2026/2/16 13:04:43

【VUE】day07 路由

【VUE】day07 路由 1. 路由2. 前端路由的工作方式3. 实现简易的前端路由4. 安装和配置路由4.1 安装vue-router包4.2 创建路由模块4.3 导入并挂在路由模块 5. 在路由模块中声明路由的对应关系5.1 router-view 1. 路由在 Vue.js 中，路由（Routing&#xf…...

编程日记 2026/2/16 16:38:13

内网穿透的应用-本地部署ChatTTS教程：Windows搭建AI语音合成服务的全流程配置

文章目录前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址前言各位开发者小伙伴们！今天我要给大家推荐一个超级火的AI项目——ChatTTS。这个开源文本转语音（TTS）项目的火爆程度简直让人难以置信&a…...

编程日记 2026/2/21 17:15:20

2025-03-21 Unity 网络基础3——TCP网络通信准备知识

文章目录 1 IP/端口类1.1 IPAddress1.2 IPEndPoint 2 域名解析2.1 IPHostEntry2.2 Dns 3 序列化与反序列化3.1 序列化3.1.1 内置类型 -> 字节数组3.1.2 字符串 -> 字节数组3.1.3 类对象 -> 字节数组 3.2 反序列化3.2.1 字节数组 -> 内置类型3.2.2 字节数组 -> 字…...

编程日记 2026/2/22 8:41:42

静态时序分析：SDC约束命令set_min_pulse_width详解

相关阅读静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 最小脉冲宽度检查用于确保一个单元的时钟引脚和异步置位/复位引脚的的脉冲宽度满足最小要求，如果违反该要求，则可能出现功能错误。严格意…...

编程日记 2026/2/22 4:37:17

HO与OH差异之Navigation

在上一篇的内容中我们进一步的了解了Navigation的用法，但是既然写到这里了我就再来扩充一下有关Navigation的内容。 HarmonyOS与OpenHarmony之间有些写法与内容是有差异的，就比如Navigation的跳转。以下内容中HarmonyOS我都简称为HO，OpenHar…...

编程日记 2026/2/16 19:08:09