Click here to Skip to main content
Click here to Skip to main content

Inserting 3D Models in Expression Blend

, 20 Jun 2013
Rate this:
Please Sign up or sign in to vote.
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Meshack Musundi
Software Developer
Kenya Kenya
Meshack is an avid programmer with a bias towards WPF and VB.NET. He has about 5 years of programming experience initially starting off with Java before shifting to .NET, thanks to the allure of WPF. He has developed several applications, and written several articles about them, which can be viewed here on CodeProject. He currently resides in a small town in Kiambu county, Kenya.
 
Awards;
  • CodeProject MVP 2013
  • CodeProject MVP 2012
  • Best VB.NET article of August 2013
  • Best VB.NET article of February 2013
  • Best VB.NET article of October 2012
  • Best VB.NET article of July 2012
  • Best VB.NET article of February 2012
  • Best VB.NET article of January 2012
  • Best VB.NET article of November 2011
  • Best VB.NET article of June 2011
  • Best VB.NET article of May 2011
  • Best VB.NET article of March 2011
  • Best VB.NET article of February 2011
  • Best VB.NET article of January 2011
  • Best VB.NET article of December 2010
  • Best VB.NET article of November 2010

Comments and Discussions

 
QuestionExcellent article PinmemberBlueBanana2-Mar-14 6:44 
GeneralRe: Excellent article PinprofessionalMeshack Musundi2-Mar-14 8:11 
Questionhi PinmemberMember 1007103622-Jul-13 21:16 
AnswerRe: hi PinmvpMeshack Musundi22-Jul-13 23:41 
Questionwhite screen after inserting .obj file Pinmemberaditya_ingle27-Jun-13 23:51 
AnswerRe: white screen after inserting .obj file PinmvpMeshack Musundi28-Jun-13 0:08 
GeneralRe: white screen after inserting .obj file Pinmemberaditya_ingle28-Jun-13 0:31 
GeneralMy vote of 5 PinprofessionalSagarRS6-Jun-13 23:12 
GeneralRe: My vote of 5 PinmvpMeshack Musundi6-Jun-13 23:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 21 Jun 2013
Article Copyright 2013 by Meshack Musundi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid