TextGeometry


※上記の広告は60日以上更新のない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 のあたり見るとズレてる。