Threejs+vue3创建文字的几种姿势

今日礼拜五不废话,直接写点基础,写完洗澡睡觉

Threejs创建文字 官方,那就按照它提供的来玩就好了,没什么技巧,代码放上去参数放上去。。。看效果就行,姿势随意~~

1. DOM + CSS

使用HTML通常是最简单、最快速的添加文本的方法,这是大多数的Three.js示例中用于添加描述性叠加文字的方法。

2. 将文字绘制到画布中,并将其用作Texture(纹理)

如果你希望在three.js的场景中的平面上轻松地绘制文本,请使用此方法。

3. 在你所喜欢的3D软件里创建模型,并导出给three.js

如果你更喜欢使用3D建模软件来工作并导出模型到three.js,请使用这种方法。

4. three.js自带的文字几何体

如果你更喜欢使用纯three.js来工作,或者创建能够由程序改变的、动态的3D文字,你可以创建一个其几何体为THREE.TextGeometry的实例的网格

js 复制代码
new THREE.TextGeometry( text, parameters );

然而,为了使得它能够工作,你的TextGeometry需要在其"font"参数上设置一个THREE.Font的实例。

请参阅 TextGeometry 页面来阅读如何完成此操作的详细信息,以及每一个接收的参数的描述,还有由three.js分发、自带的JSON字体的列表。

示例

WebGL / geometry / text
WebGL / shadowmap

如果Typeface已经关闭,或者没有你所想使用的字体,这有一个教程:www.jaanga.com/2012/03/ble...

这是一个在blender上运行的python脚本,能够让你将文字导出为Three.js的JSON格式。

5. 位图字体

BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性。 详情请参阅 three-mesh-uithree-bmfont-text

到这里threejs创建文字的几种方式就了解了你们是不是也有一点收获呢

备注:Three.js文字几何体渲染组件/Three.js位图字体渲染组件代码片段运行不了,只为了展示代码而已因为字体资源问题

相关推荐
UIUV15 分钟前
JavaScript中this指向机制与异步回调解决方案详解
前端·javascript·代码规范
momo10015 分钟前
IndexedDB 实战:封装一个通用工具类,搞定所有本地存储需求
前端·javascript
liuniansilence15 分钟前
🚀 高并发场景下的救星:BullMQ如何实现智能流量削峰填谷
前端·分布式·消息队列
再花15 分钟前
在Angular中实现基于nz-calendar的日历甘特图
前端·angular.js
San3022 分钟前
从零到一:彻底搞定面试高频算法——“列表转树”与“爬楼梯”全解析
javascript·算法·面试
GISer_Jing28 分钟前
今天看了京东零售JDS的保温直播,秋招,好像真的结束了,接下来就是论文+工作了!!!加油干论文,学&分享技术
前端·零售
Mapmost35 分钟前
【高斯泼溅】如何将“歪头”的3DGS模型精准“钉”在地图上,杜绝后续误差?
前端
JellyDDD37 分钟前
h5上传大文件可能会导致手机浏览器卡死,重新刷新的问题
javascript·上传文件
废春啊1 小时前
前端工程化
运维·服务器·前端
爱上妖精的尾巴1 小时前
6-9 WPS JS宏Map、 set、get、delete、clear()映射的添加、修改、删除
前端·wps·js宏·jsa