用WFP如何实现3D绘图

WPF本身不支持直接的3D绘图，但是它提供了一些用于实现3D效果的高级技术。

如果你想要在WPF中进行3D绘图，你可以使用两种主要的方法：

WPF 3D：这是一种在WPF应用程序中创建3D图形的方式。WPF 3D提供了一些基本的3D形状（如立方体、球体和锥体）以及一些用于控制3D场景和对象的工具（如相机、光源和材质）。

在WPF中，3D对象模型的材质可以使用以下三种

DiffuseMaterial：漫反射，反射场景光效果
EmissiveMaterial：自发光，类似于电灯
SpecularMaterial：全反射，可以映射场景贴图

在WPF中，一个3D模型的材质，就是决定模型看起来是什么样子的一种很重要的元素，如粗糙度、颜色、发光度等

WPF 3D对象模型光源如下

AmbientLight：环境光- 提供环境光，会照亮所有的对象，而不考虑对象的位置或方向。

DirectionalLight：平行光 - 它像远处的光源那样照亮（如太阳光），只具有一个Direction属性，没有位置信息，因此不直接投射到任何特定的对象上，而是照亮场景中的所有对象。

PointLight：点光源 - 像近处的光源那样照亮，具有一个位置并从该位置投射光，场景中的对象是根据对象相对于光源的位置和距离而被照亮的。

SpotLight：聚光灯 - 从PointLight继承，它的照亮方式与PointLight类似，但是它既具有位置又具有方向。

相关属性

Color：灯光颜色

Direction：光线方向（平行光、聚光灯）

Position：光源坐标（点光源、聚光灯）

Range：灯光范围（点光源）

InnerConeAngle：内光柱照射角度（聚光灯）

OuterConeAngle：外光柱照射角度（聚光灯）

属性	说明	备注
MeshGemetry3D	网格标签
Positions	点	呈现3D图形的标签 Positions="0,0,0（x,y,z） 3,0,0 3,2,0 0,2,0" 一个面的4个点
TraiangleIndices	3 角形创建	TriangleIndices ="0,3,2（第一组） 0,1,2（第二组）" 设置Positions的3个点组成一个三角行
OrthographicCamera	正交相机（远近比例都一样-很少用）
PerspectiveCamera	透视相机（近比例长远比例小，符合我们正常观察事物的视觉-常用）
TextureCoordinates	设置平面对象与3D对象的映射关系-用来解决平面设置背景图显示问题-如果不设置这个属性平面设置的背景图不显示	TextureCoordinates="1,1 1,0 0,0 0,1"

相机标签对象属性

属性	说明	备注
Position	相机的空间坐标(X,Y,Z)	Position="100,100,100" 设置视角x,y,z
LookDirection	观察方向，向量，相机观察口朝向	LookDirection="-2,-2,-2" 设置相机的观看视角-相机观察的方向
FieldOfView	（透视相机属性） / 视野范围，一个值	FieldOfView="90" 设置相机与观看物体的距离，离得远观看物体区域范围大，离得近观看物体区域范围小
Width	（正交相机属性）（焦距），视野范围	Width="50"
UpDirection	相机上方方向，控制相机观察口旋转	UpDirection="0,1,0" （x, y,z）设置相机视口的旋转角度，斜着拍还是正着拍
FarPlaneDistance	远景距离，大于这个距离的场景不渲染	FarPlaneDistance="1000" 设置相机远处景色的渲染范围，如果值设置的比较小，远处景色是模糊的
NearPlaneDistance	近景距离，小于这个距离的场景不渲染	NearPlaneDistance="1" 设置相机近处的晶圆渲染范围，如果值越大，近处景色是模糊的

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

<Window.Triggers>

<EventTrigger RoutedEvent="Window.Loaded">

<BeginStoryboard>

<Storyboard RepeatBehavior="Forever">

<DoubleAnimation Duration="0:0:7"

Storyboard.TargetName="aar"

Storyboard.TargetProperty="Angle"

From="0"

To="360"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

<Grid>

<Viewport3D>

<Viewport3D.Camera>

<PerspectiveCamera Position="100,100,100"

LookDirection="-2,-2,-2"

FieldOfView="90"

UpDirection="0,1,0"

FarPlaneDistance="1000"

NearPlaneDistance="1">

</PerspectiveCamera>

<!--<OrthographicCamera Position="100,100,100"

LookDirection="-2,-2,-2"

Width="50"

UpDirection="0,1,0"

FarPlaneDistance="1000"

NearPlaneDistance="1"/>-->

</Viewport3D.Camera>

<ModelVisual3D>

<ModelVisual3D.Content>

<Model3DGroup>

<SpotLight Color="Orange" InnerConeAngle="100"

OuterConeAngle="40"

Position="50,50,50"

Direction="-1,-1,-1"/>

</Model3DGroup>

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelUIElement3D>

<ModelUIElement3D.Model>

<GeometryModel3D>

