[C#]WPF 3D 绘制一个正方体并调整视场角

大部分源码参考Github，是一本名为WPF-3D的书的代码，有条件的可以买下实体书。
本文源码：Cube.zip

• • • xml写法
    • 调整相机视场角
    • cs写法

若只是希望新建一个下面这样简单的3D图形，那么只需修改xml就能实现。

其主要分为两个部分，如下面的代码所示，其中ModelVisual3D即位集合模型，而

其中，相机部分主要有四个参数，分别是位置Position，视角LookDirection，视场角FieldOfView。

第四个参数upDirection用于规定正向，相当于照片拍出来之后要以哪边为正。

接下来，Model3DGroup则表示即将绘制的几何体，其中最重要的当然是GeometryModel3D，用于规定生成几何体的点。

在WPF中，三维图形必须通过面的形式展现出来，而每生成一个面，则需要三个点。也就是说，通过一个又一个的三角形来拼接成几何体的表面。

所以，尽管希望生成一个正方体，但并不可以让正方体边上的四边形作为最小的面元。

在设置好三维图形的几何要素之后，则可设置其表面颜色和光线颜色。其中DiffuseMaterial中的Brush属性记为几何体表面颜色。

AmbientLight和DirectionLight分别代表背景光和前景光。

和位置、方向这两个参数相比，视场角并不是那么容易理解，毕竟人眼的视场角几乎是恒定的，所以体会不到视场角发生变化所带来的视野的不同。

所以接下来新建一个slider来绑定视场角，从而直观地感受一下视场角所带来的差别

其代码为

此外，需要将PerspectiveCamera中的FieldOfView改为FieldOfView = "{Binding Value, ElementName=sAngle}"。

将代码全部写在xml端虽然很便携很直观，但在涉及到某些交互操作时，未必十分灵活。好在任何xml端的代码都可以写在cs端

// 窗口加载时执行
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // 定义WPF组件
    ModelVisual3D visual3d = new ModelVisual3D();
    Model3DGroup group3d = new Model3DGroup();
    //对应xaml中ModelVisual3D.Content
    visual3d.Content = group3d; 
    //visual3d是mainViewport的子控件
    mainViewport.Children.Add(visual3d);

    //定义相机、光线和模型.
    DefineCamera(mainViewport);
    DefineLights(group3d);
    DefineModel(group3d);
}

// 定义相机
private void DefineCamera(Viewport3D viewport)
{
    Point3D p = new Point3D(1.5, 2, 3);
    Vector3D lookDirection = new Vector3D(-p.X, -p.Y, -p.Z);
    Vector3D upDirection = new Vector3D(0, 1, 0);
    double fieldOfView = 60;
    //对应PerspectiveCamera的四个参数
    PerspectiveCamera camera = new PerspectiveCamera(
        p, lookDirection, upDirection, fieldOfView);

    viewport.Camera = camera;
}

// 定义光线.
private void DefineLights(Model3DGroup group)
{
    group.Children.Add(new AmbientLight(Colors.Gray));
    Vector3D direction = new Vector3D(1, -2, -3);
    group.Children.Add(new DirectionalLight(Colors.Gray, direction));
}

接下来是比较复杂的定义模型，其实并不复杂，只是点有点多，如果像写xaml那样写，强迫症可能受不了。

考虑到正方体共有8个顶点，6个面，每个面需要两个三角形，则一共需要12个三角形，总计36组顶点号。

对于每个正方形而言，若生成两个三角形，由于有一条重合的边，故而四个点累计使用6次。若想让点号递增时显得自然一些，则可以让每个面生成四个点，即总计24个点。如此一来，拼接点号为0,1,2,3的正方形，只需用到0,1,2和2,3,0两组点即可。

而正方体的六个面的点的坐标也很有特点，即必有一个坐标轴的分量是不变的，而另外两个坐标轴分量则遍历所有可能的取值。这个逻辑相对来说有些复杂，所以就不改了。

最终得到cs代码如下。

// 定义模型
private void DefineModel(Model3DGroup group)
{
    // Create the geometry.
    MeshGeometry3D mesh = new MeshGeometry3D();

    // Define the positions.
    Point3D[] points =
    {
        new Point3D(-1, -1, -1), new Point3D(1, -1, -1),
        new Point3D(1, -1, 1), new Point3D(-1, -1, 1),
        new Point3D(-1, -1, 1), new Point3D(1, -1, 1),
        new Point3D(1, 1, 1), new Point3D(-1, 1, 1),
        new Point3D(1, -1, 1), new Point3D(1, -1, -1),
        new Point3D(1, 1, -1), new Point3D(1, 1, 1),
        new Point3D(1, 1, 1), new Point3D(1, 1, -1),
        new Point3D(-1, 1, -1), new Point3D(-1, 1, 1),
        new Point3D(-1, -1, 1), new Point3D(-1, 1, 1),
        new Point3D(-1, 1, -1), new Point3D(-1, -1, -1),
        new Point3D(-1, -1, -1), new Point3D(-1, 1, -1),
        new Point3D(1, 1, -1), new Point3D(1, -1, -1),
    };
    foreach (Point3D point in points) mesh.Positions.Add(point);

    // Define the triangles.
    Tuple[] triangles = new Tuple[12];
    for (int i = 0; i < triangles.Length; i++)
    {
        int tmp = i%2==0 ? 2 : -2;
        triangles[i] = new Tuple(
            2 * i, 2 * i + 1, 2 * i + tmp);
    }

    foreach (var tup in triangles)
    {
        mesh.TriangleIndices.Add(tup.Item1);
        mesh.TriangleIndices.Add(tup.Item2);
        mesh.TriangleIndices.Add(tup.Item3);
    }

    DiffuseMaterial material = new DiffuseMaterial(Brushes.LightBlue);
    GeometryModel3D model = new GeometryModel3D(mesh, material);
    group.Children.Add(model);
}