概述 本文介紹採用WPF進行3D開發的一些基礎知識，還有HelixToolkit控制項的介紹以及在MVVM模式下使用3D框架。 3D開發入門 官方文檔對3D開發的一些基礎知識已經描述的比較詳細了，地址：三維圖形概述 - WPF .NET Framework | Microsoft Docs 在學習WP ...
概述
本文介紹採用WPF進行3D開發的一些基礎知識，還有HelixToolkit控制項的介紹以及在MVVM模式下使用3D框架。
3D開發入門
官方文檔對3D開發的一些基礎知識已經描述的比較詳細了，地址：三維圖形概述 - WPF .NET Framework | Microsoft Docs
在學習WPF 3D應首先瞭解文檔中介紹的一些基本概念。
通過以下，代碼我們創建了一個基本的立方體
<Grid>
<Border Grid.Column="0" BorderThickness="1" BorderBrush="Gray">
<Viewport3D >
<Viewport3D.Camera>
<PerspectiveCamera Position="6 5 4" LookDirection="-6 -5 -4"/>
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Direction="-1,-1,-1"/>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0 0 0 1 0 0 0 1 0 1 1 0 0 0 1 1 0 1 0 1 1 1 1 1"
TriangleIndices="2 3 1 2 1 0 7 1 3 7 5 1 6 5 7 6 4 5 6 2 0 2 0 4 2 7 3 2 6 7 0 1 5 0 5 4">
</MeshGeometry3D>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="Red"/>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Border>
</Grid>
View Code
可以先拷貝並修改以上代碼查看效果。
HelixToolkit框架
採用原生的框架進行開發是比較困難或麻煩的，所以考慮採用第三方框架進行開發。
HelixToolkit提供一些3D模型組件，可以方便用戶使用
開源項目地址：GitHub - helix-toolkit/helix-toolkit: Helix Toolkit is a collection of 3D components for .NET
先看一段設計代碼：
<HelixToolkit:HelixViewport3D ShowFrameRate="True"
ZoomExtentsWhenLoaded="True"
ZoomAroundMouseDownPoint="True"
RotateAroundMouseDownPoint="True"
IsTopBottomViewOrientedToFrontBack="True"
IsViewCubeEdgeClicksEnabled="True"> <HelixToolkit:SunLight /> <ModelVisual3D x:Name="model"></ModelVisual3D> <!-- You can also add elements here in the xaml --> <HelixToolkit:GridLinesVisual3D Width="180" Length="180" MajorDistance="10" MinorDistance="10" Thickness="0.1" /> </HelixToolkit:HelixViewport3D>
控制項要求所有內容應包含在HelixToolkit:HelixViewport3D標簽內，包括：光照、地平線和其他模型。
模型一般採用ModelVisual3D 標簽，定義模型的方式有兩種：標簽或代碼：
用標簽定義：
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D x:Name="meshMain"
Positions="50 50 50 71 60 60 60 71 60 71 71 60 60 60 71 71 60 71 60 71 71 71 71 71"
TriangleIndices="2 3 1 2 1 0 7 1 3 7 5 1 6 5 7 6 4 5 6 2 0 2 0 4 2 7 3 2 6 7 0 1 5 0 5 4">
</MeshGeometry3D>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial x:Name="matDiffuseMain">
<DiffuseMaterial.Brush>
<SolidColorBrush Color="LightPink"/>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
用代碼定義：
設計端：
<ModelVisual3D x:Name="model"/>
代碼端：
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += MainWindow_Loaded;
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
// Create a model group
Model3DGroup modelGroup = new Model3DGroup();
MeshBuilder meshBoxBuilder = new MeshBuilder(false, false);
meshBoxBuilder.AddBox(new Point3D(0, 0, 0), 40, 40, 40);
MeshGeometry3D meshBox = meshBoxBuilder.ToMesh(true);
var whiteMaterial = MaterialHelper.CreateMaterial(Colors.Green);
var insideMaterial = MaterialHelper.CreateMaterial(Colors.Gray);
modelGroup.Children.Add(new GeometryModel3D { Geometry = meshBox, Material = whiteMaterial, BackMaterial = insideMaterial });
this.model.Content = modelGroup;
}
}
框架也支持MVVM模式
設計端：
<Window x:Class="Learn3D.Helix.MainWindow">
<Window.DataContext>
<local:MainViewModel />
</Window.DataContext>
<Grid>
<HelixToolkit:HelixViewport3D >
<!-- The content of this visual is defined in MainViewModel.cs -->
<ModelVisual3D Content="{Binding Model}" />
</HelixToolkit:HelixViewport3D>
</Grid>
</Window>
代碼端：
public class MainViewModel
{
public Model3D Model { get; set; }
public MainViewModel()
{
// Create a model group
Model3DGroup modelGroup = new Model3DGroup();
// Create a mesh builder and add a box to it
MeshBuilder meshBuilder = new MeshBuilder(false, false);
meshBuilder.AddBox(new Point3D(0, 0, 0), 20, 10, 5);
// Create a mesh from the builder (and freeze it)
MeshGeometry3D mesh = meshBuilder.ToMesh(true);
// Create some materials
var blueMaterial = MaterialHelper.CreateMaterial(Colors.Red);
var insideMaterial = MaterialHelper.CreateMaterial(Colors.Yellow);
// Add model to the group (using the same mesh, that's why we had to freeze it)
modelGroup.Children.Add(new GeometryModel3D { Geometry = mesh, Transform = new TranslateTransform3D(60, 0, 60), Material = blueMaterial, BackMaterial = insideMaterial });
// Set the property, which will be bound to the Content property of the ModelVisual3D (see MainWindow.xaml)
this.Model = modelGroup;
}
}
基本上我們一般不會採用這種方式，和Stylet框架結合更加方便。
HelixToolkit和Stylet框架結合
和Stylet框架相關的知識這裡就不重覆介紹了，不瞭解的可以去看我博客內的相關文章。
這裡主要演示使用Stylet框架實現模型的變化。
基本原理如下：
首先建立一個模型，並綁定到ViewModel內的一個對象
前端：
<ModelVisual3D Content="{Binding ModelDynamic}" />
後端：
public Model3D ModelDynamic { get; set; }
當用戶通過界面上的控制項修改模型的屬性時，將觸發事件，
public byte Color_R { get; set; } = 0;
public byte Color_G { get; set; } = 0;
public byte Color_B { get; set; } = 0;
private void InitColorBind()
{
this.Bind(s => Color_R, (o, e) => ColorChanged());
this.Bind(s => Color_G, (o, e) => ColorChanged());
this.Bind(s => Color_B, (o, e) => ColorChanged());
}
public void ColorChanged()
{
LoadDynamicModel();
}
在事件內重新構造模型：
public Model3D ModelDynamic { get; set; }
public void LoadDynamicModel()
{
// Create some materials
var redMaterial = MaterialHelper.CreateMaterial(Color.FromRgb(Color_R, Color_G, Color_B));
var insideMaterial = MaterialHelper.CreateMaterial(Colors.Gray);
// Create a model group
Model3DGroup modelDynamic = new Model3DGroup();
//模型
MeshBuilder meshBoxBuilder = new MeshBuilder(false, false);
meshBoxBuilder.AddEllipsoid(new Point3D(20, 20, 10), 5, 5, 5);
MeshGeometry3D meshBox = meshBoxBuilder.ToMesh(true);
modelDynamic.Children.Add(new GeometryModel3D { Geometry = meshBox, Material = redMaterial, BackMaterial = insideMaterial });
this.ModelDynamic = modelDynamic;
}
載入模型
全部通過代碼來實現模型是非常困難的，特別是一些較複雜的模型，可以通過3D軟體進行設計，並把設計好的模型導入進來，這樣就比較愉快了。
public Model3DGroup ModelBase { get; set; }
private void LoadBaseModel()
{
model_1 = LoadModel(@"D:\3DModel\1.stl");
ModelBase = new Model3DGroup();
ModelBase.Children.Add(model_1);
}
LoadModel方法如下：
private Model3DGroup LoadModel(string path)
{
if (path == null)
{
return null;
}
string ext = System.IO.Path.GetExtension(path).ToLower();
Model3DGroup model;
switch (ext)
{
case ".3ds":
{
var r = new HelixToolkit.Wpf.StudioReader();
model = r.Read(path);
break;
}
case ".lwo":
{
var r = new HelixToolkit.Wpf.LwoReader();
model = r.Read(path);
break;
}
case ".obj":
{
var r = new HelixToolkit.Wpf.ObjReader();
model = r.Read(path);
break;
}
case ".objz":
{
var r = new HelixToolkit.Wpf.ObjReader();
model = r.ReadZ(path);
break;
}
case ".stl":
{
var r = new HelixToolkit.Wpf.StLReader();
model = r.Read(path);
break;
}
case ".off":
{
var r = new HelixToolkit.Wpf.OffReader();
model = r.Read(path);
break;
}
default:
throw new InvalidOperationException("File format not supported.");
}
return model;
}
View Code
方法支持的格式比較多，推薦stl格式。
在實際件使用時，組件內是可以加入多個模型的，可以把不會變化的模型採用導入的方式來實現，有些變化的模型（尺寸、位置、顏色等）通過代碼來實現。
最後需要說明的是，採用WPF進行3D開發，其功能是很有限的，很難實現較複雜的效果和交互功能，想要更好的效果可能採用Unity更加合適了。
資源
系列目錄：WPF開發快速入門【0】前言與目錄
代碼下載：Learn WPF: WPF學習筆記 (gitee.com)
簽名區：
如果您覺得這篇博客對您有幫助或啟發，請點擊右側【推薦】支持，謝謝！
