Papervision3Dの応用とクラス拡張

2009年1月29日(木)
楊 上弘
基本使用方法と3Dモデルデータの読み込み方法

「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で表現するのも面白いかもしれません。

DROP DEAD主催。大学卒業後、Webアプリケーション開発、Webデザイン職を経て、現在はフリーランスでサイトデザイン/Flashオーサリング/CG映像制作などを行っている。http://www.drop-dead.co.uk

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています