WPF开发快速入门【8】WPF进行简单的3D开发

王國慶  金牌会员 | 2022-9-16 17:23:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 927|帖子 927|积分 2785

概述
本文介绍采用WPF进行3D开发的一些基础知识，还有HelixToolkit控件的介绍以及在MVVM模式下使用3D框架。
 
3D开发入门
官方文档对3D开发的一些基础知识已经描述的比较详细了，地址：三维图形概述 - WPF .NET Framework | Microsoft Docs
在学习WPF 3D应首先了解文档中介绍的一些基本概念。
通过以下，代码我们创建了一个基本的立方体
  1.     <Grid>
  2.         <Border  Grid.Column="0" BorderThickness="1" BorderBrush="Gray">
  3.             <Viewport3D >
  4.                 <Viewport3D.Camera>
  5.                     <PerspectiveCamera Position="6 5 4" LookDirection="-6 -5 -4"/>
  6.                 </Viewport3D.Camera>
  7.                 <ModelVisual3D>
  8.                     <ModelVisual3D.Content>
  9.                         <DirectionalLight  Direction="-1,-1,-1"/>
  10.                     </ModelVisual3D.Content>
  11.                 </ModelVisual3D>
  12.                 <ModelVisual3D>
  13.                     <ModelVisual3D.Content>
  14.                         <GeometryModel3D>
  15.                             <GeometryModel3D.Geometry>
  16.                                 <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"
  17.                                                 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">
  18.                                 </MeshGeometry3D>
  19.                             </GeometryModel3D.Geometry>
  20.                             <GeometryModel3D.Material>
  21.                                 <DiffuseMaterial>
  22.                                     <DiffuseMaterial.Brush>
  23.                                         <SolidColorBrush Color="Red"/>
  24.                                     </DiffuseMaterial.Brush>
  25.                                 </DiffuseMaterial>
  26.                             </GeometryModel3D.Material>
  27.                         </GeometryModel3D>
  28.                     </ModelVisual3D.Content>
  29.                 </ModelVisual3D>
  30.             </Viewport3D>
  31.         </Border>
  32.     </Grid>
复制代码
View Code 可以先拷贝并修改以上代码查看效果。
 
HelixToolkit框架
采用原生的框架进行开发是比较困难或麻烦的，所以考虑采用第三方框架进行开发。
HelixToolkit提供一些3D模型组件，可以方便用户使用
开源项目地址：GitHub - helix-toolkit/helix-toolkit: Helix Toolkit is a collection of 3D components for .NET

先看一段设计代码：
  1.         <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  2.             <HelixToolkit:SunLight />
  3.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  4.             
  5.             <HelixToolkit:GridLinesVisual3D
  6.                 Width="180"
  7.                 Length="180"
  8.                 MajorDistance="10"
  9.                 MinorDistance="10"
  10.                 Thickness="0.1" />
  11.         </HelixToolkit:HelixViewport3D>
复制代码
 控件要求所有内容应包含在HelixToolkit:HelixViewport3D标签内，包括：光照、地平线和其他模型。
