Display 3D Model using Window Presentation Foundation

Introduction

There’re many famous software such as Maya, AutoCAD, Solid Work which can display the 3D model. Moreover, those software also support user to manipulate the 3D Model like Zoom, Move, Rotate the 3D model.

In this article, I will guide you how to read a 3D model file, display it on Window screen as well as manipulate it (Zoom, Move, Rotate) like those software.

We will develop a WPF Window Application (Window Presentation Framework) to display the 3D model file. The simple way to display 3D model is combining WPF with 3rd library (Helix Toolkit)
http://helixtoolkit.codeplex.com/

Background

Windows Presentation Foundation (WPF) is a next-generation presentation system for building Windows client applications. This framework is an improvement compare to Window Form with support attractive GUI, Graphic, Video. With WPF, you can create a GUI application as well as browser-hosted applicationGetting Started with WPF 3D Model

Helix Toolkit builds on the 3-D functionality in Windows Presentation Foundation (WPF). This library provides a higher level APIs for working with 3-D in WPF, via a collection of controls and helper classes. Although this library only supports few 3D model formats like STL or OBJ, and not support other popular 3D formats such as IGES, DXF, but it is open source, free and the simplest way to display the 3D model

Install Helix Toolkit

  1. First you need to install the Visual Studio. You can download Visual Studio (Express or Professional version) on Microsoft website
  2. Create a new WPF Window Application project
  3. Install the Helix Toolkit library via Package Manager Console

On Visual Studio , Select Tool → Nuget Package Manager → Package Manager Cosole

On Console, type the command

Install-Package HelixToolkit.WPF

Visual Studio automatically download the Helix Tookit library and install it to the project

After downloading successfully, the Helix Toolkit is automatically installed to your project

Create your 3D viewport

HelixViewport3D is the default view port of Helix Toolkit. This is the place where will display your 3D model.

Open the MainWindow.xaml, add the following code

HelixViewport3D has parameter ZoomExtentWhenLoaded. If it is set true, the 3D Model is automatically zoom in when loading. If set false, the 3D Model display with its orginial size

Load 3D Model File

After create the 3D viewport, now you can load the 3D content on this viewport. The Helix Toolkit support loading the several 3D model format such as STL or OBJ format.

STL format is 3D format but doesn’t have color. OBJ format is 3D format but includes color

Define path to the model file. In this case, you should copy the model file to same directory with the executable file

//Path to the model file
private const string MODEL_PATH = "Model.stl";

In MainWindow, cretate an instance of ModelVisual 3D

ModelVisual3D device3D = new ModelVisual3D();

Load 3D Content and add it to the ViewPort which you have created above.

device3D.Content = Display3d(MODEL_PATH);
// Add to view port
viewPort3d.Children.Add(device3D);

Model.obj is the 3D model file you need to load in this case. I attached a sample of OBJ file to the source code.

So in the MainWindow.xaml.cs, the completed code is

Now, build and run your WPF project, the 3D model is loaded as following

After loading, you can use mouse to zoom in/out and move the 3D model in Window easly. If you use the Touch Screen PC, you can use the Touch Manipulation to manipulate this 3D model.

The article includes a sample 3D model file for demo. You can download tons of 3D Model here

Source code https://github.com/giaosucan/display3D

References

- Helix 3D toolkit documentation

- Window Presentation Foundation

--

--

--

I am a full stack developer and IT blogger. Pls see my LinkedIn profile at https://www.linkedin.com/in/giaosucan/

Love podcasts or audiobooks? Learn on the go with our new app.

For 2022 and beyond, these are the top 15 DevOps tools.

Basecamp 3: New feature round-up

Top 6 Reasons to Choose Postman for API Testing

Android Menu

The inside to our collaborative project.

Deploy Apache on IBM Cloud

Scrape website content with Python

Introduction to Object-oriented Programming

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Giaosucan

Giaosucan

I am a full stack developer and IT blogger. Pls see my LinkedIn profile at https://www.linkedin.com/in/giaosucan/

More from Medium

C# Interface JSON Serialization and Deserialization

How to make a movable control in Avalonia?

Strings and its memory allocation in .NET

Library of RD.xml files for NativeAOT