カタン: 2009年2月アーカイブ

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

今回はマウスイベントの利用とカメラの移動の二つを使って
「マウスが乗っているときには拡大、マウスが乗っていないときには縮小」
するというFlashを制作してみました。
コード上にて今回の要点となる部分をまず記述させていただきます。

マウスイベントの設定

マウスイベント関連でポイントになる箇所はコード上の以下の部分です。

18行目：
import org.papervision3d.events.InteractiveScene3DEvent;

InteractiveScene3DEventというクラスにマウスイベントが定義されていますのでインポートします。

45行目：
viewport = new Viewport3D(550 , 400, false, true);

マウスイベント操作のために四つ目の引数(interactive)をtrueにします。
参考までに、一つ目の引数が横幅(viewportWidth)、二つ目の引数が縦幅(viewportHeight)、三つ目の引数がステージのサイズ変更時にサイズ変更するか(autoScaleToStage)を意味しています。

58行目：
sphere_bfm.interactive = true;

図形に貼り付けた画像(BitmapFileMaterialのインスタンス)のinteractiveをtrueにします。
マウスイベントを許可するためです。

62行目・63行目：
sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OVER , onOver);
sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OUT , onOut);

マウスイベントの定義です。
ここではマウスのOVERとOUTを定義しています。
onOverとonOutがイベント時に呼び出すメソッド名です。

カメラの移動

物体の拡大と縮小を表現するために、物体そのものの大きさを変えることは一つの手です。 しかし、せっかく3Dを扱っているのですから、今回はカメラの移動による拡大と縮小の表現を行ってみます。

カメラ移動関連では以下のメソッドを使用しています。
これらのメソッドはDisplayObject3Dから継承しているものなので、カメラ以外でも使用します。

• moveForward 向き合っているオブジェクトの方向へと指定した距離だけ移動します。
• moveBackward 向き合っているオブジェクトと反対方向へと指定した距離だけ移動します。
• distanceTo
  引数として与えたオブジェクトとの距離を返します。

結果(オブジェクトにマウスカーソルを乗せてみてください)

ソース

