Lesson4 3Dに挑戦！
第3回 3Dオブジェクトをマウスで操作する
第2回では、地球に自転と公転のアニメーションを設定し、3Dオブジェクトをアニメーションさせる方法を見てきました。今回はインタラクティブ性を出すために、マウスイベントによって3Dオブジェクトを操作する方法を見ていきましょう。
（解説：有馬正人）
 |
［プロフィール］ ありま・まさと●株式会社セカンドファクトリー マネージャー／エクスペリエンスデザイナー。中央大学総合政策学部在学中に南アジア諸国でのNGO活動を経験し、自らのコアとなるスキルを身につける必要性を痛感する。卒業後、Web業界での“ものづくりスキル”を身につけることを目指し、専門学校にてWebデザインの勉強を行う。その後、デザイナーとしてセカンドファクトリーに参加。 http://www.2ndfactory.com/ |
トリガに3Dオブジェクトを動かすためのイベント処理を追加する
アニメーションを準備する
最初に、マウスイベントによって呼び出されるアニメーションを準備しましょう。本サンプルでは、マウスの左クリックでCameraのアングルが変わり、右クリックで元に戻るアニメーションを設定しています。カメラのアニメーションはカメラのPositionとDirectionの値を変更することで実現します。
まず、マウスの左クリックでCameraのアングルを変えるアニメーションを作成します。新規タイムラインを作成し「CameraMove」と名前をつけましょう。タイムラインを作成したら、「ZAM3DViewport3D＞Camera＞FrontOR7」を選択し、2秒後のPositionを「x=0、y=4、z=4」Directionを「x=0、y=-4、z=-4」と設定します【図1】。これで、回転し続ける天体をズームアウトしながら、最終的に天体の上部からカメラを撮影するようなアニメーションが作成できました。
【図1】「CameraMove」アニメーションの作成
次に、マウスの右クリックを押したときに天体が元の位置に戻るようなアニメーションを作成します。新規タイムラインを作成し「CameraMove2」と名前をつけましょう。先ほどのアニメーションが2秒間で位置の移動を行っていたので、今回も2秒間で元の位置に戻るアニメーションにします。
先ほどの、アニメーションではカメラプロパティの「LookDirection」、「Position」の値が変更されました。今回はこの2つの値を元の値に戻さなくてはなりません。ですので、「LookDirection」、「Position」のタイムラインレイヤーを下記の手順で作成します。
2秒後のタイムラインのカメラプロパティを開き、Positionの値を「z=2.4」→「z=0」→「z=2.4」Directionの値を「z=-1」→「z=0」→「z=-1」の順番で変更します【図2】、【図3】。最終的に値が元に戻るので、この作業に違和感を覚えるかもしれませんが、この操作を行うことで、タイムラインに「LookDirection」「Position」のタイムラインレイヤーが追加され、2秒後のタイムラインにキーフレームが記録されます。
【図2】「CameraMove2」アニメーションの作成
【図3】カメラアングルの移動を、Position、Drectionそれぞれのx、y、z軸の値で示すと図のような考え方になる
これで、カメラの位置がどこにあろうとも、「CameraMove2」が開始されたときは、2秒後に最初の位置にもどるようにアニメーションさせることが可能になりました。
イベントトリガを追加する
このままの状態では、すべてのアニメーションが起動時に同時に再生されてしまいます。初期読み込みで天体の自転、公転のアニメーションは開始されるようにし、マウスイベントのアニメーションは起動時にStopさせましょう。トリガパネルにある「Window.Loaded」を選択し、「jiten」「kouten」のbeginを確認してください。「CameraMove」「CameraMove2」もbeginに設定されていますが、このままだと起動時にカメラのアニメーションも再生されてしまうため、後で削除します。
その前に、マウスクリックイベントを追加しましょう。オブジェクトとタイムラインで「ZAM3DViewport3D」が選択されていることを確認し、「Window」となっているプルダウンを「ZAM3DViewport3D」に変更します【図4】。
【図4】「Window」から「ZAM3DViewport3D」に変更
またマウスを右クリックしたときにイベントが開始されるように「Loaded」から「MouseLeftButtonDown」に変更しましょう【図5】。
【図5】「Loaded」から「MouseLeftButtonDown」に変更
次に新しいアクションの追加「＋」ボタンクリックして「CameraMove」、「Begin」と選択【図6】すると、天体を左クリックしたときに「CameraMove」のタイムラインが開始されるようになります。
【図6】左クリックイベント処理
次に、同じ要領で右クリックの設定を行います。イベントを追加し今度は「MouseRightButtonDown」に変更しましょう。新しいアクションの追加「＋」ボタンクリックして「CameraMove2」「Begin」と選択してください【図7】。
【図7】右クリックイベント処理
これで、天体を左クリックした時は、天体をズームアウトして上部からみるアングルに切り替わり、右クリックをすると、アングルが元の状態に戻るようになり ました。最後にトリガパネルにある「Window.Loaded」を再度選択し、「CameraMove」の右にある「-」ボタンをクリックして起動時に 再生されるイベントから削除してください。「CameraMove2」も同様に削除します【図8】。
【図8】「Window.Loaded」の「CameraMove」、「CameraMove2」を削除
では、F5キーをクリックしプロジェクトのテストをして確認してみましょう。マウスのクリックでカメラのアングルが変わることが確認できると思います。
全3回にわたり、Blendで3Dオブジェクトを扱う方法を見てきました。このサンプルを応用すると下の動画のように、地球の周りに月を回したり、背景に星のテクスチャを張り付けたりと、より綺麗な天体を創造することが可能です。
【応用サンプル完成イメージ】
※再生している動画はサイトの制約上から、.swf形式で出力し再生させています。
3Dの世界は知れば知るほど奥が深い領域です.この連載だけですべてを説明することはできませんが、3Dオブジェクトを動かす楽しさは知っていただけたのではないでしょうか。
次回からは、コンテンツによりインタラクティブ性を出すために重要なデータバインディングを見ていきます。それでは、また次回！
――「Lesson4 3Dに挑戦！」は今回で終了です。
Lesson5は12月25日（火）からの掲載開始となります。お楽しみに！
