PV3Dやってみる(1)

この記事は半年以上前の情報なので、古い可能性があります

PV3Dやってみる(1)

2008年01月24日 投稿者：ハセガワ

Flashで驚異の3Dムービーを作れるPapervision3D。ほとんど初心者の筆者に何が作れるのか試してみる。

ブックマークする：

sphere

■Papervision3D（PV3D)とは

・Flash3Dを扱うためのクラスライブラリ。
・AS2.0用も用意されているがAS3.0のが高速に動く。
・2008.1.24現在のメジャーバージョンはPapervision3D 2.0 Alpha（通称GreatWhite）。

■筆者の状態

・去年ほんの少しだけPapervision3D 1.5を触ったことがあるくらい。
・AS2.0は本一冊分斜め読みしてかじったくらい。 FuseKitは結構使ったことある。
・classについての理解度はほんのちょっと。
・3Dの知識も、Lightwaveでちょっとしたモデリングが出来る程度。
というド素人の状態です。 ASについて書いていることは自分でもあやふやです。これから一生懸命勉強します。

▼1.新規ASファイルを作ってPV3Dのライブラリを読み込む

FlashのバージョンはCS3です。
Papervision3D 2.0の入手方法はSVNという方法(?)を使います。
その方法も初めて知ったので謎だらけでした。後日詳述します。

◆ファイル>>新規＞＞ActionScript（AS)ファイルで新規ASファイルを作成

新規asファイル

拡張子.asのファイルは単なるテキストなのでエディタは何を使ってもいいかと思いますが、そんなに詳しくないのでFlashCS3で作ります。
何か作ろうと思ってはみましたが、まず「カスタムクラス」がよくわかりませんでした。（お前そこからかよっ!とツッコんでください、そして読み飛ばしてください）

◆カスタムクラスって? （超初心者向け・筆者含む）

カスタムクラスは、「Flash上で表現したい機能をまとめた部品スタジオ」のようなものだと思いました。
Papervision3D自体も、カスタムクラスの集団ですよね。
言ってみればPapervision3Dの中に

「ボールやサイコロ（立方体）などの素材、それを置く部屋（空間）、それを撮影するカメラ」など

が用意してあって、私は今からそのスタジオを利用させてもらって、例えば

「100×100のサイコロが、ステージの真ん中で、ぐるぐる回っている」様子を実際作る、と。

そういうことでしょうか。
この「実際作る」のが、Illustratorなどでは「長方形ツールを選択してドラッグ」という見た目重視の操作になっているのに対して、カスタムクラスでは「ASという言葉で命令」してあげている、ということかと思います。

もしpapervision3Dがなくても、自分で「俺のスタジオはこんな感じ」「カメラの性能はこんな感じ」と定義したカスタムクラスを1から作っていけばいいわけですが、そんな頭脳も根性もないヘタレの私は、素晴らしく才能のある人が用意してくれたカスタムクラスを利用して、比較的簡単に「サイコロを作って表示」ができるわけです。

Flashがもってる機能（クラス）
↓
それを継承して3D向けに拡張したクラス（PV3D)
↓
更にそれを継承した自分のクラスで実際に何かを作って表示させよう!

という風に、考えたら納得いきました。
そして、自分で作る命令は、asファイル（クラス）ではなくFlaファイルのキーフレームにも直接書けるわけですが、後でわけわからなくなってしまうので、こうして外部ファイルにしておいた方が管理やら修正やらの面で便利、ってことですね。デザインする人とプログラム書く人を分離できますから。

◆では実際に入力して準備を

新規のASファイルを開いたら

package{
}

と記述。AS3.0ではこのpackａｇｅが必要みたいです。
とりあえず今は必要なさそうなので{　}の中にまずPapervision3Dの機能を読み込む命令を書いてあげます。

package{
import org.papervision3d.view.*;
import org.papervision3d.objects.primitives.*;
}

import～は、別のファイルにあるクラスをここへ読み込んでくる、という意味でしょう。
2行目の場合、
【orgフォルダ】→【papervision3dフォルダ】→【viewフォルダ】の中のファイル（クラス）を全部読み込む、という意味。
*はその中のもの全部、ということらしいです。cssでもよく使いますね、全html要素に対してスタイルを適用する時とかに。

