mikeo_410


XAMLで3D

  Silverlight4では、Viewport3D などがないので、WPFと同様の3Dを使うには、WPFアプリケーションを作成するか、Loose XAMLを使うことになります。

  このモデルの基本的な要素は、形状を示すGeometryデータと、材質、カメラ、ライトです。
  このうち、Geometryデータとカメラの位置関係が表示されるイメージの形状を決めます。

XAMLの記述

  一般的なXAML中で3DのGeometryデータを表示するには、Viewport3Dを使います。

  1. <Window
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="Window1" Height="300" Width="300">
  5. <Grid>
  6. <Viewport3D>
  7. </Viewport3D>
  8. </Grid>
  9. </Window>

Viewport3D に設定する内容は、以下の通りです。

  1. カメラの位置、方向
  2. 照明の種類と方向
  3. 図形の形状
  4. 描画ブラシ
  1. <Viewport3D>
  2.    <Viewport3D.Camera>
  3.        カメラの位置、方向
  4.    </Viewport3D.Camera>
  5.    <ModelVisual3D>
  6.       <ModelVisual3D.Content>
  7.          照明の種類と方向
  8.       </ModelVisual3D.Content>
  9.    </ModelVisual3D>
  10.    <ModelVisual3D>
  11.       <ModelVisual3D.Content>
  12.          <GeometryModel3D>
  13.             <GeometryModel3D.Geometry>
  14.                 図形の形状
  15.             </GeometryModel3D.Geometry>
  16.             <GeometryModel3D.Material>
  17.                描画ブラシ
  18.             </GeometryModel3D.Material>
  19.          </GeometryModel3D>
  20.       </ModelVisual3D.Content>
  21.     </ModelVisual3D>
  22. </Viewport3D>

