4．WPFコンテンツをつくってみよう 3Dアプリケーション編
3DデータをXAMLデータで書き出すツール「ZAM3D」と「Microsoft Expression Blend Beta1」を使って、表面に画像を貼りつけた立方体が回転する3Dアプリケーションをつくってみよう。
まずは「ZAM 3D」と「MicrosoftExpr ession Blend Beta1」をそれぞれインストールする。インストールが完了したらZAM 3Dを起動し、メニューの下に並んでいる立方体型のアイコン「CreateBox」を1回押す。すると立方体型のオブジェクトができる【14】。
【14】ZAM 3Dのメニューの下にある「CreateBox」のアイコンを押すと立方体ができる
Editメニュー→“Copy XAML”を実行すると、この立方体のXAMLデータがクリップボードにコピーされるので、Blendを起動して前項の「testXaml1. sln」を開いてXAMLビューに切り替える。
そして＜Grid＞タグの中にある＜Button Width="86" Height="25" Content="Button" Click="Button_ ClickPa ge1"/＞部分に上書きでペーストすると、ZAM 3Dで作成した立方体をBlendに取り込める。そして、ペーストしたソースから「Viewbox x:Name ="ZAM3DViewbox"」タグの属性である「ClipToBoun ds」の値を、「true」から「True」に変更し、「c:Ignor able」を削除する。
続いて「Viewport3Dx:Name ="ZAM3DViewport3D"」タグの属性である「Clip ToBounds」の値を、「true」から「True」に変更しておく【15】。これを忘れるとあとの工程でVisual Studioを使用する際に、プログラム上に警告が発生してしまうので注意。
| ＜Viewbox x:Name="ZAM3DViewbox" ClipToBounds= "True" xmlns="http://schemas.microsoft.com/winfx/2006/ xaml/presentation" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/ expression/interactivedesigner/2006" xmlns:c= "http://schemas.openxmlformats.org/markup-compatibility/ 2006" c:Ignorable="d"＞ |
＜Viewport3D x:Name="ZAM3DViewport3D" ClipToBounds ="True" Width="400" Height="300"＞ |
【15】ZAM 3Dで作成した立方体のXAMLデータの一部。2カ所ある「true」を「True」に変更し、「c:Ignorable」を削除する
次にBlendを使って立方体に画像を貼り付けていこう。プロジェクトメニュー→“既存のアイテムの追加”を選択し、画像（SKY.JPG）を取り込む【16】。
【16】「SKY.JPG」をBlendに取り込む
3Dモデルに2D画像の貼り付け位置を指定するため、デザインビューに切り換えてリソースパネルを開くと、「Page1.xaml」のコードのZAM 3D View Port 3Dの中身がツリー型で要素ごとに表示されるので「Box01OR9GR10」を選び、その上で右クリック→“XAMLの表示”を選択【17】。XAMLビューを開くと「Box01OR9GR10」の該当部分が表示されるので、【17】のようにコードを修正する。
| ＜MeshGeometry3D x:Key="Box01OR9GR10" |
| TriangleIndices="0,1,2,2,3,0,4,5,6,6,7,4,8,9,10,10,11,8,12, 13,14,14,15,12,16,17,18,18,19,16,20,21,22,22,23,20" |
| Normals="0,0,-1 0,0,-1 0,0,-1 0,0,-1 0,0,1 0,0,1 0,0,1 0,0, 1 0,-1,0 0,-1,0 0,-1,0 0,-1,0 1,0,0 1,0,0 1,0,0 1,0,0 0,1,0 0, 1,0 0,1,0 0,1,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0" |
| "Positions="-0.5,-0.5,-0.5 -0.5,0.5,-0.5 0.5,0.5,-0.5 0.5,-0.5, -0.5 -0.5,-0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5, -0.5,-0.5 0.5,-0.5,-0.5 0.5,-0.5,0.5 -0.5,-0.5,0.5 0.5,-0.5, -0.5 0.5,0.5,-0.5 0.5,0.5,0.5 0.5,-0.5,0.5 0.5,0.5,-0.5 -0.5, 0.5,-0.5 -0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,-0.5 -0.5,-0.5, -0.5 -0.5,-0.5,0.5 -0.5,0.5,0.5" |
| TextureCoordinates="1,0,1,1,0,1,0,0,0,0,1,0,1,1,0,1,0,0,1, 0,1,1,0,1,1,0,1,1,0,1,0,0,1,1,0,1,0,0,1,0,0,1,0,0,1,0,1,1" |
| /＞ |
【17】リソースパネルから「Box01OR9GR10」を選び、該当するコード部分を表示、＜TriangleIndices＞タグ内の半角スペースをすべてカンマに変更し（上の赤枠部分）、＜TextureCoodinates＞を設定する（下の赤枠部分）
同じようにして今度は「ER_Defau lt_MaterialMR1」を表示し【18】、【18】のように「＜Solid ColorBrush Color="#7F7F92" Opacity="1.000000"/＞」を「＜ImageBrush ImageSource="SKY.JPG" View portUnits="Absolute" /＞」と書き替えると、デザインビューで立方体に画像が貼りついた状態を確認できる【19】。
| ＜MaterialGroup x:Key=“ER___Default_MaterialMR1”＞ ＜DiffuseMaterial＞ ＜DiffuseMaterial.Brush＞ ＜ImageBrush ImageSource="SKY.JPG"/＞ ＜/DiffuseMaterial.Brush＞ ＜/DiffuseMaterial＞ （省略） ＜/MaterialGroup＞ |
【18】【17】と同様に「ER_Default_MaterialMR1」の部分を表示し、＜ImageBrush＞に書き換える
【19】取り込んだ画像が立方体に貼り付いている
オブジェクトとタイムイラインパネルのツリーから「Box01OR9」を選択し、右クリック→“XAMLの表示”を選ぶと該当するコードが表示される。その「＜Model3DGroup x:Name ="Box01O R9" Transform="{DynamicResource Box01OR9TR8}"＞」の中の「Transform="{Dynamic Resource Box01OR 9TR8}」を削除してから、代わりに＜Model3D Group＞タグの中に【20】のように記述して、X軸とY軸の回転軸を定義する。
| ＜Model3DGroup x:Name="Box01OR9" Transform="{DynamicResource Box010R9TR8}"＞ ＜!-- Box01 (XAML Path = (Viewport3D.Children)[0].(ModelVisual3D. Content).(Model3DGroup.Children)[3]) --＞ |
| ＜GeometryModel3D x:Name="Box01OR9GR10" （省略） ER___Default_MaterialMR1}"/＞ |
| ＜!-- Cubeを回転させるための変換指定 --＞ ＜Model3DGroup.Transform＞ ＜Transform3DGroup＞ ＜TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/> ＜ScaleTransform3D ScaleX="1" ScaleY="1" ScaleZ="1"/> ＜!-- Cubeを回転させる軸の指定（X軸）--＞ ＜RotateTransform3D＞ ＜RotateTransform3D.Rotation＞ ＜AxisAngleRotation3D x:Name="RotateX" Angle="0" Axis="1,0,0"/＞ ＜/RotateTransform3D.Rotation＞ ＜/RotateTransform3D＞ ＜!-- Cubeを回転させる軸の指定（Y軸）--＞ ＜RotateTransform3D＞ ＜RotateTransform3D.Rotation＞ ＜AxisAngleRotation3D x:Name="RotateY" Angle="0" Axis="0,1,0"/> ＜/RotateTransform3D.Rotation＞ ＜/RotateTransform3D＞ ＜/Transform3DGroup＞ ＜/Model3DGroup.Transform＞ |
| ＜/ModelVisual3DGroup＞ |
【20】オブジェクトとタイムラインパネルのから「Box01OR9」を選択、右クリックで「ZAMLの表示」を選ぶ。「Transform=" {DynamicResource Box01OR9TR8}」を削除してから、＜Model3D Group＞タグの中に赤枠部分を記述する
さらにそれぞれの軸に対して、0～360°繰り返し回転するアニメーションを設定する。これは＜Grid＞タグの前に【21】をそのまま記述すればよい。
| ＜!--Cubeを回転させるアニメーションの設定--＞ ＜Page.Triggers＞ ＜EventTrigger RoutedEvent="FrameworkElement.Loaded"＞ ＜EventTrigger.Actions＞ ＜BeginStoryboard＞ ＜Storyboard＞ ＜DoubleAnimation Storyboard.TargetName="RotateX" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" /＞ ＜DoubleAnimation Storyboard.TargetName="RotateY" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" /＞ ＜/Storyboard＞ ＜/BeginStoryboard＞ ＜/EventTrigger.Actions＞ ＜/EventTrigger＞ ＜/Page.Triggers＞ |
【21】＜Grid＞タグの前にこれを記述する。回転アニメーションが実行するように設定する
ここまでできたら、再度Visual Studioでプロジェクトを開き、ビルドメニュー→“ソリューションのリビルド”を実行して再ビルドする。そして、前節の【12】と同様の手順でPublishを行う。作成した配信用のXBAPファイルをInternet Explorerで実行し、アニメーションを付加したオブジェクトの確認ができれば完成だ【22】。
【22】Internet Explorerの中でオブジェクトが回転する