<GeometryModel3D.Material>

<MaterialGroup>

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<ImageBrush ImageSource="Arrow.png"/>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</MaterialGroup>

</GeometryModel3D.Material>

<GeometryModel3D.Geometry>

<MeshGeometry3D Positions="0,0,0 3,0,0 3,2,0 0,2,0"

TriangleIndices="0,2,3 0,1,2"

TextureCoordinates="1,1 1,0 0,0 0,1"/> 

</GeometryModel3D.Geometry>

</GeometryModel3D>

</ModelUIElement3D.Model>

</ModelUIElement3D>

<ModelUIElement3D>

<ModelUIElement3D.Model>

<GeometryModel3D>

<GeometryModel3D.Material>

<MaterialGroup>

<DiffuseMaterial Brush="Red"/>

<!--<DiffuseMaterial>

<DiffuseMaterial.Brush>

<ImageBrush ImageSource="Arrow.png"/>

</DiffuseMaterial.Brush>

</DiffuseMaterial>-->

</MaterialGroup>

</GeometryModel3D.Material>

<GeometryModel3D.Geometry>

<MeshGeometry3D Positions="3,2,1 3,2,0 3,0,0 3,0,1"

TriangleIndices="0,3,1 1,3,2"/>

</GeometryModel3D.Geometry>

</GeometryModel3D>

</ModelUIElement3D.Model>

</ModelUIElement3D>

<ModelUIElement3D>

<ModelUIElement3D.Transform>

<Transform3DGroup>

<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">

<RotateTransform3D.Rotation>

<AxisAngleRotation3D Axis="1,0,0" Angle="-90"/>

</RotateTransform3D.Rotation>

</RotateTransform3D>

<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">

<RotateTransform3D.Rotation>

<AxisAngleRotation3D Axis="0,1,0" x:Name="aar"/>

</RotateTransform3D.Rotation>

</RotateTransform3D>

</Transform3DGroup>

</ModelUIElement3D.Transform>

<ModelUIElement3D.Model>

<GeometryModel3D x:Name="gm">

<GeometryModel3D.Material>

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<ImageBrush ImageSource="Earth.jpg"/>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</GeometryModel3D.Material>

</GeometryModel3D>

</ModelUIElement3D.Model>

</ModelUIElement3D>

</Viewport3D>

</Grid>

　　后台关于3D地球的代码

public MainWindow()

{

InitializeComponent();

// 绑定加载事件

this.Loaded += MainWindow_Loaded;

}

/// <summary>

/// 窗体加载

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void MainWindow_Loaded(object sender, RoutedEventArgs e)

{

this.gm.Geometry = this.SetEarth(180, 180, 50);

}

/// <summary>

/// 生成三维地球算法

/// 圆弧的计算公式

/// </summary>

/// <param name="numx">纬度方向切多少份</param>

/// <param name="numz">精度方向切多少份</param>

/// <param name="r">地球半径</param>

/// <returns></returns>

private MeshGeometry3D SetEarth(int numx, int numz, double r = 3)

{

MeshGeometry3D mesh = new MeshGeometry3D();

double dTh = 2 * Math.PI / numx;

double dPhi = Math.PI / numz;

double X(double th, double phi) => r * Math.Sin(phi) * Math.Cos(th);

double Y(double th, double phi) => r * Math.Sin(phi) * Math.Sin(th);

double Z(double phi) => r * Math.Cos(phi);

// Make the points.

for (int i = 0; i <= numx; i++) // 纬度方向循环次数

for (int j = 0; j <= numz; j++) // 精度方向循环次数

{ // 这里使用三角函数进行计算的

var th = i * dTh;

var phi = j * dPhi;

// 坐标点-用于画三角形的坐标点

mesh.Positions.Add(new Point3D(X(th, phi), Y(th, phi), Z(phi)));

// 用于建立与图片的映射关系

mesh.TextureCoordinates.Add(new Point(th, phi));

}

// 生成三角形-每三个坐标点组织一个面出来

for (int i = 0; i < numx; i++)

for (int j = 0; j < numz; j++)

{

int i1 = i * (numz + 1) + j;

int i2 = i1 + 1;

int i3 = i2 + (numz + 1);

int i4 = i3 - 1;

mesh.TriangleIndices.Add(i1);

mesh.TriangleIndices.Add(i2);

mesh.TriangleIndices.Add(i3);

mesh.TriangleIndices.Add(i1);

mesh.TriangleIndices.Add(i3);

mesh.TriangleIndices.Add(i4);

}

return mesh;

}

　　代码实例效果图：

这个3D动画地球是可以旋转的

3D图片用于辅助寻找3d坐标点顺序

3D面设置背景图显示方向

通过TextureCoordinates属性设置箭头的显示方向

TextureCoordinates="1,1 1,0 0,0 0,1"/>

本文章大半部分素材来自于朝夕教育，技术整理的不好。。。

用WFP如何实现3D绘图

猜你喜欢