模型一般采用ModelVisual3D 标签，定义模型的方式有两种：标签或代码：
用标签定义：
  1.         <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  2.             <HelixToolkit:SunLight />
  3.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  4.             
  5.             <HelixToolkit:GridLinesVisual3D
  6.                 Width="180"
  7.                 Length="180"
  8.                 MajorDistance="10"
  9.                 MinorDistance="10"
  10.                 Thickness="0.1" />
  11.         </HelixToolkit:HelixViewport3D>        <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  12.             <HelixToolkit:SunLight />
  13.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  14.             
  15.             <HelixToolkit:GridLinesVisual3D
  16.                 Width="180"
  17.                 Length="180"
  18.                 MajorDistance="10"
  19.                 MinorDistance="10"
  20.                 Thickness="0.1" />
  21.         </HelixToolkit:HelixViewport3D>        <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  22.             <HelixToolkit:SunLight />
  23.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  24.             
  25.             <HelixToolkit:GridLinesVisual3D
  26.                 Width="180"
  27.                 Length="180"
  28.                 MajorDistance="10"
  29.                 MinorDistance="10"
  30.                 Thickness="0.1" />
  31.         </HelixToolkit:HelixViewport3D>        <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  32.             <HelixToolkit:SunLight />
  33.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  34.             
  35.             <HelixToolkit:GridLinesVisual3D
  36.                 Width="180"
  37.                 Length="180"
  38.                 MajorDistance="10"
  39.                 MinorDistance="10"
  40.                 Thickness="0.1" />
  41.         </HelixToolkit:HelixViewport3D>        <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  42.             <HelixToolkit:SunLight />
  43.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  44.             
  45.             <HelixToolkit:GridLinesVisual3D
  46.                 Width="180"
  47.                 Length="180"
  48.                 MajorDistance="10"
  49.                 MinorDistance="10"
  50.                 Thickness="0.1" />
  51.         </HelixToolkit:HelixViewport3D>        <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  52.             <HelixToolkit:SunLight />
  53.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  54.             
  55.             <HelixToolkit:GridLinesVisual3D
  56.                 Width="180"
  57.                 Length="180"
  58.                 MajorDistance="10"
  59.                 MinorDistance="10"
  60.                 Thickness="0.1" />
  61.         </HelixToolkit:HelixViewport3D>        
复制代码
 用代码定义：
  1. 设计端：  
  2. <ModelVisual3D x:Name="model"/>
  4. 代码端：
  5.     public partial class MainWindow : Window
  6.     {
  7.         public MainWindow()
  8.         {
  9.             InitializeComponent();
  10.             this.Loaded += MainWindow_Loaded;
  11.         }
  13.         private void MainWindow_Loaded(object sender, RoutedEventArgs e)
  14.         {
  15.             // Create a model group
  16.                        Model3DGroup modelGroup = new Model3DGroup();
  18.             MeshBuilder meshBoxBuilder = new MeshBuilder(false, false);
  19.             meshBoxBuilder.AddBox(new Point3D(0, 0, 0), 40, 40, 40);
  20.             MeshGeometry3D meshBox = meshBoxBuilder.ToMesh(true);
  21.             var whiteMaterial = MaterialHelper.CreateMaterial(Colors.Green);
  22.             var insideMaterial = MaterialHelper.CreateMaterial(Colors.Gray);
  23.             modelGroup.Children.Add(new GeometryModel3D { Geometry = meshBox, Material = whiteMaterial, BackMaterial = insideMaterial });
  25.             this.model.Content = modelGroup;
  26.         }
  27.     }
复制代码
 框架也支持MVVM模式
  1. 设计端：        <HelixToolkit:HelixViewport3D ShowFrameRate="True" <br>　　　　　　　　　　　　　　　　　　　　　　  ZoomExtentsWhenLoaded="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　ZoomAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　RotateAroundMouseDownPoint="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsTopBottomViewOrientedToFrontBack="True" <br>　　　　　　　　　　　　　　　　　　　　　　　　IsViewCubeEdgeClicksEnabled="True">
  2.             <HelixToolkit:SunLight />
  3.             <ModelVisual3D x:Name="model"></ModelVisual3D>
  4.             
  5.             <HelixToolkit:GridLinesVisual3D
  6.                 Width="180"
  7.                 Length="180"
  8.                 MajorDistance="10"
  9.                 MinorDistance="10"
  10.                 Thickness="0.1" />
  11.         </HelixToolkit:HelixViewport3D>          代码端： 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内的一个对象
  1. 前端：
  2. <ModelVisual3D Content="{Binding ModelDynamic}" />
  4. 后端：
  5. public Model3D ModelDynamic { get; set; }
复制代码
 当用户通过界面上的控件修改模型的属性时，将触发事件，
  1.         public byte Color_R { get; set; } = 0;
  2.         public byte Color_G { get; set; } = 0;
  3.         public byte Color_B { get; set; } = 0;
  5.         private void InitColorBind()
  6.         {
  7.             this.Bind(s => Color_R, (o, e) => ColorChanged());
  8.             this.Bind(s => Color_G, (o, e) => ColorChanged());
  9.             this.Bind(s => Color_B, (o, e) => ColorChanged());
  10.         }
  12.         public void ColorChanged()
  13.         {
  14.             LoadDynamicModel();
  15.         }
