Express Yourself With Expression Blend 2!

trueSpace is an ideal tool for making 3D content to go into your WPF applications. This tutorial will take you through the steps needed to take an object out of trueSpace and place it into Expression Blend 2.

This technique also provides a way of converting a trueSpace object into XAML, allow it to be cut an pasted in that format for use elsewhere. In this sample, we'll export the shark from the trueSpace libraries into Expression Blend 2.

1. Swap to Model side

Whether you use the Model or the workspace side to create your object, you will need to swap to the Model side once done and ready to export.

2. Click the "Install New trueSpace Extension" icon

Note that you will only need to do this set of steps once to load the plug-in, as once loaded it will remain in your toolbars for future use.

3. In the dialog box that opens, navigate into the LUUV directory

4. Double click the LUUV.tsx file

5. A new icon appears on your toolbar for the LUUV plug-in

The LUUV plug-in lets you load and save 3D objects in the .OBJ file format. This format is useful for swapping 3D models between various 3D applications, as well as for getting your objects into Blend 2 and Visual Studio. Now you have added it to the toolbar, you won't need to repeat steps 2 to 6 next time you want to export an object.

6. Set your LUUV options

Right click on the new LUUV icon top open the options panel. Ensure that they match the image seen here, especially Copy Texture Files and Group By Materials options.

7. Open LUUV in "Save" mode

Ensure your object is selected in trueSpace, and hold the ALT key while left clicking on the LUUV icon ( These instructions are noted in the mouse-over details for the plug-in). This will open the LUUV plug-in in "Save" mode. A regular left click would open it in "Load" mode, which is how you would load in OBJ format objects from other applications. OBJ makes a useful format for moving between applications as it stores geometry, UV maps, and texture information in a standard way, so you may want to use LUUV to load and save objects between trueSpace and other applications.

8. Create a folder and save your object

It is recommended to create a folder for each object, since each object will require multiple files to properly define it. This makes it easier to ensure you move all the files you need into Expression Blend 2, Visual Studio, or any other application.

9. Start a new project in Expression Blend 2

For this example, start a new project in Expression Blend 2, choosing to create a new WPF application.

10. Drag and drop your files from the folder into Expression Blend 2

Open a Windows Explorer window, and place it beside your Expression Blend window - now select all the files saved to your folder, which should be an OBJ, an MTL and one or more image files (see later for what these files mean), and drag and drop them to the Files area in your Blend 2 window.

11. Your 3D content is now added to your project

Your object is now added as a resource for your project and will be shown in the list of files associated with your project.

12. Double click the object in Expression Blend 2

For a quick example on how it can be used, double click on the OBJ file in the Resources section - this adds a 3D viewport to your form, and displays the 3D object in it.

13. Expand the 3D viewer window

Use the handles to expand the 3D window to a suitable size.

14. Rotate around the object

You can use the controls on the left to rotate your object, zoom in, etc, and you will see your 3D view of the object update. By creating UI elements in Blend 2 or Visual Studio that manipulate the settings for the viewport, you can allow users to interact with the 3D object in your application.

15. A glance at the code

You can take a look at your object in the XAML view. You will find that it has been converted into a XAML object, with code that you could cut and paste to use elsewhere. The object itself is in the GeometryModel3D object, and this defines all the vertices and textures.

You'll also see the PerspectiveCamera object created for the viewport. You can create your own PerspectiveCamera, and then update its values such as the position, the direction it is looking in, the zoom, and so on. By adding UI elements to adjust those values, your application can let the user interact with the 3D object.

Above you can see a quick and simple application created by adding buttons and code in Visual Studio to allow the user to manipulate the 3D object. Following this process, you can now create your own 3D objects for use in your XAML and WPF applications!

Known Issues:
Sometimes LUUV may not export the object, or may even cause a crash. This is related to triangulation issues, and what are termed "n-gons" (polygons with more than 4 defining edges). See the second Hints N Tips article this month on an introduction to this issue, and how to solve it.

A note on the files saved by LUUV:
When you used LUUV to save an OBJ, you will notice you end up with more than one file. It is important to keep these files together and in the same directory. The files are:

OBJ - the definition of the geometry of the object, this gives it its shape.
MTL - this file defines what materials are used on the object, without it it would all be grey!
Image files - Most likely you will have one or more image files, these are painted on to the object to give it its color (the MTL file defines how they are painted on).

By creating a new folder when you save the LUUV, you ensure you know all the files that you need to move along with this object, so that you can drag them all into Expression Blend 2 in order to use them.