ThreeJS中创建文字的几种方法

1. DOM + CSS

传统html5的文字实现,用于添加描述性叠加文字的方法。一般使用绝对定位,并且保证z-index够大,用于显示在3D场景之上。

优点:
与CSS3D效果一致

缺点:
3d效果和运动还原不好

2. THREE.CanvasTexture

优点:
文字效果较为丰富,方便绘制。

缺点:
一旦生成,分辨率固定,放大会产生失真。

3. THREE.TextGeometry / THREE.TextBufferGeometry

优点:
效果好,可与场景进行同步

缺点:
单个字体的颜色和动画制作较为复杂,且耗费资源较大

4. 3d字体模型

优点:
效果好,可定制效果

缺点:
加载模型较为耗费资源,字体内容无法自定义

5. 位图字体

通过BmpFont生成文字模板,然后进行加载显示。BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性。three-bmfont-text

优点:
可自定义字体和效果

缺点:
加载模型较为耗费资源,字体内容无法自定义

6. Three.Sprite

Sprite加载图像纹理

优点:
永远面向相机的平面,适合作为标签显示

缺点:
存在canvasTexture的问题

Original: https://www.cnblogs.com/chencarl/p/11725091.html
Author: chencarl
Title: ThreeJS中创建文字的几种方法

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/711724/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球