复制代码
 在事件内重新构造模型：
  1.        　　 public Model3D ModelDynamic { get; set; }
  2.         public void LoadDynamicModel()
  3.         {
  4.             // Create some materials           
  5.            　　　　 var redMaterial = MaterialHelper.CreateMaterial(Color.FromRgb(Color_R, Color_G, Color_B));
  6.             var insideMaterial = MaterialHelper.CreateMaterial(Colors.Gray);
  8.             // Create a model group
  9.             　　　　Model3DGroup modelDynamic = new Model3DGroup();
  11.             //模型
  12.            　　　　 MeshBuilder meshBoxBuilder = new MeshBuilder(false, false);
  13.             meshBoxBuilder.AddEllipsoid(new Point3D(20, 20, 10), 5, 5, 5);
  14.             MeshGeometry3D meshBox = meshBoxBuilder.ToMesh(true);
  15.             modelDynamic.Children.Add(new GeometryModel3D { Geometry = meshBox, Material = redMaterial, BackMaterial = insideMaterial });
  17.             this.ModelDynamic = modelDynamic;
  18.         }
复制代码
  
加载模型
全部通过代码来实现模型是非常困难的，特别是一些较复杂的模型，可以通过3D软件进行设计，并把设计好的模型导入进来，这样就比较愉快了。
  1.         　　public Model3DGroup ModelBase { get; set; }
  2.         private void LoadBaseModel()
  3.         {
  4.             model_1 = LoadModel(@"D:\3DModel\1.stl");   
  5.             ModelBase = new Model3DGroup();
  6.             ModelBase.Children.Add(model_1);           
  7.         }
复制代码
 LoadModel方法如下：
  1.         private Model3DGroup LoadModel(string path)
  2.         {
  3.             if (path == null)
  4.             {
  5.                 return null;
  6.             }
  8.             string ext = System.IO.Path.GetExtension(path).ToLower();
  10.             Model3DGroup model;
  11.             switch (ext)
  12.             {
  13.                 case ".3ds":
  14.                     {
  15.                         var r = new HelixToolkit.Wpf.StudioReader();
  16.                         model = r.Read(path);
  17.                         break;
  18.                     }
  20.                 case ".lwo":
  21.                     {
  22.                         var r = new HelixToolkit.Wpf.LwoReader();
  23.                         model = r.Read(path);
  25.                         break;
  26.                     }
  28.                 case ".obj":
  29.                     {
  30.                         var r = new HelixToolkit.Wpf.ObjReader();
  31.                         model = r.Read(path);
  32.                         break;
  33.                     }
  35.                 case ".objz":
  36.                     {
  37.                         var r = new HelixToolkit.Wpf.ObjReader();
  38.                         model = r.ReadZ(path);
  39.                         break;
  40.                     }
  42.                 case ".stl":
  43.                     {
  44.                         var r = new HelixToolkit.Wpf.StLReader();
  45.                         model = r.Read(path);
  46.                         break;
  47.                     }
  49.                 case ".off":
  50.                     {
  51.                         var r = new HelixToolkit.Wpf.OffReader();
  52.                         model = r.Read(path);
  53.                         break;
  54.                     }
  56.                 default:
  57.                     throw new InvalidOperationException("File format not supported.");
  58.             }
  60.             return model;
  61.         }
复制代码
View Code方法支持的格式比较多，推荐stl格式。
在实际件使用时，组件内是可以加入多个模型的，可以把不会变化的模型采用导入的方式来实现，有些变化的模型（尺寸、位置、颜色等）通过代码来实现。
最后需要说明的是，采用WPF进行3D开发，其功能是很有限的，很难实现较复杂的效果和交互功能，想要更好的效果可能采用Unity更加合适了。
 
资源
系列目录：WPF开发快速入门【0】前言与目录 
代码下载：Learn WPF: WPF学习笔记 (gitee.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

王國慶

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表