How to implement 3D drawing using WFP

WPF itself does not support direct 3D drawing, but it provides some advanced techniques for achieving 3D effects.

If you want to do 3D drawing in WPF, you can use two main methods:

WPF 3D: This is a way to create 3D graphics in WPF applications. WPF 3D provides some basic 3D shapes (such as cubes, spheres, and cones) as well as some tools for controlling 3D scenes and objects (such as cameras, lights, and materials).

In WPF, the following three materials can be used for 3D object models:

DiffuseMaterial: diffuse reflection, reflection scene light effect
EmissiveMaterial: self-illuminating, similar to an electric light
SpecularMaterial: total reflection, can map scene maps

In WPF, the material of a 3D model is a very important element that determines what the model looks like, such as roughness, color, luminosity, etc.

The WPF 3D object model light source is as follows

AmbientLight: Ambient Light - Provides ambient light that illuminates all objects regardless of their position or orientation.

DirectionalLight: directional light - it illuminates like a distant light source (such as sunlight), has only a Direction property and no position information, so it does not cast directly on any specific object, but illuminates all objects in the scene .

PointLight: Point light - Illuminates like a nearby light source, has a position and casts light from that position, objects in the scene are illuminated based on the object's position and distance relative to the light source.

SpotLight: Spotlight - Inherited from PointLight, it lights similarly to PointLight, but it has both position and direction.

Related properties

Color: light color

Direction: light direction (parallel light, spotlight)

Position: light source coordinates (point light source, spotlight)

Range: light range (point light source)

InnerConeAngle: inner light beam illumination angle (spotlight)

OuterConeAngle: External light beam illumination angle (spotlight)

Attributes	illustrate	Remark
MeshGemetry3D	grid label
Positions	point	Labels that present 3D graphics Positions="0,0,0 (x,y,z) 3,0,0 3,2,0 0,2,0" 4 points of a surface
TraiangleIndices	3 Angular creation	TriangleIndices="0,3,2 (first group) 0,1,2 (second group)" Set the 3 points of Positions to form a triangle row
OrthographicCamera	Orthographic camera (near and far ratios are the same - rarely used)
PerspectiveCamera	Perspective camera (the near ratio is small and the long distance ratio is small, in line with our normal vision of observing things - commonly used)
TextureCoordinates	Set the mapping relationship between plane objects and 3D objects - used to solve the problem of displaying the background image of plane settings - if this property is not set, the background image of plane settings will not be displayed.	TextureCoordinates="1,1 1,0 0,0 0,1"

Camera tag object properties

Attributes	illustrate	Remark
Position	Camera spatial coordinates (X, Y, Z)	Position="100,100,100" Set the viewing angle x,y,z
LookDirection	Observation direction, vector, camera observation port orientation	LookDirection="-2,-2,-2" sets the camera's viewing angle - the direction of the camera's observation
FieldOfView	(perspective camera property) / field of view, one value	FieldOfView="90" sets the distance between the camera and the viewing object. The farther away the viewing object area is, the larger the viewing area is, and the closer the viewing object area is smaller.
Width	(orthographic camera properties) (focal length), field of view	Width="50"
UpDirection	The direction above the camera, controls the rotation of the camera observation port	UpDirection="0,1,0" (x, y, z) sets the rotation angle of the camera viewport, whether to shoot at an angle or straight up.
FarPlaneDistance	Distant distance. Scenes larger than this distance will not be rendered.	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"/>

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

How to implement 3D drawing using WFP

Guess you like