Blog Top » Flash 3D »

  • 2009年02月21日 (土)
  • このエントリーをはてなブックマークに追加

フレームアクションで覚える Papervision3D チュートリアル Vol.01

090221_pv3d_tutorial

私の身の回りの人やメール等でPapervision3D (ペーパービジョンスリーディー)の使い方を教える機会があり、その度にチュートリアルサイトを教えたりしています。ただ、世の中のコードを見ると様々な書き方があり、スクリプトになれていない初級者にとっては、難解に思われる事が多いかと思います。

そこで、初級者にもやさしいPapervision3D(以下、PV3D)チュートリアルをはじめてみることにしました。チュートリアルビデオを用意して5回ぐらいに渡って連載したいと思います。必要となるスキルレベルは、ActionScript 3.0の入門書を一冊読み終えたぐらいを想定してます。

テーマは「フレームアクションだけの短いコードで、シンプルにPapervision3Dを使ってみる」です。

なお、Papervision3Dの解説はさらに詳しく書籍にもまとめています。このブログを読んでさらにスキルを高めたいという方がいましたら当ブログ管理者が執筆した次の書籍をオススメします。書籍はこちらのページで紹介してますので、興味がありましたらぜひご確認ください。

51omh-g4sYL._SL500_AA240_

「Flash3Dコンテンツ制作のためのPapervision3D入門」


さて、第一回は、セットアップから球面の回転までです。手順通りに進めば、10分くらいでできると思います。

連載の目次

まずはチュートリアルビデオ(4分)をご覧下さい


Papervision3D Tutorial Vol.01 (Setup and Hello World) from clockmaker on Vimeo.

ビデオは今回のデモを再現したものです。細かい設定等の不明点があればビデオを参照ください。以下、ビデオの内容を詳しく紹介していきます。

step 01. Google Code から Papervision3Dをダウンロード

まずはGoogle Codeのページにいき、Papervision3Dのファイルをダウンロードします。次のページには様々なバージョンが用意されていますが、ダウンロードするファイルは最新のバージョン2、zipファイルを選択すればよいでしょう。執筆時点での最新は「Papervision3D_2.0.869.zip」です。

step 02. flaファイルの準備

ダウンロードしたZIPファイルを展開します。その中に「org」「nochump」「LICENSE.TXT」が入っていますが、それらがPapervision3Dのライブラリとなります。それらのファイルと同じ場所にFlashファイル(.fla)を保存します。

階層としてはこんな感じです。

090221_pv3d_folder

(クリックで拡大できます)

ちなみに前提としてPapervision3DはActionScript 3.0/ Flash Player 9以上の設定が必須となりますので、flaファイルを作る際は上記設定を選びます。

090221_pv3d_5

step 03. 3D表示用のMovieClipを用意

ここからは様々な方法がありますが、その中でも私が最も一番手軽だと思う方法を紹介します。この方法では、Papervision3Dならではの複雑なスクリプトをできる限り記述せずに、シンプルなアクションスクリプトで制御できるようになります。

まずはFlaファイルを開き、

  • メニュー＞挿入＞新規シンボル

を選択します。新規シンボルの作成パネルで以下の通りに設定します。

090221_pv3d_2

(クリックで拡大できます)

リンケージ以下の設定はパネルの「詳細」ボタンを押す事で表示することができます。リンケージ内の基本クラスの箇所に次のクラス名を指定下さい。

  • org.papervision3d.view.BasicView

設定できましたらOKを押してパネルを閉じます。

BasicViewの補足

シンボルの「基本クラス」に「org.papervision3d.view.BasicView」を設定しましたが、この「BasicView」は何かという説明をします。「BasicView」はPapervsion3Dの初期化が自動的に行われているクラスファイルです。本来はレンダリングエンジン(renderer)、カメラ(camera)、ビューポート(viewport)、3Dシーン(scene)を宣言する必要があります。BasicViewを基底クラスに設定することで、上記のsceneなどのプロパティーを自動的に設定してくれますので、一つ一つの設定の学習は後回しにして取り合えず3Dを試してみたい、という方にはオススメの利用方法です。

Step04. ステージに3D表示用MovieClipを配置

ライブラリに「World」というシンボルができていると思いますので、それをルートのステージにドラッグし、原点座標(x:0, y:0)に配置し、インスタンス名に「world」(小文字)を入力しましょう。

090221_pv3d_3

(クリックで拡大できます)

これで設定が完了です。

Step05.フレームアクションで球面を表示

次にルートのフレームアクションに次のスクリプトを記述して、パブリッシュしてみましょう。

// Papervision3Dライブラリを読み込み
import org.papervision3d.objects.primitives.*

// 球面のオブジェクトを作成します
var sphere = new Sphere()

// 3D表示用MovieClip(world)のsceneプロパティーが3D表示空間となります
// world.sceneに対して5行目で作成した球面を表示(addChild)します
world.scene.addChild(sphere)

// Papervision3Dでは空間をレンダリングさせることで初めて表示されます
// worldインスタンスに対してstartRendering()させます
world.startRendering()

// アニメーションさせるためにEnterFrameのループイベントを指定します
addEventListener(Event.ENTER_FRAME, loop)

// 16行目で設定した毎フレーム時に実行されるループイベントです
function loop(e){
// 球面をY軸方向に回転させます
sphere.rotationY += 2
}

ここまでの設定がうまくいっていれば、画面上に球面が表示されるはずです。球面の色はランダムになるので、色は違うかもしれませんが、球面が回転していればOKです。

090221_pv3d_4

(クリックで拡大できます)

第一回は以上です。今回のソースファイルはこちらからダウンロードできます。

次回掲載はこちらからご覧頂けます。

連載目次

投稿者 : 池田 泰延

BookMark

ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 11件