スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

先日のエイプリルフールでは、近年恒例化しているジョークサイトが各サイトで見られました。
そんな中「3D」がキーワードだったようで、「サイトが3Dになります」「動画が3Dで見えます」などのネタが多かったようです。今年度は何かしら3Dであることが注目を集めるキーになりそうですね。
そんなわけで、Flashで3D表現を可能にするPapervision3Dを本格的に手を出してみようと思いました。今回はその導入編です。






上のサンプルswfを作成するまでですが、まずは、Papervision3Dの公式サイトよりライブラリをダウンロードします。最新版のソースなどはSubversionで管理されているようですね。
http://blog.papervision3d.org/

ダウンロードした2つのフォルダ「nochump」「org」と同階層にflaファイルを用意し、ドキュメントクラスMain.asを用意します。flaファイルで設定するのはステージのサイズぐらいですね。
Main.asの内容は以下の通りです。

package {
	import flash.events.Event;
	import org.papervision3d.view.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.materials.*;
	public class Main extends BasicView{
		public var sphere:Sphere;
		public function Main(){
			var material:WireframeMaterial = new WireframeMaterial(0x0000FF);
			sphere = new Sphere(material, 300, 15, 15);
			scene.addChild(sphere);
			startRendering();
			addEventListener(Event.ENTER_FRAME, mvSphere);
		}
		private function mvSphere(e:Event):void {
		sphere.rotationY += 1;
		}
	}
}

他のサイトで紹介されているサンプルでは、Spriteを継承して多くのパラメータを設定するのを見ますが、Papervision3DではSpriteを継承しているBasicViewというクラスが用意されており、これを継承することでだいぶシンプルなコーディングが実現できます。
実際、今回紹介したサンプルのように10行程度のスクリプトで回転する3Dの球体を描写できるんですね。

次回はもう少し凝った表現にチャレンジです。

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

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search