首页 > 代码库 > 【WPF】用三角形网格构建三维图形

【WPF】用三角形网格构建三维图形

虽然WPF只能支持部分三维模型,不过从应用功能开发的角度看,也已经够用了(非游戏开发)。WPF 的三维图形,说得简单一点,也就两种而已。

1、把二维对象放到三维空间中,这个应该较为好办,像 Image 控件,Shape 类型等,或者我们常用的一些控件,都可以放进三维空间中,用这种方式构建模型可能更为实用,也好弄(至少不借助专门的建模工具的前提下)。

2、完全利用坐标建模。实际上是用 N 个三角形来组合成三维模型。

虽然你会看到基类型 Visual3D 派生出了好几个类型,但总体上说也就划分为上述两类。Viewport2DVisual3D 类就是专门把二维对象放入三维空间中的,而 ModelVisual3D 和 UIElement3D 差不多,不同的是,UIElement3D 可以捕捉用户输入行为,如鼠标键盘触控等,如果你的三维模型要与用户交互,那么你可以选用这个类。

 

本文老周重点介绍第二种建模方法,就是用三角形来组建。为啥要用三角形呢?我们以前都学过几何,你想想,要多少个点才能确定一个面?是三个吧。两个点只能确定一条线,一个点就算了,那是无限射线。正是如此,所以三维图形中的所谓面,至少得要三个点才能确定下来,所以,要使用三角形来作为图形基元。

在介绍三角形坐标设置之前,老周先用废话来各大伙补充一点东东。

在WPF中承载三维模型是这样的:首先,你应该声明一个 Viewport3D 对象,它包含我们要建立的模型,前些天,老周写过一篇文章,介绍过三维型中的照相机,就是 Viewport3D 的 Camera 属性,你必须设置一个照相机,这样才能看到三维模型中的东西,它好比我们透过实体相机的取景器来观察客观事物,具体可以点这里查看。

之后呢,Viewport3D会包含一个子元素集合,每个元素必须是 Visual3D 的子类,由于是集合,你可以在其中添加 N 个。

用坐标来构建模型,应当用 ModelVisual3D 类,这个类很好玩,它自身又公开一个集合,可以再添加 ModelVisual3D 对象。也就是说,ModelVisual3D 对象是可以像树形结构一样嵌套,这样做可以方便你建立复杂的三维图形,并且可以有效分组。很多人会觉得,WPF 的三维模型很复杂很难懂,除了三维空间本身的复杂性外,估计可能是因为这种可视化元素之间的可嵌套性,刚开始接触时容易头晕。不过不用害怕,这世界上没有谁天生就会的,不要急,学习的时候,不要建太复杂的模型,这样思路也容易适应,只要你熟悉了就很轻松了,再复杂的东西,也是由各种简单的元素构成的。

 

ModelVisual3D 类有个Content属性,这个才是真正用来设置模型坐标的,它的类型是Model3D,它是个抽象类,它的派生类有两大块:一是GeometryModel3D,用来定义构成三维图形的坐标点;再者就是Light,表示用于照亮三维模型的灯光,因为三维图形是模拟现实中的事物的,所以会考虑到灯光照射的问题,它的实现类型有比如环境光(AmbientLight),这个像我们房间里的大灯,它可以照亮屋内所有角落;方向光(DirectionalLight),像手电筒的光吧,具有照射方向……

 

在GeometryModel3D类,也公开了三个属性:

Geometry:设置三维图形的坐标点集合,不仅只有点,还有索引、法向量、纹理映射等。

Material:图形正面的材质,就像金属表面,反射镜面类似的效果。

BackMaterial:有正面就会有背面,这是指图形背面的材质。

 

下面就是建立模型的重点了,即 Geometry属性,WPF 框架只公开了一个实现类——MeshGeometry3D,就是使用三角形网络来建立物体的表面。其中也有三个属性比要重要。

Positions:这个很重要,组成图形表面的各个坐标点的集合。

TriangleIndices:这个也很重要,它是一组整数集,从0开始,就是指定哪三个点组成一个三角形。

TextureCoordinates:纹理映射。之个有点像你把某妹子的照片贴在一块玻璃上,照片相当于纹理,经的每个点与玻璃的对应关系。比如,通常,我们会把照片的左上角的点对准玻璃左上角的点,右上角的点对准玻璃右上角的点。如果把照片左上角的点对准玻璃右下角的点,照片左上角的点对准玻璃左下角的点,这样贴出来的照片就是倒过来的。

Normals:构成图形的各个坐标点的法向量,默认全是 0,0,1。这个东西还真不知道怎么解释,一般我们可以不指定,用默认值就可以,大概是指面与面之间的关系吧。

 

咱们来看看演示吧。

                        <GeometryModel3D>                            <GeometryModel3D.Geometry>                                <MeshGeometry3D Positions="-2,2,0 3,-2,2 5,3,3 7,1,-2" TriangleIndices="0,1,2,1,3,2" TextureCoordinates="0,0 1,0 1,0 1,1" Normals="0,0,1 0,0,1 0,0,1 0,0,1"/>                            </GeometryModel3D.Geometry>                            <GeometryModel3D.Material>                                <DiffuseMaterial>                                    <DiffuseMaterial.Brush>                                        ……                                    </DiffuseMaterial.Brush>                                </DiffuseMaterial>                            </GeometryModel3D.Material>                        </GeometryModel3D>

上面代码中,定义了四个坐标点,注意 TriangleIndices 属性的值,它有六个值,表明这四个点可以构成两个三角形。即它有两个面组成。

0-1-2 表示第一个点,第二个点和第三个点,这三个点构成了一个三角形。就像这样。

技术分享

 

然后是 1-3-2,即第二个点,第四个点,第三个点又组成了一个三角型。

技术分享

 

 

大伙要注意一个法则—— 组成三角形的点,如果是按逆时针排序的(就像上面例子),表示的是物体的正面;如果是顺时针的,表示的则是物体的反面。

 

再比如,咱们再写成这样,这回有五个点。

<MeshGeometry3D Positions="0,3,0 -3,-2,0 -1,-3,1 1,-3,1 3,-2,0" TriangleIndices="0,1,2,0,2,3,0,3,4" TextureCoordinates="0,0 1,1 1,1 1,1 1,1" />

第一个点在顶部,其余四个在下方,构成三个三角形。

技术分享

 

 

好了,由于剧组严重缺乏资金,老周今天只能说到这里了。为了弄到更多资金来写后面的文章,老周要去玩《狂野撞车》来赚现金。

 

【WPF】用三角形网格构建三维图形