three.js 创建文字的几种方法

three.js 创建文字的几种方法

three.js 创建文字的几种方法

1. DOM + CSS

传统网页html实现

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

将文字保存为图片格式,再将其当作一张蒙皮材质,贴到某个物体上

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

建模实现,成本高,效果好

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

  1. 构造器
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。

  1. 可用的字体

文本几何体使用 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)

上一篇:实验四 回溯算法和分支限界法 0—1背包问题


下一篇:AngularJS 创建 RSS 阅读器 —— FreedReadR