「TextGeometry」の編集履歴（バックアップ）一覧はこちら
「TextGeometry」(2013/04/21 (日) 00:02:21) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#divclass(modif){更新日：&date(), r57}
#divclass(hd){#hr()}
テキストジオメトリ。使い道多そうなのに下準備がちょっと面倒くさいヤツ。
#divid(d0){}
***説明
>&b(){<script type="text/javascript" src="fonts/helvetiker_regular.typeface.js"></script>}
まずtypeface.js形式のフォントファイルを読ませないとダメ。three.js読み込んだ後に。
>&b(){THREE.TextGeometry( text, {}
> size, curveSegments, height,
> font, weight, style,
> material, extrudeMaterial,
> bevelEnabled, bevelSize, bevelThickness, bevelSegments,
> extrudePath, steps,
> UVGenerator, frames
>&b(){})}
それからテキストのジオメトリを作る。
いっぱいパラメータが並んでるが、最短これで作れる（要読み込み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つのベベルパラメータも無意味に）。
:&space(3)''bevelSize'' <float>[= 8]
|アウトラインの太さ。
:&space(3)''bevelThickness'' <float>[= 10]
|押し出し量。増やすと厚くなり、それに従いベベルの傾斜がゆるやかになる。
:&space(3)''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
#divid(d1){}
ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（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
#divid(d2){}
ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（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 のあたり見るとズレてる。
#include(-g_text)
#include(-g_text2)
#include(-g_text3)
//.
#divclass(modif){更新日：&date(), r58}
#divclass(hd){#hr()}
テキストジオメトリ。使い道多そうなのに下準備がちょっと面倒くさいヤツ。
#divid(d0){}
***説明
>&b(){<script type="text/javascript" src="fonts/helvetiker_regular.typeface.js"></script>}
まずtypeface.js形式のフォントファイルを読ませないとダメ。three.js読み込んだ後に。
>&b(){THREE.TextGeometry( text, {}
> size, curveSegments, height,
> font, weight, style,
> material, extrudeMaterial,
> bevelEnabled, bevelSize, bevelThickness, bevelSegments,
> extrudePath, steps,
> UVGenerator, frames
>&b(){})}
それからテキストのジオメトリを作る。
いっぱいパラメータが並んでるが、最短これで作れる（要読み込み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つのベベルパラメータも無意味に）。
:&space(3)''bevelSize'' <float>[= 8]
|アウトラインの太さ。
:&space(3)''bevelThickness'' <float>[= 10]
|押し出し量。増やすと厚くなり、それに従いベベルの傾斜がゆるやかになる。
:&space(3)''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
#divid(d1){}
ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（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
#divid(d2){}
ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（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 のあたり見るとズレてる。
#include(-g_text)
#include(-g_text2)
#include(-g_text3)
//.
