第2回　Blendで3Dオブジェクトを動かしてみる

前回は、ZAM3Dで地球の3Dオブジェクトを作り、Blendに配置しました。今回は地球に自転と公転のアニメーションを加えながら、3Dオブジェクトをアニメーションさせる方法を説明します。作業に入る前に、WPFでの3Dオブジェクトの扱い方を見ていきましょう。

前回のプロジェクトを開き、まず3Dオブジェクトの構造を理解していきましょう。

WPFではカメラやライト、3Dオブジェクトなどの3D要素は、Viewport3Dコントロール内に配置します。オブジェクトとタイムラインを見ると、前回作成した3Dシーンがどのように配置されているかがわかります【図1】。

（1）Viewport3D：WPFで3Dを扱うために用意されたコントロールです。
（2）Camera：画面に3Dシーンを投影するための仮想カメラです。遠近等の設定はここで行います。
（3）ModelVisual3D：ライトやモデルを含む、3Dシーンを格納します。
（4）AmbientLight、DirectionalLight：3Dオブジェクトに当てる光を表現します。必要に応じてライトを追加・削除することができます。
（5）Model3DGroup：モデルやライトなどをひとつのグループにまとめます。複数の要素に対して位置やサイズ等の変形を加える際に使用します。
（6）GeometryModel3D：3Dオブジェクトを表します。ここでは、ZAM3Dで作成された3Dオブジェクトを表します。
注意：3Dオブジェクト名の末尾の数字はユーザーの利用状況によって異なります。

3Dオブジェクトに対してアニメーションさせるには、オブジェクトとタイムラインからタイムラインを作成する必要があります。オブジェクトとタイムラインにある「＋」ボタンをクリックすると、新しくタイムラインを追加することができます。

タイムラインは複数作成することができ、それらを同時に開始することが可能です。例えば、今回のサンプルでは地球が自転するタイムラインアニメーションと地球が公転するタイムラインアニメーションは別々に作成します。この2つを同時に開始することで、地球が自転しながら公転するアニメーションを実現しています。

ZAM3Dから取り込んだ地球には、標準で3つのライトがついています。今回は、地球に対して太陽から太陽光が地球に当たっているようにライトを設定してみましょう。まず、ZAM3Dで追加されたライトを削除します。次に、「ZAM3DViewport3D＞modelVisual3D＞Scene」のその他プロパティのChildren（コレクション）を編集します【図2】。

その上で、すべてのライトを削除ボタン（×マークのボタン）で削除します。その後、 「別のアイテムを追加」ボタン を押しPointLightを追加します【図3】。

地球が右側から照らされるように、今回は変換プロパティの並行移動でxを「3」に設定します。すると、地球の右側に光源が配置され、地球に陰影が生まれます。

地球のアニメーションを作る前に、地球が動いていることをわかりやすく表現するために、地球の軌道の中心に太陽を追加してみましょう。実際の縮尺で地球を再現してしまうと、地球を太陽の100分の１の大きさにしないといけないので、今回は地球を太陽とほぼ同じ大きさにします。もちろん、ここでは地球と太陽以外の惑星は省略します。

それでは、「ZAM3DViewport3D＞modelVisual3D」を選択し、レイヤーが黄色枠になったら右クリックでオブジェクトをコピーしてください。次に「ZAM3DViewport3D」を選択し、レイヤーが黄色枠になったら先ほどのコピーを貼り付けてください。そうすると、地球のコピーが「ZAM3DViewport3D」内にもう1つ作成されます。わかりやすく「modelVisual3D_Sun」とでも名前変更しておきましょう【図4】。

この時点では地球をコピーしただけですので、地球のテクスチャが残ってしまい太陽に見えません。テクスチャを削除し、球体を太陽の色に変更しましょう。

「ZAM3DViewport3D＞modelVisual3D_Sun＞Scene＞Sphere01OR10＞ Sphere01OR10GR11」を選択し、素材パネルのMaterialのテクスチャブラシタブをグラデーションブラシタブに変更します。グラデーションのスライドバーを太陽っぽく赤とオレンジに変更し、グラデーションのタイプを放射状グラデーションに変更します【図5】。

また、オブジェクトが大きいので変換プロパティの拡大縮小の値をすべて「0.3」にします。太陽のライトは地球のライトを反射させて使うので、先ほどの要領で「ZAM3DViewport3D_Sun＞modelVisual3D＞Scene1」からPointlightを削除して終了です。

次に、地球の自転アニメーションをタイムラインで作成してみましょう。オブジェクトとタイムラインから新規タイムラインを作成します。タイムライン名は「jiten」とでも名付けておきましょう。

タイムラインが作成できたら、3Dオブジェクトを回転させるためにタイムラインを編集していきます。今回は地球を8秒間で1周させるようなタイムラインを書きます。まず、「ZAM3DViewport3D＞modelVisual3D＞Scene＞Sphere01OR10＞ Sphere01OR10GR11」を選択し2秒後のタイムラインにタイムラインバーを移動させます。このとき、アートボードが「タイムライン　記録オン」になっていることを確認してください。確認したら、変換プロパティの回転を選択し。「y=90」を入力してください【図6】。

これで、2秒後に90度反時計回りに回転するアニメーションが作成できました。つづけて4秒後に「y=180」、6秒後に「y=270」、8秒後に「y=360」を入力してください。これで地球が8秒間で１周するアニメーションが完成です。F5を押してテストしてみましょう。

テストするとわかりますが、このままではアニメーションは1回きりの再生で止まってしまいます。このアニメーションを繰り返し再生しなければなりません。ですので、オブジェクトとタイムラインに戻り、「Sphere01OR10GR11」の「Transform＞Rotation＞Rotation」を右クリックし「繰り返し回数の編集」を選択します。繰り返し編集ウィンドウで「繰り返し回数」を∞ボタンで「Forever」にして、無限に繰り返し再生するように設定します【図7】、【図8】。

次に地球の公転アニメーションを作成します。オブジェクトとタイムラインで新しく「kouten」というタイムラインを作成します。作成したら「ZAM3DViewport3D＞modelVisual3D」を選択します。

「jiten」と同じオブジェクトに対して異なるタイムラインを同時に開始してしまうと、どちらかのタイムラインが無効になります。ですので、「kouten」では「jiten」とは異なるオブジェクトをアニメーションさせます。まず、タイムラインを「kouten」にした状態でオブジェクトの大きさを変更します。変換プロパティの拡大縮小の値をすべて「0.2」にします【図9】。

次に、中心点をオブジェクトの右にずらします。変換プロパティの中心点でxを「3」と入力します【図10】。

中心点が右に移動するので、中心点がウィンドウの中央にくるよう変換プロパティの並行移動で「x=-3」にして、オブジェクトをウィンドウの左端に配置します【図11】。

自転では回転の支点となる中心点をオブジェクトの中心に設定しているため、オブジェクト自体が回転しますが、公転ではこの中心点を右にずらします。自転と公転の各アニメーションで回転の支点を違え、1つのオブジェクト（地球）が自転しながら同時に公転している動きを表現します【図12】。

次に「jiten」と同様にアニメーションを作成していきます。今回は公転ですので自転よりも2倍遅く16秒で1周させます。「Jiten」と同じ要領で地球を反時計回りに公転させます。「kouten」のタイムラインで「ZAM3DViewport3D＞modelVisual3D」を選択し、回転の角度を4秒後に「y=90」、8秒後に「y=180」、12秒後に「y=270」、16秒後に「y=360」と入力してください。入力し終わったら、繰り返し編集ウィンドウで「繰り返し回数」を「Forever」に設定します【図13】。

F5キーを押してプロジェクトのテストを行いましょう。ウィンドウサイズは初期サイズ640×480で小さくなっていますので、ウィンドウを最大化して細部まで確認してみてください。

次回は、カメラの移動アニメーションをマウスで操作できるような、マウスイベントを作成します。