THREE.js创建三维文字TextGeometry

三维文字在许多场景中很常见，而THREE.js也为我们封装了TextGeometry类来更好（容易）地生成三维文字。

先来看看官网的介绍：

TextGeometry

A class for generating text as a single geometry. It is constructed by providing a string of text, and a hash of parameters consisting of a loaded Font and settings for the geometry’s parent ExtrudeGeometry.

可以看到，THREE.js通过把文字设成Geometry类来创建三维文字，而查看源码可知，它是通过ExtrudeGeometry类来实现的。

ExtrudeBufferGeometry.call( this, shapes, parameters );

TextBufferGeometry.prototype = Object.create( ExtrudeBufferGeometry.prototype );

构造函数

TextGeometry(text : String, parameters : Object)

参数说明：

• text — The text that needs to be shown. （要显示的字符串）

• parameters — Object that can contains the following parameters.

  • font — an instance of THREE.Font.（字体格式）
  • size — Float. Size of the text. Default is 100.（字体大小）
  • height — Float. Thickness to extrude text. Default is 50.（字体的深度）
  • curveSegments — Integer. Number of points on the curves. Default is 12.（曲线控制点数）
  • bevelEnabled — Boolean. Turn on bevel. Default is False.（斜角）
  • bevelThickness — Float. How deep into text bevel goes. Default is 10.（斜角的深度）
  • bevelSize — Float. How far from text outline is bevel. Default is 8.（斜角的大小）
  • bevelSegments — Integer. Number of bevel segments. Default is 3.（斜角段数）

parameters的大部分参数其实是用于ExtrudeGeometry的，可以参照ExtrudeGeometry的参数查看效果。

下面是官网给出的支持的字体格式：

TextGeometry uses typeface.json generated fonts. Some existing fonts can be found located in /examples/fonts and must be included in the page.

只能用这些字体：

Font	Weight	Style	File Path
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

字体需要使用FontLoader加载，也可以通过facetype.js在线转换

FontLoader

Class for loading a font in JSON format. Returns a Font, which is an array of Shapes representing the font. This uses the FileLoader internally for loading files.

使用示例

下面给出一个结合官网代码的示例：

var loader = new THREE.FontLoader();
    var geometry;
    loader.load( './assets/fonts/helvetiker_bold.typeface.json', 
        //加载好字体后创建三维文字
        function ( font ) {

            geometry = new THREE.TextGeometry( 'Hello three.js!', {
                font: font,
                size: 80,
                height: 5,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 10,
                bevelSize: 8,
                bevelSegments: 5
            } );
            //创建法向量材质
            var meshMaterial = new THREE.MeshNormalMaterial({
                flatShading: THREE.FlatShading,
                transparent: true,
                opacity: 0.9
        });
            var mesh = new THREE.Mesh(geometry, meshMaterial);
            mesh.position.set(-300, 0, 0);
            scene.add(mesh);
        },
        //加载进度
        function ( xhr ) {
            console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
        },
        //出现错误
        function (err) {
            console.log(err);
        }
     );

关于FontLoader的用法示例：

var loader = new THREE.FontLoader();
var font = loader.load(
    // resource URL
    'fonts/helvetiker_bold.typeface.json'

    // onLoad callback
    function ( font ) {
        // do something with the font
        scene.add( font );
    },

    // onProgress callback
    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },

    // onError callback
    function ( err ) {
        console.log( 'An error happened' );
    }
);

运行结果

在本地运行的效果，粒子是自己加的：

还有更多的官方例子：https://threejs.org/examples/#webgl_geometry_text
https://threejs.org/examples/#webgl_geometry_text_shapes