「Vectorvision」で3D TEXTを表現する

「Vectorvision」で3D TEXTを表現する

　Vectorvisionとは、Papervision3dの機能拡張したフリーのベクター版3Dエンジンです。ベクター／SVGなどのデータを使って簡単に3Dの表現ができます。Helveticaフォントデータが用意されているが、別途作成したフォントデータを使用すれば好きなフォントを使って3Dにすることができます。

　では、最初にフォントデータを使用した表示の設定方法を説明します。まず、Google CodeからVectorvisionクラスをダウンロード（http://code.google.com/p/vectorvision/）します。サンプル内で使用しているバージョンはvectorvision_08になります。今回使用するサンプルは「p2/vectorVision_text/Letter_3D.as.as」になります。このサンプルもBasicViewを継承して3Dシーンを生成しているので、フォントデータ読み込みの部分を紹介したいと思います。

　まず、文字用のマテリアルを作成します（27行目）

Letter3DMaterial(色,Alpha);
var material : Letter3DMaterial = new Letter3DMaterial(0x00, 1 );

　表示させたい文書を入力（複数行可能で\nで改行）（29行目）。3Dテキストを生成、文章、フォントデータ、マテリアルを設定します（31行目）。

word = new Text3D(txt, new HelveticaLight(), material);

　文字間スペースと行スペースの調整をします（33-34行目）。

word.letterSpacing = -10;
word.lineSpacing = -10;

　これで実行すれば文字がカーソルに沿って回転します。

　Vectorvisionでは、「p2/vectorVision_text/org/papervision3d/typography/fonts/」を見ると分かるように、デフォルトで用意されているフォントは以下になります。

・HelveticaBold
・HelveticaMedium
・HelveticaLight
・HelveticaRoman

　Vectorvision用のフォントデータを作成すれば、ほかのフォントも3Dで表示することができます（図2）。また、サンプル内にほかのフォントデータ「p2/vectorVision_text/Caslon224Book.as」を用意しました。詳しいフォントデータの生成についてはGoogle Code（http://code.google.com/p/vectorvision/wiki/FontCreation）」を参考にしてください。

ベクターSHAPE、SVGデータを3Dで表示する

　ベクター／SVGデータの使用方法を紹介します。サンプルフォルダ内の「p2/vectorVision_svg_graphic/graphicVector_3D.as」を見ていきます。このサンプルは3つの形ベクター3Dを描画して表示しています。

　まず、ベクター3D生成の部分を紹介します。マテリアルを作成し、生成したVectorShape3Dクラスに貼（は）り付けます（31-32行目）

var material : VectorShapeMaterial = new VectorShapeMaterial();
shape1 = new VectorShape3D(material);

　あとは、addChildをしてdrawShape関数でShapeを描画します（34-35行目）。

scene.addChild(shape1);
drawShape(1);

　drawShape関数内の描画の方法ですが、見ていただければ分かるようにFlashの描画APIと同じ方法でShapeを描画しています。なお、Graphics3Dで用意されているShapeは矩形（くけい）、円、角丸矩形になります。このサンプルではこの3つ形を描画しています。

　次に、SVGデータの読み込みについて紹介します。サンプルフォルダ内の「p2/vectorVision_svg_graphic/graphicSVG_3D.as」を見ていきます。SVGデータをURLLoaderで読み込んで、読み込み終了した_onLoadCompleteを呼びます（35行目）。そして_onLoadComplete内では読み込んだデータをSvgPathsPapervisionクラスにわたして、次にマテリアルを貼（は）ったVectorShape3D内に描画していきます（41-47行目）。

　イラストレターで作成したSVGを読み込めるので、いろんな複雑な形を3Dで表現するのも面白いかもしれません。