マウス位置に合わせての画像回転‐Papervision3Dのお勉強(4)‐

※外部ライブラリ学習シリーズの目次はこちらです。
※使用している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)‐へ。