Three.js を使ってみて存在を知りましたが、必要範囲のみのデータ量にできるのがとても有効だと思います。ブラウザの開発者ツールで実行後のコードを見ると、描画方法として、canvas と vml が用意されていて、IE8 は vml が使われています( IE9 以降は canvas です )。Google Chrome や Firefox は canvas が使われており、canvas ではテキストが選択できるようになっています。 Three.js では、直接 typeface.js のデータを使うようになっているので、データを共有できるので便利です。
AB
<script src="http://winofsql.jp/js/load_typeface.js"></script>
<script src="http://winofsql.jp/js/three/data/lightbox_regular.typeface.js"></script>
<style type="text/css">
.s200 {
font-size: 200px;
line-height: 200px;
}
.s400 {
font-size: 400px;
line-height: 400px;
}
</style>
<div
class="typeface-js"
style="font-family: lightbox;">
<span class="s200">A</span>
<span class="s400">B</span>
</div>
以下はABのみの自作フォントの内容です
if (_typeface_js && _typeface_js.loadFace) _typeface_js.loadFace({"glyphs":{"A":{"x_min":43.40625,"x_max":651.046875,"ha":694,"o":"m 173 1171 q 254 1209 227 1204 q 303 1217 282 1215 q 363 1220 325 1220 q 434 1215 406 1220 q 493 1199 477 1204 q 531 1177 509 1193 q 569 1144 553 1161 q 618 1079 585 1128 q 645 971 640 1009 q 651 868 651 933 q 640 775 645 802 q 626 721 634 748 q 596 634 618 694 q 564 537 585 591 q 520 444 542 488 q 490 377 499 401 q 472 303 482 352 q 480 246 472 265 q 496 217 488 227 q 520 195 504 206 q 564 173 537 184 q 604 170 591 173 q 651 173 618 168 q 607 119 623 135 q 553 75 591 103 q 434 43 499 43 q 341 51 374 43 q 254 81 309 59 q 187 127 211 108 q 124 184 162 146 q 84 241 97 222 q 59 287 70 260 q 43 401 48 314 l 43 564 l 43 737 q 51 914 43 840 q 73 1030 59 987 q 130 1128 86 1074 q 173 1171 151 1155 m 227 1009 q 184 938 195 965 q 162 868 173 911 q 217 748 151 781 q 282 759 260 737 q 303 824 303 781 l 303 954 q 260 1041 260 954 l 217 998 l 227 1009 m 477 1041 q 390 954 434 954 l 390 824 q 434 737 390 737 q 499 754 477 737 q 542 824 520 770 q 542 900 547 857 q 520 971 531 944 q 477 1041 509 998 "}," ":{"x_min":0,"x_max":0,"ha":694},"B":{"x_min":43.40625,"x_max":694.453125,"ha":694,"o":"m 43 694 l 217 824 l 217 1085 l 477 1128 l 520 954 l 694 1030 l 542 922 l 607 705 q 629 602 618 651 l 640 531 q 651 412 645 472 l 651 303 l 43 130 q 217 265 184 238 q 336 368 249 292 q 406 444 390 423 q 434 520 423 466 q 287 472 336 488 q 173 434 238 455 q 260 564 227 520 l 368 596 q 434 694 423 607 q 358 640 412 661 l 260 607 l 260 651 l 130 607 l 217 781 l 130 737 l 43 694 "}},"cssFontWeight":"normal","ascender":1238,"underlinePosition":0,"cssFontStyle":"normal","boundingBox":{"yMin":43.40625,"xMin":43.40625,"yMax":1220.703125,"xMax":694.453125},"resolution":1000,"original_font_information":{"postscript_name":"","version_string":"Version 1.0","vendor_url":"","full_font_name":"night","font_family_name":"lightbox","copyright":"(c)yuno","description":"","trademark":"","designer":"","designer_url":"","unique_font_identifier":"Untitled_4B250121","license_url":"","license_description":"","manufacturer_name":"","font_sub_family_name":"Regular"},"descender":-301,"familyName":"lightbox","lineHeight":1597,"underlineThickness":0});
関連する記事 自作のデザインフォントを使って、Three.js のテキストオブジェクトテストサンプルですThree.js : 日本語フォントの立体表示
------------------------------------------------ フォントのデータは、ページを表示した後、開発者ツールで console.dir( _typeface_js.faces.lightbox.normal.normal.glyphs ) とすると確認できます
|
|
【Three.js & typefaceの最新記事】
- jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 200のオブジェクトが舞います。
- Three.js + Shadowbox 飛翔する200人の初音ミク
- 最新のThree.js(2012/04/22-r49)は、IEで動かないバグがあります。それと、CanvasRenderer からLambert で テクスチャの処理が削除されました
- Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法
- Three.js で、Blender から出力したデータ(Three.jsフォーマット)の境界線を消す overdraw の適用のさせかた
- 動的に typeface.js フォントを適用させる
- 日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な文字だけを抜き取るツールを作りました( 現在は 切り絵字/水面字/モフ字/青柳隷書しも )
- typeface.js(0.15)で、Operaが正しく動作しない理由
- typeface.js を少し変更して、データに値を追加するとドロップシャドウが実装できるようにしました
