Viewport2DVisual3D

A little while ago I wrote an article for www.codeproject.com about using 3D meshes in WPF that were hosting 2d controls, such as Grids, Lists, and User controls. The article which can be found right here if you are interested.

The problem with the way that I did things in that article was that I used some fairly complicated DataTemplates within the actual 3d model XAML. These DataTemplates also had to include ContentControls that would also look at resources for their own content.

It did work, but now that .NET 3.5 has been released, there is a much better way. This better way comes in the form of a new class, called Viewport2DVisual3D. What this new class allows you to do is to create a 3d model, but it also allows you to host a 2d UIElement on a 3d Material, and the 2d UIElement is fully interactive. Its probably best if I show you and example so, ill do that now.

<Window x:Class=”Viewport2DVisual3D.Window1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

Title=”Viewport2DVisual3D” Height=”300″ Width=”300″>

<DockPanel Background=”White”>

<DockPanel.Resources>

<!– UI Mesh –>

<MeshGeometry3D x:Key=”uiMesh” TriangleIndices=”0,1,2 3,4,5″ Positions=”-1,-1,2 1,-1,2 1,1,2 1,1,2 -1,1,2 -1,-1,2 “

TextureCoordinates=”0,1 1,1 1,0 1,0, 0,0 0,1″/>

<!– UI Mesh Rotation –>

<Storyboard x:Key=”uiSpin” RepeatBehavior=”Forever”>

<DoubleAnimation BeginTime=”00:00:00″ Duration=”00:00:15″ Storyboard.TargetName=”uiRotate”Storyboard.TargetProperty=”Angle” From=”0″ To=”360″/>

</Storyboard>

</DockPanel.Resources>

<DockPanel.Triggers>

<EventTrigger RoutedEvent=”FrameworkElement.Loaded”>

<BeginStoryboard Storyboard=”{StaticResource uiSpin}”/>

</EventTrigger>

</DockPanel.Triggers>

<Viewport3D>

<!– Camera –>

<Viewport3D.Camera>

<PerspectiveCamera Position=”0, 0, 4″/>

</Viewport3D.Camera>

<!– Button on 3D –>

<Viewport2DVisual3D >

<!– Give the plane a slight rotation –>

<Viewport2DVisual3D.Transform>

<RotateTransform3D>

<RotateTransform3D.Rotation>

<AxisAngleRotation3D x:Name=”uiRotate” Angle=”40″ Axis=”0, 1, 0″ />

</RotateTransform3D.Rotation>

</RotateTransform3D>

</Viewport2DVisual3D.Transform>

<!– The Geometry, Material, and Visual for the Viewport2DVisual3D –>

<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>

<!– Setup the Material”You can use any material you want. For the material

that you want to have the Visual be placed on, you simply

need to set the Viewport2DVisual3D.IsVisualHostMaterial

attached property to true.

–>

<Viewport2DVisual3D.Material>

<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial=”True” Brush=”White”/>

</Viewport2DVisual3D.Material>

<Viewport2DVisual3D.Visual>

<!– The 2D UI–>

<StackPanel Orientation=”Vertical”>

<Button Background=”Yellow” Click=”Button_Click”>Button1</Button>

<Button Background=”Aqua” Click=”Button_Click”>Button2</Button>

<Button Background=”Beige” Click=”Button_Click”>Button3</Button>

<Button Background=”Coral” Click=”Button_Click”>Button4</Button>

</StackPanel>

</Viewport2DVisual3D.Visual>

</Viewport2DVisual3D>

<!– Lights –>

<ModelVisual3D>

<ModelVisual3D.Content>

<DirectionalLight Color=”#FFFFFFFF” Direction=”0,0,-1″/>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D>

</DockPanel></Window>

This small example is a simple 3d mesh, with a StackPanel  filled with 4 * Button. When one of the buttons is clicked a MessageBox is shown with the content of the clickedButon as the Message.


viewport2dvisual3d.png

Here is a small demo project if you would like to try this out for yourself viewport2dvisual3d.zip

Advertisements

8 thoughts on “Viewport2DVisual3D

  1. Marlon Grech says:

    cool…. thanks for this

  2. sacha says:

    Marlon you are most welcome.

    I think you may see a very very nice 3D one at codeproject soon (but not by me). Ill say no more but one of our innner sanctum may do something.

  3. Bydia says:

    Very nice, I will definitly use this way. How do I implement trackball features? I would like to rotate with right mouse button down and zoom with wheel mouse and pan with left mouse button down. Like the cube app at netfx3.com

  4. sacha says:

    Bydia

    You can use the 3DTools Dll I mentioned in this article, that has a Trackball class in it, that can be used to wrap a Model3D, so its just the ticket.

    If is doesnt work with the viewport2dvisual3d object, then there is an alternative for having interactive 2d elements on 3d meshes that definatley works.

    I know this for sure, as I’ve used it on http://www.codeproject.com/KB/WPF/3DExplorer.aspx

    article.

    Good luck

  5. […] have started looking at 3D again in WPF. I have in the past blogged about the Viewport2DVisual3D 3D WPF element. Well for what I am working on I didn’t need to be able to put 2D interactive […]

  6. ramneek says:

    Hi sacha,
    When i replace the Button controls with WebBrowser controls, the webbrowser control are not visible.
    Why? am i missing anything?

    See this:-

    Regards,
    Ramneek

  7. sacha says:

    Ramneek

    sadly the .NET 3.5 SP1 introduced WebBrowser control is not a true WPF control, and is really a HWnd based control, so no 3d/transform support at all.

    It sucks, but there you go

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: