Papervision3Dの応用とクラス拡張
「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で表現するのも面白いかもしれません。