とりあえず、これだけで準備はできました。
でもまだ、肝心の「形を作る」「表示する」「動かす」が何も書けてません。

強制終了すると悲しいので「Test.as」という名前で保存しておきましょう。
（クラスの最初は大文字で始めるのが一般的だそうです）

▼実際の形を作る

◆public class クラス名{}　でクラスを決める

さきほど書いたimport文の続きに

package{
   import org.papervision3d.view.*;
import org.papervision3d.objects.primitives.*;

   public class Test extends BasicView{
   }
}

の2行を足します（}もこれだけで1行分です）
Testは自分で今作っているカスタムクラスの名前です。
好きな名前でいいでしょう、ただし、

ファイル名（拡張子除く）と一致させる（Test.asで保存したらTest）
大文字小文字も完全に一致してないとダメ

に注意しておきます。
publicは「どこからでも参照できる」という意味みたいです。

◆extends

クラス名Testの後に【extends】という単語が来ていますが、何でしょうか。
これは「継承」というやつで、後ろの「BasicView」というクラスを拡張して使わせてもらいますよ、ということを表してます。
まっさらな自分だけのクラスじゃなくて、BasicViewに書いてある便利機能を使わせてもらいますよ、ということでしょう。
ちなみに、BasicViewは2行目のimport org.papervision3d.view.*で読み込まれたクラスに含まれています。

早速【BasicView.as】を開いてみたのですが。。
カメラに関する設定のようですね。。デフォルトでカメラを設定してくれるクラスのようです。。
すいません、もっと勉強します。

◆public function 機能名{}　はコンストラクタ（?ってなに?）

気をとりなおして。本でよく見かける単語に「コンストラクタ」という言葉があるのですが、それもぼんやりとしかわかりません。
とりあえず記述してみます。

package{
   import org.papervision3d.view.*;
import org.papervision3d.objects.primitives.*;

   public class Test extends BasicView{
      public function Test() {
      }
   }
}

2行追加。さっきクラス名をつけて、「クラス作ったぜ」みたいなことになりましたが、ここから実際に「ものを作る」作業に入ります。
「コンストラクタ」を調べてみると「インスタンスを作成し、初期化する関数」と書いてありました。
ん～まだよくわかんない。要するに、「実行部隊」と考えていいでしょうか。

とにかく、

public function ファンクション名{ ここに実行する作業を記述 }

ということですね。とにかく、やりたいことを書けばいいと。
というわけで、まずは何かを表示したいので、

package{
   import org.papervision3d.view.*;
import org.papervision3d.objects.primitives.*;

   public class Test extends BasicView{
      public function Test() {
           var mySphere:Sphere = new Sphere(null,600,40,40);
           scene.addChild( mySphere );
           startRendering();
      }
   }
}

と適当に書いてみました（ホントに適当です）。

//半径600、縦40分割、横40分割のボール（Sphere）を作る
var mySphere:Sphere = new Sphere(null,600,40,40);

//3D空間にそれを貼り付ける
scene.addChild( mySphere );

//表示スタート
startRendering();

で表示されるかなあ。では実際にFlashで表示させてみましょう。

▼Flaファイルを作成、クラスを関連付け

ファイル>>新規＞＞Flashファイル（AS3.0)を選びます。

as3.0

とりあえず、背景色だけ変えました。
あと、「ドキュメントクラス」のところに先ほど作った「Test」を入れて、
FlaファイルとTest.asを関連付けます。

プロパティ設定

で、「ファイル>>保存」から、適当な名前をつけて、
Test.asと同じフォルダに保存します。

そしたら、わくわくしつつ、【ctr+Enter】（win）でプレビューしてみます。

▼結果

sphere

表示されました!
うわー超ウレシイ。ホントに。動きも何もしないけど。

というわけで、次はぐるぐると回転させてみようと思います。

何か面白いことをやってみたくて、Papervision3Dに手を出してみる（筆者はPV3D初心者）