如何在WPF的Viewport3D中使用MeshGeometry3D绘制圆弧？

刚接触WPF 3D确实容易有点懵，别担心，我们一步步来解决用MeshGeometry3D绘制圆弧的问题。其实核心思路是把圆弧这种曲线离散成多个小的线段/三角形——毕竟计算机没法直接渲染完美的曲线，都是用足够多的小片段来近似平滑效果的。

下面分两种最常见的需求来讲解：

1. 绘制填充的扇形（圆弧面） #

如果需要的是一个从圆心出发的填充扇形区域（类似披萨切片），可以通过将圆心与圆弧上的相邻点组成三角形网格来实现：

后台代码：生成扇形网格 #

public MeshGeometry3D GenerateFanMesh(Point3D center, double radius, double startAngleDeg, double endAngleDeg, int segments)
{
    var mesh = new MeshGeometry3D();
    // 添加扇形的圆心点
    mesh.Positions.Add(center);

    // 将角度转换为弧度（WPF的数学计算用弧度）
    double startAngle = startAngleDeg * Math.PI / 180;
    double endAngle = endAngleDeg * Math.PI / 180;
    double angleStep = (endAngle - startAngle) / segments;

    // 生成圆弧上的所有顶点（默认在XY平面，Z坐标与圆心一致）
    for (int i = 0; i <= segments; i++)
    {
        double currentAngle = startAngle + angleStep * i;
        double x = center.X + radius * Math.Cos(currentAngle);
        double y = center.Y + radius * Math.Sin(currentAngle);
        mesh.Positions.Add(new Point3D(x, y, center.Z));
    }

    // 生成三角形索引：每个三角形由圆心 + 第i个圆弧点 + 第i+1个圆弧点组成
    for (int i = 1; i <= segments; i++)
    {
        mesh.TriangleIndices.Add(0);
        mesh.TriangleIndices.Add(i);
        mesh.TriangleIndices.Add(i + 1);
    }

    // 添加法向量（XY平面的法向量是Z轴正方向，影响光照显示）
    foreach (var pos in mesh.Positions)
    {
        mesh.Normals.Add(new Vector3D(0, 0, 1));
    }

    return mesh;
}

XAML中使用网格 #

<Window x:Class="Arc3DExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="3D Arc Demo" Loaded="Window_Loaded">
    <Viewport3D>
        <!-- 相机：控制视角 -->
        <Viewport3D.Camera>
            <PerspectiveCamera Position="0,0,6" LookDirection="0,0,-1" UpDirection="0,1,0" />
        </Viewport3D.Camera>
        
        <!-- 光源：让3D物体可见 -->
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <DirectionalLight Color="White" Direction="-1,-1,-1" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
        
        <!-- 扇形模型 -->
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D x:Name="FanModel">
                    <GeometryModel3D.Material>
                        <DiffuseMaterial Brush="Orange" />
                    </GeometryModel3D.Material>
                </GeometryModel3D>
            </ModelVisual3D.Content>
        </ModelVisual3D>
    </Viewport3D>
</Window>

绑定网格到模型 #

在窗口的Loaded事件中生成网格并赋值：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // 生成一个90度、半径2、20段的扇形（段数越多越平滑）
    var fanMesh = GenerateFanMesh(new Point3D(0,0,0), 2, 0, 90, 20);
    FanModel.Geometry = fanMesh;
}

2. 绘制圆弧线条（带宽度的曲线） #

如果只是想画一条圆弧线（类似3D空间中的曲线），因为WPF没有原生的3D线条控件，我们可以把线条做成一个细矩形面来模拟：

后台代码：生成圆弧线条网格 #

public MeshGeometry3D GenerateArcLineMesh(Point3D center, double radius, double startAngleDeg, double endAngleDeg, int segments, double lineWidth)
{
    var mesh = new MeshGeometry3D();
    double halfWidth = lineWidth / 2;

    double startAngle = startAngleDeg * Math.PI / 180;
    double endAngle = endAngleDeg * Math.PI / 180;
    double angleStep = (endAngle - startAngle) / segments;

    // 圆弧所在平面的法向量（默认XY平面，法向量为Z轴）
    var normal = new Vector3D(0, 0, 1);

    for (int i = 0; i <= segments; i++)
    {
        double currentAngle = startAngle + angleStep * i;
        // 计算圆弧上的点
        double x = center.X + radius * Math.Cos(currentAngle);
        double y = center.Y + radius * Math.Sin(currentAngle);
        var arcPoint = new Point3D(x, y, center.Z);

        // 计算圆弧在该点的切线方向
        var tangent = new Vector3D(-Math.Sin(currentAngle), Math.Cos(currentAngle), 0);
        tangent.Normalize();

        // 计算线条的两个偏移点（沿着切线的垂直方向）
        var offsetDir = Vector3D.CrossProduct(normal, tangent);
        offsetDir.Normalize();
        offsetDir *= halfWidth;

        mesh.Positions.Add(arcPoint + offsetDir);
        mesh.Positions.Add(arcPoint - offsetDir);
    }

    // 生成三角形索引：每个分段对应两个三角形，组成一个小矩形
    for (int i = 0; i < segments; i++)
    {
        int idx0 = i * 2;
        int idx1 = i * 2 + 1;
        int idx2 = (i + 1) * 2;
        int idx3 = (i + 1) * 2 + 1;

        mesh.TriangleIndices.Add(idx0);
        mesh.TriangleIndices.Add(idx2);
        mesh.TriangleIndices.Add(idx1);
        mesh.TriangleIndices.Add(idx2);
        mesh.TriangleIndices.Add(idx3);
        mesh.TriangleIndices.Add(idx1);
    }

    // 添加法向量
    foreach (var pos in mesh.Positions)
    {
        mesh.Normals.Add(normal);
    }

    return mesh;
}

使用示例 #

同样在Window_Loaded中调用：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // 生成一条宽度0.1、180度的圆弧线条
    var arcLineMesh = GenerateArcLineMesh(new Point3D(0,0,0), 2, 0, 180, 30, 0.1);
    FanModel.Geometry = arcLineMesh;
}

一些注意事项 #

• 分段数：分段越多，圆弧越平滑，但会增加性能开销，一般20-50段足够满足肉眼平滑需求。
• 平面适配：如果需要在其他平面（比如XZ平面）绘制圆弧，只需要修改坐标计算逻辑和法向量即可（例如XZ平面的法向量是Y轴方向）。
• 法向量：法向量决定了3D物体如何反射光线，如果法向量设置错误，物体可能会显示为黑色或者颜色异常。

内容的提问来源于stack exchange，提问作者pranoti karankot