Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Inserting 3D Models in Expression Blend

0.00/5 (No votes)
20 Jun 2013 1  
Inserting a 3D object into a WPF project in Expression Blend, with some help from Blender

Introduction

One of the great things about WPF is its 3D support which enables you to incorporate 3D content into your app. In this tutorial I will explain how you can go about adding 3D models into your WPF application in Expression Blend. I will also make use of Blender, the open-source 3D modeling application.

NB: This article assumes that you are familiar with Expression Blend, experience in using Blender is not necessary.

Requirements 

To follow along with this tutorial you require the following,

Expression Blend & 3D 

While it is possible to hand code your WPF 3D models Expression Blend (EB) enables you to more easily create and manipulate 3D objects. In case your 3D design skills are not up-to-par you can search for preexisting 3D models and import them into EB in the form of .obj files. The 3D content can then be inserted into a layout container and EB will create the necessary WPF controls like the Viewport3D, Camera and Lights.

The 3D Model

In this tutorial you're not going to be designing any 3D models. Instead you are going to make use of a preexisting, free, 3D model of a XA-20 Razorback Strike Fighter.

 

You can download the .7z file containing the model files you'll use in this tutorial here. Once you have completed downloading the .7z file extract its contents. In the folder containing the extracted files you should have seven files: a materials (.mtl) file, a objects (.obj) file, and five image files that will be used in the .mtl file.

 

The WPF Project

Start Expression Blend and create a new WPF application project named XA-20 Razorback.

 

Next we shall change the dimensions of the application window so that it can adequately accommodate the 3D model so set the width and height of the Window object to 770 and 550 respectively and save the changes.

Add a new folder to the project and rename it as Razorback.

Next we are going to import the .mtl, .obj, and related image files that you downloaded earlier so right click the Razorback folder, select Add Existing Item from the context menu and look for and select all the required files. When you click on Open in the Add Existing Item dialog box you'll get a dialog box asking you whether you want to copy some of the image files to your project because of their size. Select No.

The Razorback folder now contains all the required files. The next step is just a simple affair of right-clicking the .obj file and selecting Insert from the context menu.

 

Unfortunately if you attempt to insert the 3D model EB crashes due to a System.IndexOutOfRangeException. This seems to be a bug but the situation can be remedied so click on Close the Program.

 

Blender

To remedy the previous situation we are going to make use of Blender so make sure you have downloaded and installed it. When you run Blender you will be presented with a window that contains a splash screen. To get rid of the splash screen left-click outside the splash screen.

Once you have gotten rid of the splash screen you are left with a view of the default cube. We have to delete this cube so make sure that it is selected; you can do this by right-clicking on the cube. Press the X key and select Delete from the context menu.

Next we are going to import the .obj that is giving us a problem in EB. Go to File > Import > Wavefront (.obj) and navigate to the folder containing the .obj file. Double-click the file to import it into Blender.

Once you have imported the 3D model it is added to the scene with all of its mesh objects selected. The orange lines on the exterior of the model indicate that it is the selected object.

 

Next you are going to rotate the model around the x-axis, indicated by the red arrow. (This step is not absolutely necessary so you can skip to the next step if you want to). Press the R key then the X key and type -90 and press Enter. This changes the orientation of the model .

 

If you are curious as to how the model looks like with textures you can click on the Texture button in the Viewport Shading context menu from the Header strip.

Next deselect the model by pressing the A key. After deselection go to File > Export > Wavefront (.obj) and navigate to the folder containing the files you extracted earlier. Change the default name of the object file, Untitled.obj, to XA-20_Razorback_Strike_Fighter.obj and click on the Export OBJ button. This name is similar to the name of the .obj file you imported.

Back to Expression Blend

Since you closed EB because it crashed earlier restart it and open the XA-20 Razorback project. In the Projects panel expand the Razorback folder and delete XA-20_Razorback_Strike_Fighter.mtl and XA-20_Razorback_Strike_Fighter.obj. Once that is done re-import the .obj file and .mtl, which you have just edited in Blender.

Once you have re-imported the two files right-click the object file in and select Insert from the context menu. EB will add a Viewport3D object to the root layout container. The Viewport3D object contains various WPF 3D objects including a PerspectiveCamera, Lights and various ModelVisual3D objects that make up the 3D model.

The Viewport3D object currently occupies a small portion of the application window so we need to increase its size. Right click the Viewport3D object in the Objects and Timeline panel and select Reset Layout > All. The Viewport3D object should now occupy the whole of the root layout container making the 3D model more visible.

To get a better view of the 3D model select the Camera Orbit tool and use it to change the view of the 3D model.

 

Conclusion

Being able to import 3D models into your WPF project with the free tools highlighted here is certainly a big plus so I hope you have learnt something useful from this tutorial. If you have taken the time to read the whole tutorial up to this point thank you for doing so.

History

  • 7th June 2013: Initial post
  • 21st June 2013: Updated source file

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here