three.js 创建文字的几种方法
1. DOM + CSS
传统网页html实现
2. 将文字绘制到画布中,并将其用作Texture(纹理)
将文字保存为图片格式,再将其当作一张蒙皮材质,贴到某个物体上
3. 在你所喜欢的3D软件里创建模型,并导出给three.js
建模实现,成本高,效果好
4. three.js自带的文字几何体
- 构造器
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
} );
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中找到,且必须在页面中引入。
字体 | 字重 | 风格 | 文件路径 |
---|---|---|---|
helvetiker | normal | normal | /examples/fonts/helvetiker_regular.typeface.json |
helvetiker | bold | normal | /examples/fonts/helvetiker_bold.typeface.json |
optimer | normal | normal | /examples/fonts/optimer_regular.typeface.json |
optimer | bold | normal | /examples/fonts/optimer_bold.typeface.json |
gentilis | normal | normal | /examples/fonts/gentilis_regular.typeface.json |
gentilis | bold | normal | /examples/fonts/gentilis_bold.typeface.json |
droid sans | normal | normal | /examples/fonts/droid/droid_sans_regular.typeface.json |
droid sans | bold | normal | /examples/fonts/droid/droid_sans_bold.typeface.json |
droid serif | normal | normal | /examples/fonts/droid/droid_serif_regular.typeface.json |
droid serif | bold | normal | /examples/fonts/droid/droid_serif_bold.typeface.json |
5. 位图字体
BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性。 详情请参阅three-bmfont-text。
现有库存的字体在项目中同样可用,就像A-Frame Fonts一样, 或者你也可以从任何TTF字体中创建你自己的字体,优化时,只需要包含项目中所需的字符即可。
这是一些有用的工具:
msdf-bmfont-web (web-based)
msdf-bmfont-xml (commandline)
hiero (desktop app)