PR

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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