이번시간에는 Viewport2DVisual3D를 사용하여 2차원 컨트롤(UIElement)를 3차원 객체에 렌더링 하는 방법에 대해서 알아봅니다. 기본적인 3D와 관련된 내용은 추후 다시 설명 할 예정이니 3D에 대한 자세한 설명은 제외하고 진행 하겠습니다. 아래 동영상은 이번 시간에 만들게 될 결과물입니다. 실제 WPF에서 사용하는 Button을 3차원 공간에 올려놓고 임의로 회전하는 내용을 담고 있습니다.
아래는 구현 부분 코드입니다.
|
<DockPanel LastChildFill="True"> <StackPanel DockPanel.Dock="Bottom"> <StackPanel Orientation="Horizontal"> <TextBlock>Rotate</TextBlock> <Slider Width="230" x:Name="Slider" Minimum="-80" Maximum="80"/> </StackPanel> </StackPanel> <Viewport3D> <Viewport3D.Camera> <PerspectiveCamera Position="0, 0, 4"/> </Viewport3D.Camera> <Viewport2DVisual3D> <Viewport2DVisual3D.Transform> <RotateTransform3D> <RotateTransform3D.Rotation> <AxisAngleRotation3D Angle="{Binding ElementName=Slider, Path=Value}" Axis="0, 1, 0" /> </RotateTransform3D.Rotation> </RotateTransform3D> </Viewport2DVisual3D.Transform> <Viewport2DVisual3D.Geometry> <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/> </Viewport2DVisual3D.Geometry> <Viewport2DVisual3D.Material> <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/> </Viewport2DVisual3D.Material> <Button Click="Button_Click"> <StackPanel> <TextBlock Text="WPF KOREA" TextAlignment="Center" FontSize="10"/> <TextBlock Text="http://whatisthat.co.kr" TextAlignment="Center" FontSize="5" Margin="0,-4,0,0"/> </StackPanel> </Button> </Viewport2DVisual3D> <ModelVisual3D> <ModelVisual3D.Content> <DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D> </DockPanel> |
WPF 3D를 처음 접하시는 분이라면 다소 어려운 부분일 수 있으나 집 접 따라 해보시면 이해하는데 많은 도움이 될 것입니다. 우리가 중요하게 봐야 할 곳은 노란색으로 색칠 되어 있는 부분으로, 지금부터 코드를 살펴보겠습니다.
Viewport2DVisual3D을 사용하기 위해서는 기본적은 3D모델과 마찬가지로 Geometry와 Material을 설정해야 합니다. Geometry와 관련된 부분은 MSDN이나 기타 3D관련 서적을 참고하시기 바랍니다. (추후 포스팅할 예정입니다.) Geometry를 설정했다면 Material을 설정해주어야 합니다. Material은 DiffuseMaterial로 설정하고 Viewport2DVisual3D의IsVisualHostMaterial Property를 True로 설정하여 Material을 대화형으로 설정합니다.
그리고 Viewport2DVisual3D의 Visual에 원하는 2D Element를 등록하면 됩니다. 이곳에 입력된 Visual은 위에서 생성한 DiffuseMaterial과 데이터를 주고받으며 화면에 표시되게 됩니다. Viewport2DVisual3D에서 사용하는 방법은 단순히 VisualBrush만을 복제하여 사용하는 방법이 아니라 실제 컨트롤을 3D Viewport에 렌더링 하는 것과 같으므로 객체의 모든 이벤트 등을 동일 하게 사용하실 수 있습니다.

