TextGeometry - three.js wiki

更新日：2013-04-21, r58

---

テキストジオメトリ。使い道多そうなのに下準備がちょっと面倒くさいヤツ。

説明

<script type="text/javascript" src="fonts/helvetiker_regular.typeface.js"></script>

まずtypeface.js形式のフォントファイルを読ませないとダメ。three.js読み込んだ後に。

THREE.TextGeometry( text, {
　size, curveSegments, height,
　font, weight, style,
　material, extrudeMaterial,
　bevelEnabled, bevelSize, bevelThickness, bevelSegments,
　extrudePath, steps,
　UVGenerator, frames
})

それからテキストのジオメトリを作る。

いっぱいパラメータが並んでるが、最短これで作れる（要読み込みhelvetiker_regular.typeface.js）。

var textGeo = new THREE.TextGeometry ( "Hello, World!", { } );

パラメータ

:size <float>[= 100]
|高さ。
:curveSegments <int>[= 4]
|字カーブ分割数。増やすと字の曲線が滑らかに。
:height <float>[= 50]
|厚さ。名称が紛らわしいがこう書いてあるから仕方ない。

:font <string>[= "helvetiker"]
|読ませたフォントを指定。（読み込ませたtypeface.jsのfamilyNameプロパティ値を小文字で。）
:weight <string>[= "normal"]
|"normal"：通常、"bold"：太字。（読み込ませたtypeface.jsのcssFontWeightプロパティ値。）
:style <string>[= "normal"]
|"normal"：通常, "italics"：斜体。（読み込ませたtypeface.jsのcssFontStyleプロパティ値。）

:material <int>
|フォント自体の前面・背面部分のマテリアルのインデックス。
:extrudeMaterial <int>
|側面のマテリアルのインデックス。

:bevelEnabled <bool>[= false]
|true：ベベルをつける、false：ベベルをつけない（もちろんfalseだと以下の3つのベベルパラメータも無意味に）。
:   bevelSize <float>[= 8]
|アウトラインの太さ。
:   bevelThickness <float>[= 10]
|押し出し量。増やすと厚くなり、それに従いベベルの傾斜がゆるやかになる。
:   bevelSegments <int>[= 3]
|ベベル分割数。増やすとベベル側面が滑らかに。

:extrudePath <THREE.CurvePath>
|3Dスプラインパスを渡すとそれに沿って押し出し。heightの意味はなくなりベベルは効かなくなる。(creates Frames if .frames aren't defined)
:steps <int>[= 1]
|厚さの分割数。extrudePathの押し出しが滑らかに。number of points for z-side extrusions / used for subdividing segements of extrude spline too

:UVGenerator <Object>[= new THREE.ExtrudeGeometry.WorldUVGenerator]
|わからん。object that provides UV generator functions.
:frames <THREE.TubeGeometry.FrenetFrames>[= new THREE.TubeGeometry.FrenetFrames(extrudePath, steps, false)]
|わからん。containing arrays of tangents, normals, binormals.

例

ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（helvetiker_regular.typeface.js読み込み済とする）。

var textGeo = new THREE.TextGeometry( 'Leg', {
  size: 40,                 // 高さ40
  curveSegments: 1,         // 字曲線分割数1。カクカク。eが8角形に見える。
  height:20,                // 厚さ20
                            // フォント指定しないとhelvetikerの非ボールド、非イタリックに
  bevelEnabled: true, bevelSize: 3, bevelThickness: 5, bevelSegments: 2
                            // ベベル有効、3太らせる、5伸ばす、ベベル分割数2
});
var greenMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var text = new THREE.Mesh( textGeo, greenMaterial );
scene.add( text );

---

例2

ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（helvetiker_regular.typeface.js読み込み済とする）。

var textGeo = new THREE.TextGeometry( 'Leg', {
  size: 40,                 // 高さ40
  curveSegments: 2,         // 字曲線分割数2。eが16角形に。
  height:20,                // 厚さ20
  font: 'helvetiker', weight: 'normal', style: 'normal',  // フォントhelvetiker、非ボールド、非イタリック
  material: 0, extrudeMaterial: 1, // 前面背面はインデックス0、側面はインデックス1
  bevelEnabled: true, bevelSize: 5, bevelThickness: 20, bevelSegments: 3
                            // ベベル有効、5太らせる、20伸ばす、ベベル分割数3
});

var materialArray = [
  new THREE.MeshLambertMaterial( { color: 0xffff00 } ), // インデックス0に黄色マテリアル
  new THREE.MeshLambertMaterial( { color: 0xff0000 } )  // インデックス1に赤いマテリアル
];
var textMaterial = new THREE.MeshFaceMaterial( materialArray );
                            // マテリアル配列をMeshFaceMaterialオブジェクトに持たせる
var text = new THREE.Mesh( textGeo, textMaterial );
scene.add( text );

---

例3

ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（helvetiker_regular.typeface.js読み込み済とする）。

// パス（スプライン曲線3D）
var path = new THREE.SplineCurve3([
  new THREE.Vector3(0,0,0),
  new THREE.Vector3(0,40,0),
  new THREE.Vector3(40,40,0),
  new THREE.Vector3(40,40,40)
]);

// テキスト
var text = new THREE.Mesh(
  new THREE.TextGeometry( 'Leg', {
    size: 25, curveSegments: 1, height:100,  // extrudePath使うのでheightは意味がなくなる
    bevelEnabled: true, bevelThickness: 8, bevelSize: 8, bevelSegments: 1,
                                             // ベベル有効にしても効かなくなる
    material: 0, extrudeMaterial: 1,
    extrudePath: path,                       // パスに沿って押し出し
    steps: 32                                // 32分割で
  }),
  new THREE.MeshFaceMaterial([
    new THREE.MeshLambertMaterial( { color: 0x00ffff } ),
    new THREE.MeshLambertMaterial( { color: 0x0000ff } )
  ])
);
scene.add( text );

パスの方も押し出しの方もまだちゃんとできてないのか、入力次第ではヘンテコな表示になる。
実際、例の Leg の g のあたり見るとズレてる。