Helix 3D: Getting Started

back to Helix 3D

General Setup

Before you start coding, make sure you have a new WPF window with a grid in it. Although I normally prefer to use canvas (due to the freedom it adds), I found that it does not support the view port very well. Make sure that the grid in your window is named "Container", the rest of the tutorial will run based on this assumption.

Also keep in mind that everything I will be showing you here has a XAML counterpart. I choose to create these in code just so I have more freedom to modify them if I need to.

Finally, make sure you have the following references in your main program:

using HelixToolkit;
using HelixToolkit.Wpf;

You will also find that this library makes extensive use of the Media 3D classes. For that reason, I also recommend referencing to the Media 3D assembly:

using System.Windows.Media.Media3D;

Note!


Keep in mind that whenever I use structures such as Point3D or Vector3D, they come from this Media 3D assembly. Also, don't confuse it with the XNA assemblies, which would have classes such as Vector3 (like the Proximity Toolkit does). Although they are different classes, it is possible to convert from one to the other, and each one will provide different capabilities.

back to top

Setting up for Visuals

This sub-section will cover the basics of what you need in order for things to show up on screen.

Creating the Viewport

First things first! In order to draw three dimensional visuals, they have to be inside of a container that can handle 3D objects. That's why we use a helix view port. Make sure this is added to the main container (our grid).

HelixViewport3D viewport = new HelixViewport3D();
this.Container.Children.Add(viewport);
back to top

Adding a Camera

The next step is to setup a camera. For those unfamiliar with computer graphics, a camera has the following properties:

  • Position: the point at which the camera is located.
  • Look Direction: the vector in which direction you want to face. If you want to face a particular object, you can always subtract the location of that object minus the location of the camera.
  • Up Direction: the vector that tells the camera which way is up. If this didn't exist, your camera would spin uncontrollably! Try using normalized (unit) vectors for this!

The next few lines will help you create a very simple camera view -

viewport.DefaultCamera = new PerspectiveCamera();
viewport.DefaultCamera.Position = new Point3D(100, 100, 100);
viewport.DefaultCamera.LookDirection = new Vector3D(-100, -100, -100);
viewport.DefaultCamera.UpDirection = new Vector3D(0, 0, 1);
back to top

Setting the Lighting

The final step before we can add visuals is to setup lighting. If we fail to setup the lighting, all of our objects will be black because they won't have any light!

The toolkit currently supports four types of light: DefaultLights, SunLight and ThreePointLight. I personally like the first two.

We can now create a light object and add it to our viewport

DefaultLights light = new DefaultLights();
viewport.Children.Add(light);
back to top

Adding a 3D Grid

Sometimes it's hard to see 3D positioning in 2D space, so you can also add a 3D grid

viewport.Children.Add(new GridLinesVisual3D())

Now we can finally move on to adding visuals!

back to top

Adding Visuals

Now that you have a view port comes the best part, creating 3D visuals! Let's start by making a simple sphere.

SphereVisual3D sphere = new SphereVisual3D();
sphere.Radius = 5;
sphere.Center = new Point3D(5, 0, 0);
sphere.Fill = Brushes.Red;
viewport.Children.Add(sphere);

As you can see, the setup format is the same as simple 2D WPF Shapes! You create the object, define the location and basic properties, give it a fill and then add it to the viewport!

Tip!

Normally people use SolidColorBrush to fill the colors of objects. Another nice way is to use the default brushes class. Here is a link to the list of colors.

Helix 3D has a big collection of basic objects: arrow, box, cube, rectangle, lines, points, grid lines, pie slice, sphere, truncated cone, tube, pipe, coordinate system, light, panorama cube, terrain, text, billboard, text billboard, cutting planes and sorting visual 3d.

back to top