座標

  普通の座標系であることを確認しておきます。
  上、右の方向が増加する方向になるようにX-Y平面を見ると、奥行がZ軸で、手前方向が増加方向になっているとして作図してみます。

  左図のように、3つの三角形(赤、青、緑)を、XZ平面(赤)とXY(青、緑)平面に描きます。

  カメラの設定は、以下のようにします。

  1. <Viewport3D.Camera>
  2.     <!--カメラ-->
  3.     <PerspectiveCamera x:Name="camera"
  4.                        Position="2,2,2" 
  5.                        LookDirection="-1,-1,-1" 
  6.                        FieldOfView="60">
  7.     </PerspectiveCamera>
  8. </Viewport3D.Camera>

  カメラには、位置、方向、視野角の設定があります。位置を変えれば、同じ被写体を捉えるには、方向も変えることになります。
  ライトは、方向の心配がないように以下のようにしました。

  1. <ModelVisual3D>
  2. <ModelVisual3D.Content>
  3. <!--ライト-->
  4. <AmbientLight/>
  5. </ModelVisual3D.Content>
  6. </ModelVisual3D>

  下の枠は、HTML中の iframe で、XAMLをホストしています。ブラウザやインターネットオプションによっては表示されないと思います。
  表示されているなら、ラジオボタンで、カメラの位置を変えて見てください。

  XAML記述の全体は、以下のようです。

  1. <Page ShowsNavigationUI="False"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  4.     <Grid Background="OldLace">
  5.         <Grid.ColumnDefinitions>
  6.             <ColumnDefinition Width="240"/>
  7.             <ColumnDefinition Width="200"/>
  8.         </Grid.ColumnDefinitions>
  9.         <Viewport3D Grid.Column="0" Width="200" Height="200" >
  10.             <Viewport3D.Camera>
  11.                 <!--カメラ-->
  12.                 <PerspectiveCamera x:Name="camera"
  13.                                    Position="2,2,2" 
  14.                                    LookDirection="-1,-1,-1" 
  15.                                    FieldOfView="60">
  16.                 </PerspectiveCamera>
  17.             </Viewport3D.Camera>
  18.             <ModelVisual3D>
  19.                 <ModelVisual3D.Content>
  20.                     <!--ライト-->
  21.                     <AmbientLight/>
  22.                 </ModelVisual3D.Content>
  23.             </ModelVisual3D>
  24.             <ModelVisual3D>
  25.                 <ModelVisual3D.Content>
  26.                     <Model3DGroup>
  27.                         <!--ジオメトリ X-Z平面 -->
  28.                         <GeometryModel3D>
  29.                             <GeometryModel3D.Geometry>
  30.                                 <MeshGeometry3D Positions="0,0,0 0.2,0,-1 -0.2,0,-1"/>
  31.                             </GeometryModel3D.Geometry>
  32.                             <GeometryModel3D.Material>
  33.                                 <!--赤-->
  34.                                 <DiffuseMaterial Brush="Red"/>
  35.                             </GeometryModel3D.Material>
  36.                         </GeometryModel3D>
  37.                         <!--ジオメトリ Y-Z平面 -->
  38.                         <GeometryModel3D>
  39.                             <GeometryModel3D.Geometry>
  40.                                 <MeshGeometry3D Positions="0,0,0 -0.2,-1,0 0.2,-1,0"/>
  41.                             </GeometryModel3D.Geometry>
  42.                             <GeometryModel3D.Material>
  43.                                 <!--青-->
  44.                                 <DiffuseMaterial Brush="Blue"/>
  45.                             </GeometryModel3D.Material>
  46.                         </GeometryModel3D>
  47.                         <!--ジオメトリ X-Y平面 -->
  48.                         <GeometryModel3D>
  49.                             <GeometryModel3D.Geometry>
  50.                                 <MeshGeometry3D Positions="0,0,0 -1,0.2,0 -1,-0.2,0"/>
  51.                             </GeometryModel3D.Geometry>
  52.                             <GeometryModel3D.Material>
  53.                                 <!--緑-->
  54.                                 <DiffuseMaterial Brush="Green"/>
  55.                             </GeometryModel3D.Material>
  56.                         </GeometryModel3D>
  57.                     </Model3DGroup>
  58.                 </ModelVisual3D.Content>
  59.             </ModelVisual3D>
  60.         </Viewport3D>
  61.         <StackPanel Grid.Column="1">
  62.             <StackPanel Margin="4,4,4,4">
  63.                 <TextBlock Text="カメラ位置 :"/>
  64.                 <RadioButton Content="(2,2,2)" IsChecked="True">
  65.                     <RadioButton.Triggers>
  66.                         <EventTrigger RoutedEvent="RadioButton.Checked">
  67.                             <BeginStoryboard>
  68.                                 <Storyboard>
  69.                                     <Point3DAnimation Storyboard.TargetName="camera"
  70.                                                      Storyboard.TargetProperty="Position"
  71.                                                      To="2,2,2" Duration="0:0:0"/>
  72.                                     <Vector3DAnimation Storyboard.TargetName="camera"
  73.                                                      Storyboard.TargetProperty="LookDirection"
  74.                                                      To="-1,-1,-1" Duration="0:0:0"/>
  75.                                 </Storyboard>
  76.                             </BeginStoryboard>
  77.                         </EventTrigger>
  78.                     </RadioButton.Triggers>
  79.                 </RadioButton>
  80.                 <RadioButton Content="(0,2,2)">
  81.                     <RadioButton.Triggers>
  82.                         <EventTrigger RoutedEvent="RadioButton.Checked">
  83.                             <BeginStoryboard>
  84.                                 <Storyboard>
  85.                                     <Point3DAnimation Storyboard.TargetName="camera"
  86.                                                      Storyboard.TargetProperty="Position"
  87.                                                      To="0,2,2" Duration="0:0:0"/>
  88.                                     <Vector3DAnimation Storyboard.TargetName="camera"
  89.                                                      Storyboard.TargetProperty="LookDirection"
  90.                                                      To="0,-1,-1" Duration="0:0:0"/>
  91.                                 </Storyboard>
  92.                             </BeginStoryboard>
  93.                         </EventTrigger>
  94.                     </RadioButton.Triggers>
  95.                 </RadioButton>
  96.                 <RadioButton Content="(-2,2,2)">
  97.                     <RadioButton.Triggers>
  98.                         <EventTrigger RoutedEvent="RadioButton.Checked">
  99.                             <BeginStoryboard>
  100.                                 <Storyboard>
  101.                                     <Point3DAnimation Storyboard.TargetName="camera"
  102.                                                      Storyboard.TargetProperty="Position"
  103.                                                      To="-2,2,2" Duration="0:0:0"/>
  104.                                     <Vector3DAnimation Storyboard.TargetName="camera"
  105.                                                      Storyboard.TargetProperty="LookDirection"
  106.                                                      To="1,-1,-1" Duration="0:0:0"/>
  107.                                 </Storyboard>
  108.                             </BeginStoryboard>
  109.                         </EventTrigger>
  110.                     </RadioButton.Triggers>
  111.                 </RadioButton>
  112.                 <RadioButton Content="(0,2,0)">
  113.                     <RadioButton.Triggers>
  114.                         <EventTrigger RoutedEvent="RadioButton.Checked">
  115.                             <BeginStoryboard>
  116.                                 <Storyboard>
  117.                                     <Point3DAnimation Storyboard.TargetName="camera"
  118.                                                      Storyboard.TargetProperty="Position"
  119.                                                      To="0,2,0" Duration="0:0:0"/>
  120.                                     <Vector3DAnimation Storyboard.TargetName="camera"
  121.                                                      Storyboard.TargetProperty="LookDirection"
  122.                                                      To="0,-1,-0.001" Duration="0:0:0"/>
  123.                                 </Storyboard>
  124.                             </BeginStoryboard>
  125.                         </EventTrigger>
  126.                     </RadioButton.Triggers>
  127.                 </RadioButton>
  128.                 <RadioButton Content="(0,0,2)">
  129.                     <RadioButton.Triggers>
  130.                         <EventTrigger RoutedEvent="RadioButton.Checked">
  131.                             <BeginStoryboard>
  132.                                 <Storyboard>
  133.                                     <Point3DAnimation Storyboard.TargetName="camera"
  134.                                                      Storyboard.TargetProperty="Position"
  135.                                                      To="0,0,2" Duration="0:0:0"/>
  136.                                     <Vector3DAnimation Storyboard.TargetName="camera"
  137.                                                      Storyboard.TargetProperty="LookDirection"
  138.                                                      To="0,0,-1" Duration="0:0:0"/>
  139.                                 </Storyboard>
  140.                             </BeginStoryboard>
  141.                         </EventTrigger>
  142.                     </RadioButton.Triggers>
  143.                 </RadioButton>
  144.             </StackPanel>
  145.         </StackPanel>
  146.     </Grid>
  147. </Page>

  ※カメラをY軸上にする場合、LookDirection を 0,-1,0 とすると何も表示されませんでした。
      0.-1,-0.001 のように、わずかにずらすとOKでした。


mikeo_410@hotmail.com