/* * 拡大と縮小(カメラ距離変更) * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.primitives.Sphere; import flash.events.Event; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.events.InteractiveScene3DEvent; public class Sample06 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var sphere:Sphere; public var sphere_bfm:BitmapFileMaterial;//貼り付け画像 public var yaw_num:Number = 5.0;//回転度数 public var move_num:Number = 20.0;//移動距離 public var min_num:Number = 200.0;//最短距離 public var max_num:Number = 3000.0;//最長距離 public var over_boo:Boolean = false;//マウスが乗っているかどうかの判定 //コンストラクタ public function Sample06() { init();//初期化関数開始 } //初期化関数 public function init(){ //マウスイベントを受け取るために四つ目の引数(interactive)をtrueにすること viewport = new Viewport3D(550 , 400 , false , true); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); //BitmapFileMaterialには画像URLを引数として渡す sphere_bfm = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d03back.jpg"); //マウスイベント送信を許可するため sphere_bfm.interactive = true; sphere = new Sphere(sphere_bfm); sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OVER , onOver);//OVERイベント定義 sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OUT , onOut);//OUTイベント定義 this.buttonMode = true;//ボタンカーソル形状変更 scene.addChild(sphere); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { sphere.yaw(yaw_num);//回転軸に沿って回転 //over_booの値によってカメラを前方あるいは後方へ移動させる if(over_boo != false){ //カメラを前方へ移動 //if文は最短距離以上に近づかないようにするため if(camera.distanceTo(sphere) > min_num + move_num)camera.moveForward(move_num); else camera.moveForward(camera.distanceTo(sphere) - min_num); } else{ //カメラを後方へ移動 //if文は最長距離以上に遠ざからないようにするため if(camera.distanceTo(sphere) < max_num - move_num)camera.moveBackward(move_num); else camera.moveBackward(max_num - camera.distanceTo(sphere)); } renderer.renderScene(scene, camera, viewport);//描画 } //OVER時関数 public function onOver(event:InteractiveScene3DEvent):void { over_boo = true; } //OUT時関数 public function onOut(event:InteractiveScene3DEvent):void { over_boo = false; } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

次回は一つの物体の複数角度からの同時表示について学習する予定です。

同時に複数方向からの表示‐Papervision3Dのお勉強(6)‐へ。
マウス位置に合わせての画像回転‐Papervision3Dのお勉強(4)‐へ。

春ぐらいに新しいPCを買おうかなと、昨年からぼんやり計画しています。
現在のメイン機がWindowsXPのデスクトップなので、外に持ち運ぶことができるノートパソコンを。

ノートパソコンも使い慣れているWindowsにしようかなと思っていました。
でも、クロスブラウザチェック(ブラウザ毎の表示・動作確認)のこともあるしMacにしようかなと考えるようになりました。

現在持っているデスクトップマシンは3年前ぐらい？に買ったものです。
もしもWindowsのノートを購入するならデスクトップはあまり使わなくなったのかもしれませんが、Macのノートを買う以上、まだましばらく現役で使いそうな感じです。

ということで、メモリを購入しました。
現在の512M→2Gへ拡張です。

これまでずっと、512MのメモリでFlashCS3を使ってきました。
FlashCS3のメモリに対する最低要件は512M、推奨要件は1Gです。
ActionScript中心で絵をそれほど描きはしないので、512Mでも作業に支障をきたすほどのことはなかったですが、もう少し遅延なく動くとありがたいなとは思っていました。

メモリは価格.com経由でお店を見つけました。
いまさらわたしが薦める必要もないぐらい有名ですが、本当に便利なサイトです。

パソコンもパワーアップしたし、ばりばり行動するぞっと。

いつも二月になると考えるのが「今年ももう一ヵ月過ぎたんだな」ということ。

特に深い意味なくぼんやりと考えるときがあれば、ネガティブな気持ちで考えるときもあるし、穏やかに過ごせている日常に感謝しながらだったりもする。

今年も二月になり「今年ももう一ヵ月過ぎたんだな」と考えた。
ただ、なんだかこれまでとは違う。
一ヶ月が過ぎたという事実が、例年よりもくっきりとしている。
例年よりも、濃い。
それがなぜなのかというと、今年はこれから色々なことが待ち構えているから。

今後に向けてどうするべきかばかりを考えて過ごした一月……
さて、二月と三月は今後に向けて、気持ちや実力とか、できるだけたくさん蓄えよう。

皆さんにとって一月はどんな月でしたか。
今年の残り十一ヵ月に繋がる一月になりましたか。
未来に繋がる一月になりましたか。

これから待ち構えている変化たちを、良い形で皆さんにお届けしていければと思っています。

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

前回は立方体への外部画像ファイルの貼り付けを行いました。
今回は外部画像を貼り付けた立方体を、マウス位置によって回転させてみようと思います。

つまり

• マウスのx座標を元にして立方体の横方向の回転角度を


• マウスのy座標を元にして立方体の縦方向の回転角度を

決めます。

マウス位置に合わせた回転角度の決定

以前このblogにも書きましたが、CubeやCubeといった基本図形はすべて、DisplayObject3Dクラスを継承しています。

そして、3D物体に関する多くの基本的なプロパティがこのDisplayObject3Dには用意されています。

今回はその中でrotationY(Y軸を基準とした回転)とrotationX(X軸を基準とした回転)を利用しました。

ENTER_FRAMEイベント発生時にマウスのx座標とy座標を元にして、六面に画像を貼り付けたCubeクラスインスタンスのrotationYとrotationXを変更しています。

以下が結果です。

以下がソースです。

/* * 基本図形(Cube)のマウス位置に合わせての回転 * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.primitives.Cube; import flash.events.Event; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.materials.utils.MaterialsList; public class Sample05 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var cube:Cube; private var top_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04top.jpg"); private var left_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04left.jpg"); private var right_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04right.jpg"); private var bottom_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04bottom.jpg"); private var front_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04front.jpg"); private var back_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04back.jpg"); //コンストラクタ public function Sample05() { init();//初期化関数開始 } //初期化関数 public function init(){ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); //BitmapFileMaterialを引数として渡す cube = new Cube(new MaterialsList({top:top_bfm , left:left_bfm , right:right_bfm , bottom:bottom_bfm , front:front_bfm , back:back_bfm}) , 300 , 300 , 300); scene.addChild(cube); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { //マウスカーソルが左端から右端に移動する間に横に一回転 //横に回すということはy座標中心に回すということ cube.rotationY = ((mouseX / 550) * 360); //マウスカーソルが上端から下端に移動する間に縦に一回転 //縦に回すということはx座標中心に回すということ //+180しているのはマウス位置が中央のときに前を向くように cube.rotationX = ((mouseY / 400) * 360 + 180); renderer.renderScene(scene, camera, viewport);//描画 } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

次回はマウスイベントの取得について学習します。

マウスイベント取得とカメラの移動‐Papervision3Dのお勉強(5)‐へ。
3D物体への画像貼り付け‐Papervision3Dのお勉強(3)‐へ。