Getting started with WPF 3D

Jcrash29 edited this page Feb 22, 2018 · 16 revisions

Helix Toolkit builds on the 3-D functionality in Windows Presentation Foundation (WPF). While the functionality of 3-D in WPF may fall short of that needed for complex 3-D gaming engines it does have enough merit to stand on its own. This toolkit provides a higher level API for working with 3-D in WPF, via a collection of controls and helper classes.

If you are not familiar with the base functionality of 3-D in WPF, the MSDN docs may be helpful background information.

Using the Package Manager Console To install HelixToolkit.Wpf, run the following command in the Package Manager Console.

PM> Install-Package HelixToolkit.Wpf

Using the Nuget UI

To find HelixToolkit in NuGet, follow these steps:
1. Open your project in Visual Studio.
2. Right click on the References folder and select “Manage Nuget Packages...” from the context menu.
Note: Should that menu item be missing, you need to install the NuGet package manager. Go to http://nuget.org.
3. In the "Manage Nuget Packages" dialog, select "Online" on the right.
4. In the search field, enter “HelixToolkit”.
5. Select the HelixToolkit.Wpf package and press the Install button.

Creating a 3D view

The HelixViewport3D is the object that will contain our 3D scene. This is a WPF control allowing for imperative or declarative coding. Lets create a HelixViewport3D object using C#.

private void Create3DViewPort() { var hVp3D = new HelixViewport3D(); }

Using XAML object creation would look like this.

<Window x:Class="GettingStartedDemo.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:h="http://helix-toolkit.org/wpf"
        Title="Getting Started Demo" Height="480" Width="640">

     <h:HelixViewport3D >
     </h:HelixViewport3D>

 </Window>

This gives us a 3D space in which to setup our scene and work with 3D objects.

Adding lights

Next we need to add lighting to the HelixViewport3D. Without lighting, objects in the view-port scene will not be visible.

In C#...

private void Create3DViewPort()
{
    var hVp3D = new HelixViewport3D();
    var lights = new DefaultLights();
    hVp3D.Children.Add(lights);
} 

In XAML...

<h:HelixViewport3D >
     <h:DefaultLights/>
 </h:HelixViewport3D>

Adding 3D content

Now that we have light and a view-port we can add a 3D object. Helix Toolkit comes with several 3D objects such as a box, tube, helix, pipe, and of course a teapot. Let's add the teapot to the view-port.

In C#...

 private void Create3DViewPort()
 {
     var hVp3D = new HelixViewport3D();
     var lights = new DefaultLights();
     var teaPot = new Teapot();
     hVp3D.Children.Add(lights);
     hVp3D.Children.Add(teaPot);
  } 

In XAML...

 <h:HelixViewport3D >
      <h:DefaultLights/>
      <h:Teapot/>
 </h:HelixViewport3D>

Complete Getting Started Example Code

In C#....

public partial class MainWindow
{
    public MainWindow()
    {
        this.InitializeComponent();
        Create3DViewPort();
    }

    private void Create3DViewPort()
    {
        var hVp3D = new HelixViewport3D();
        var lights = new DefaultLights();
        var teaPot = new Teapot();
        hVp3D.Children.Add(lights);
        hVp3D.Children.Add(teaPot);
        this.AddChild(hVp3D);
    }
}

In XAML...

<Window x:Class="GettingStartedDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:h="http://helix-toolkit.org/wpf"
        Title="Getting Started Demo" Height="480" Width="640">

    <h:HelixViewport3D >
        <h:DefaultLights/>
        <h:Teapot/>
    </h:HelixViewport3D>

</Window>

Teapot in 3D Viewport

Diving Deeper

The above example just scratches the surface of working with the Helix Toolkit. For a complete set of code examples, download the source code and open the ExampleBrowser project.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.