ブラウザだけでできる！wonderflではじめるFlash制作

第3回　ライブラリ（Papervision3D）を利用してFlashをつくっていく

2009年3月11日

大塚雅和

wonderful, Flash, Actionscript, 3DCG, Papervision3D

Flash, サンプル, FORK, ライブラリ

第3回では，wonderfl build online（以下，wonderfl）上でライブラリを使いながら，さらに高機能なFlashをつくっていきます。

高機能なFlashを効率よく作るには，ライブラリの使用は不可欠です。Actionscript3を使用したオープンソースのライブラリは豊富にありますので，先人の知恵を活かしていきましょう（※1）。

※1: wonderflでは，ご要望に応じて対応ライブラリを増やしております。詳細はwonderflのサイトを参照ください。なお，ライブラリを利用する際には，ライブラリのライセンスにご注意ください。

wonderflでPapervision3D入門

車メーカーのキャンペーンサイトなどで，3DCGを使って商品のデザインを演出しているサイトを見かけたことはありませんか？

実は，高速な演算処理を可能したActionscript3の登場により，Flashを使うことで3DCGを操作できるようになっています。

Flashで3Dを扱うための代表的なライブラリとして，Papervision3Dがあります。現在も活発に開発を続けられており，パフォーマンス向上や機能追加が行われています。

wonderflでPapervision3Dを利用する

wonderflでは，現時点（3月4日）最新版のバージョン2.0.869を使用可能です。

以下のページに，シンプルなサンプルを用意いたしました。前回と同じようにFORK（開き，コードの下にある「FORK」ボタンをクリック）してください。

今回利用するサンプル：

papervision3d simple example（cube）

自分のページに，FORKされたサンプルが表示されます。Flashの中央でマウスの位置に応じて回転する赤い立方体が見えましたか？

図1　赤い立体が表示される。マウスの位置に応じて回転する

では早速，コードを見てみましょう。

リスト1　papervision3d simple example（cube）

01: package {
02:   import flash.display.*;
03:   import flash.events.*;
04: 
05:   import org.papervision3d.cameras.Camera3D;
06:   import org.papervision3d.materials.*;
07:   import org.papervision3d.objects.*;
08:   import org.papervision3d.objects.primitives.Cube;
09:   import org.papervision3d.render.BasicRenderEngine;
10:   import org.papervision3d.scenes.Scene3D;
11:   import org.papervision3d.materials.utils.MaterialsList;
12:   import org.papervision3d.view.Viewport3D;
13: 
14:   public class PV3D_01 extends Sprite {
15:     private var camera    :Camera3D;
16:     private var scene     :Scene3D;
17:     private var viewport  :Viewport3D;
18:     private var renderer  :BasicRenderEngine;
19: 
20:     private var cube      :Cube;
21: 
22:     public function PV3D_01() {
23:       camera   = new Camera3D();
24:       scene    = new Scene3D();
25:       viewport = new Viewport3D( stage.stageWidth, stage.stageHeight );
26:       renderer = new BasicRenderEngine();
27:       addChild( viewport );
28: 
29:       var materials :MaterialsList = new MaterialsList( { all : new ColorMaterial(0xD7261C) } );
30:         cube = new Cube( materials );
31:         scene.addChild( cube );
32: 
33:         addEventListener( Event.ENTER_FRAME, onEnterFrame );
34:       }
35: 
36:       public function onEnterFrame(e:Event): void {
37:         cube.rotationX += ( mouseX - stage.stageWidth /2 ) / 200;
38:         cube.rotationY += ( mouseY - stage.stageHeight/2 ) / 200;
39: 
40:         renderer.renderScene( scene, camera, viewport );
41:      }
42:   }
43: }

前回同様，コードを編集し，コンパイル後に生成されるFlashがどう変化するか，見ながら理解を始めてみます。

なお，最新のPapervision3Dのドキュメントは下記にあります。

http://docs.pv3d.org/

見たことの無いクラス名等出てきたら，都度，参照しながら理解を深めましょう。

29行目に，16進数：0xD7261Cがあります。これを好みの色に変更してみましょう。リコンパイル後に表示されるFlashを見ると，立方体の色が変わっていますね。

この16進数はCubeの色を表していますが，コードを見ると，ColorMaterialというクラスに第一引数として色を渡し，ColorMaterialはその後MaterialsListとしてCubeをインスタンス化する時に引数として渡しています。つじつまが合いますね。

33～38行目辺りは前回も近いコードがあります。37，38行目の数字を変えると，立方体の回転速度が変わると思います。

コードを見ると，33行目で，Event.ENTER_FRAMEというイベントにaddEventListenerしてonEnterFrameという関数を結びつけています。

Event.ENTER_FRAMEは毎フレームの初めに起こるイベントですので，onEnterFrame関数は毎フレーム呼ばれ，cube（立方体）のrotationX,rotationY（変数名の英語の意味のとおり，X，Y軸の周りの角度をあらわす）を変更しています。

wonderful, Flash, Actionscript, 3DCG, Papervision3D

大塚雅和（おおつかまさかず）

面白法人カヤックのWebプログラマー。数々のマッシュアップサービスで受賞するうちに，ついには「マッシュくん」と呼ばれるように。今回取り上げたwonderfl build onlineをはじめ，日本最大の音声コミュニティサイト「こえ部」をゼロから作ったスマッシュコンテンツ仕掛け人。

面白法人カヤックの「技術部」，「BM11」（研究開発ラボ）のメンバーとして在籍中。

URL：http://www.kayac.com/member/ohtsuka
URL：http://maaash.jp/

ブラウザだけでできる！wonderflではじめるFlash制作

第4回　Papervision3Dとtweensyを利用してアニメーションをつくっていく
第3回　ライブラリ（Papervision3D）を利用してFlashをつくっていく
第2回　wonderflを使用してFlashのお絵かきツールをつくっていく
第1回　wonderflでFlashのHello World!をつくる

このエントリのトラックバック URI

お名前
メールアドレス
タイトル
コメント

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする，資格試験合格サイト「めざせ！情報処理試験パスサポ」が開設されました。

サクセスストーリーに続く，快適サーバー運用管理のヒント！: データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
gihyo.jp インフラエンジニア情報局: ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え，その魅力について多角的に紹介。
テストエンジニアステーション: いま，ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

※検索はページ右上の検索ボックスをご利用ください。

最新ソフトウェアプロテクションの導入方法（3/8～4/16）
Adobe FLASH PLATFORM CAMP Tokyo（3/16）
「組込みデータベースを利用した開発のポイントとDeviceSQLのご紹介」セミナー（3/17）

使ってみよう！ Windows Live SDK/API: Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。
Lifelog～毎日保存したログから見えてくる個性: コンピュータを使って，日常のさまざまなことの記録（ログ）をとり，それを分析して活用することで，もう一段階上の「楽な生活」をめざす日々の研究報告です。
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）: 本連載では，実践サンプルとともに，jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。
Ruby Freaks Lounge: Rubyに関わる，執筆者自身の旬なテーマを扱った，リレー形式の連載です。
これでできる！クロスブラウザJavaScript入門: JavaScriptはウェブ制作において避けては通れない重要な言語ですが，JavaScriptに苦手意識を持たれている方は少なくないようです。その最大の原因がクロスブラウザ対応という課題であり，本連載ではクロスブラウザ対応のテクニックを詳細に解説します。
ビジネスで成功するためのシステム運用管理のポイント: システムの多様化，技術進歩に伴い，ITシステムの運用管理の必要性が年々高まっています。本連載では，システムの運用管理とは何かについて，現場のニーズと具体的な指針を押さえながらを解説します。
2010年版SEO体得講座: 本連載では，いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて，最新トレンドからすぐに使えるTipsまでを紹介します。
小型Linuxサーバの最高峰 OpenBlockS 600活用指南: 搭載メモリの増加，CPUクロックの向上など，あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から，活用するためのさまざまなノウハウを紹介していきます。