XAMLで3D
Silverlight4では、Viewport3D などがないので、WPFと同様の3Dを使うには、WPFアプリケーションを作成するか、Loose XAMLを使うことになります。
このモデルの基本的な要素は、形状を示すGeometryデータと、材質、カメラ、ライトです。
このうち、Geometryデータとカメラの位置関係が表示されるイメージの形状を決めます。
XAMLの記述
一般的なXAML中で3DのGeometryデータを表示するには、Viewport3Dを使います。
- <Window
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="Window1" Height="300" Width="300">
- <Grid>
- <Viewport3D>
- :
- </Viewport3D>
- </Grid>
- </Window>
Viewport3D に設定する内容は、以下の通りです。
- カメラの位置、方向
- 照明の種類と方向
- 図形の形状
- 描画ブラシ
- <Viewport3D>
- <Viewport3D.Camera>
- カメラの位置、方向
- </Viewport3D.Camera>
- <ModelVisual3D>
- <ModelVisual3D.Content>
- 照明の種類と方向
- </ModelVisual3D.Content>
- </ModelVisual3D>
- <ModelVisual3D>
- <ModelVisual3D.Content>
- <GeometryModel3D>
- <GeometryModel3D.Geometry>
- 図形の形状
- </GeometryModel3D.Geometry>
- <GeometryModel3D.Material>
- 描画ブラシ
- </GeometryModel3D.Material>
- </GeometryModel3D>
- </ModelVisual3D.Content>
- </ModelVisual3D>
- </Viewport3D>
座標
普通の座標系であることを確認しておきます。
上、右の方向が増加する方向になるようにX-Y平面を見ると、奥行がZ軸で、手前方向が増加方向になっているとして作図してみます。
左図のように、3つの三角形(赤、青、緑)を、XZ平面(赤)とXY(青、緑)平面に描きます。
カメラの設定は、以下のようにします。
- <Viewport3D.Camera>
- <!--カメラ-->
- <PerspectiveCamera x:Name="camera"
- Position="2,2,2"
- LookDirection="-1,-1,-1"
- FieldOfView="60">
- </PerspectiveCamera>
- </Viewport3D.Camera>
カメラには、位置、方向、視野角の設定があります。位置を変えれば、同じ被写体を捉えるには、方向も変えることになります。
ライトは、方向の心配がないように以下のようにしました。
- <ModelVisual3D>
- <ModelVisual3D.Content>
- <!--ライト-->
- <AmbientLight/>
- </ModelVisual3D.Content>
- </ModelVisual3D>
下の枠は、HTML中の iframe で、XAMLをホストしています。ブラウザやインターネットオプションによっては表示されないと思います。
表示されているなら、ラジオボタンで、カメラの位置を変えて見てください。
XAML記述の全体は、以下のようです。
- <Page ShowsNavigationUI="False"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
- <Grid Background="OldLace">
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="240"/>
- <ColumnDefinition Width="200"/>
- </Grid.ColumnDefinitions>
- <Viewport3D Grid.Column="0" Width="200" Height="200" >
- <Viewport3D.Camera>
- <!--カメラ-->
- <PerspectiveCamera x:Name="camera"
- Position="2,2,2"
- LookDirection="-1,-1,-1"
- FieldOfView="60">
- </PerspectiveCamera>
- </Viewport3D.Camera>
- <ModelVisual3D>
- <ModelVisual3D.Content>
- <!--ライト-->
- <AmbientLight/>
- </ModelVisual3D.Content>
- </ModelVisual3D>
- <ModelVisual3D>
- <ModelVisual3D.Content>
- <Model3DGroup>
- <!--ジオメトリ X-Z平面 -->
- <GeometryModel3D>
- <GeometryModel3D.Geometry>
- <MeshGeometry3D Positions="0,0,0 0.2,0,-1 -0.2,0,-1"/>
- </GeometryModel3D.Geometry>
- <GeometryModel3D.Material>
- <!--赤-->
- <DiffuseMaterial Brush="Red"/>
- </GeometryModel3D.Material>
- </GeometryModel3D>
- <!--ジオメトリ Y-Z平面 -->
- <GeometryModel3D>
- <GeometryModel3D.Geometry>
- <MeshGeometry3D Positions="0,0,0 -0.2,-1,0 0.2,-1,0"/>
- </GeometryModel3D.Geometry>
- <GeometryModel3D.Material>
- <!--青-->
- <DiffuseMaterial Brush="Blue"/>
- </GeometryModel3D.Material>
- </GeometryModel3D>
- <!--ジオメトリ X-Y平面 -->
- <GeometryModel3D>
- <GeometryModel3D.Geometry>
- <MeshGeometry3D Positions="0,0,0 -1,0.2,0 -1,-0.2,0"/>
- </GeometryModel3D.Geometry>
- <GeometryModel3D.Material>
- <!--緑-->
- <DiffuseMaterial Brush="Green"/>
- </GeometryModel3D.Material>
- </GeometryModel3D>
- </Model3DGroup>
- </ModelVisual3D.Content>
- </ModelVisual3D>
- </Viewport3D>
- <StackPanel Grid.Column="1">
- <StackPanel Margin="4,4,4,4">
- <TextBlock Text="カメラ位置 :"/>
- <RadioButton Content="(2,2,2)" IsChecked="True">
- <RadioButton.Triggers>
- <EventTrigger RoutedEvent="RadioButton.Checked">
- <BeginStoryboard>
- <Storyboard>
- <Point3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="Position"
- To="2,2,2" Duration="0:0:0"/>
- <Vector3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="LookDirection"
- To="-1,-1,-1" Duration="0:0:0"/>
- </Storyboard>
- </BeginStoryboard>
- </EventTrigger>
- </RadioButton.Triggers>
- </RadioButton>
- <RadioButton Content="(0,2,2)">
- <RadioButton.Triggers>
- <EventTrigger RoutedEvent="RadioButton.Checked">
- <BeginStoryboard>
- <Storyboard>
- <Point3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="Position"
- To="0,2,2" Duration="0:0:0"/>
- <Vector3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="LookDirection"
- To="0,-1,-1" Duration="0:0:0"/>
- </Storyboard>
- </BeginStoryboard>
- </EventTrigger>
- </RadioButton.Triggers>
- </RadioButton>
- <RadioButton Content="(-2,2,2)">
- <RadioButton.Triggers>
- <EventTrigger RoutedEvent="RadioButton.Checked">
- <BeginStoryboard>
- <Storyboard>
- <Point3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="Position"
- To="-2,2,2" Duration="0:0:0"/>
- <Vector3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="LookDirection"
- To="1,-1,-1" Duration="0:0:0"/>
- </Storyboard>
- </BeginStoryboard>
- </EventTrigger>
- </RadioButton.Triggers>
- </RadioButton>
- <RadioButton Content="(0,2,0)">
- <RadioButton.Triggers>
- <EventTrigger RoutedEvent="RadioButton.Checked">
- <BeginStoryboard>
- <Storyboard>
- <Point3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="Position"
- To="0,2,0" Duration="0:0:0"/>
- <Vector3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="LookDirection"
- To="0,-1,-0.001" Duration="0:0:0"/>
- </Storyboard>
- </BeginStoryboard>
- </EventTrigger>
- </RadioButton.Triggers>
- </RadioButton>
- <RadioButton Content="(0,0,2)">
- <RadioButton.Triggers>
- <EventTrigger RoutedEvent="RadioButton.Checked">
- <BeginStoryboard>
- <Storyboard>
- <Point3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="Position"
- To="0,0,2" Duration="0:0:0"/>
- <Vector3DAnimation Storyboard.TargetName="camera"
- Storyboard.TargetProperty="LookDirection"
- To="0,0,-1" Duration="0:0:0"/>
- </Storyboard>
- </BeginStoryboard>
- </EventTrigger>
- </RadioButton.Triggers>
- </RadioButton>
- </StackPanel>
- </StackPanel>
- </Grid>
- </Page>
※カメラをY軸上にする場合、LookDirection を 0,-1,0 とすると何も表示されませんでした。
0.-1,-0.001 のように、わずかにずらすとOKでした。
|