如何在WPF中绘制3D曲线？

Question

Is it possible to draw a 3D curve in WPF? ie Which classes do I need? Can you give me so code snippets.

Answer 1

To render a 3D scene in WPF, you have to use an element called ViewPort3D . This has a Camera , a collection of Visual3D . A concrete sub type of Visual3D is ModelVisual3D . This visual helps render the Model3D . All the 3D shapes are represented by a GeometryModel3D or the more complex Model3DGroup (all derive from Model3D ). We just care about the property GeometryModel3D.Geometry (of type Geometry3D ) here. Currently, WPF just supports only 1 kind of Geometry3D called MeshGeometry3D . But this geometry consists of a large number of triangles. To define the triangles, it has a collection of Point3D s ( Positions ) representing the vertices of the triangles and a collection of int ( TriangleIndices ) used to indicate how to connect the vertices (saved in Positions ) to make the actual triangles.

That means the curve you want to draw should have some shape, such as some kind of cylinder (like vermicelli) or just like a strip of cloth... Anyway it's not easy. The following demo code renders the curve as a thin strip (not round), however in fact we make it so thin that you can just see it looks like a line (depending on how close we view the scene).

As I said above, what we need to build the curve is fill the info ( Positions and TriangleIndices ) for a MeshGeometry3D . We need some equation of the curve, make some loop to get a collection of Point3Ds (belong to the curve) and at the same time fill the TriangleIndices appropriately.

Here is the code detail:

XAML :

<Grid Name="grid">        
    <Viewport3D>
        <Viewport3D.Camera>
            <PerspectiveCamera Position="55,55,55" LookDirection="-1,-1,-1"
                               UpDirection="0,1,0" FieldOfView="20"/>
        </Viewport3D.Camera>
        <Viewport3D.Children>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <Model3DGroup>
                        <DirectionalLight Color="White" Direction="1,0,-1"/>
                        <AmbientLight Color="Black"/>
                        <GeometryModel3D>
                            <GeometryModel3D.Material>
                                <MaterialGroup>
                                   <DiffuseMaterial Brush="Red"/>
                                   <EmissiveMaterial Brush="#330000ff"/>
                                </MaterialGroup>
                            </GeometryModel3D.Material>
                            <GeometryModel3D.BackMaterial>
                                <MaterialGroup>
                                    <DiffuseMaterial Brush="Red"/>
                                    <EmissiveMaterial Brush="#330000ff"/>
                                </MaterialGroup>
                            </GeometryModel3D.BackMaterial>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D x:Name="geo"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Transform>
                                <RotateTransform3D>
                                    <RotateTransform3D.Rotation>
                                        <AxisAngleRotation3D Axis="0,1,0" 
                                                        Angle="0" x:Name="rot"/>
                                    </RotateTransform3D.Rotation>
                                </RotateTransform3D>
                            </GeometryModel3D.Transform>
                        </GeometryModel3D>
                    </Model3DGroup>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D.Children>
        <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="rot">
                        <DoubleAnimation Storyboard.TargetProperty="Angle" By="360"
                                     RepeatBehavior="Forever" Duration="00:00:10"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Viewport3D.Triggers>
    </Viewport3D>
</Grid>

Note about the Name of the MeshGeometry3D in XAML code is geo , we need to refer to this to build the curve using code.

Code behind :

int k = 0;
for (float n = 0f; n < 1; n += 0.01f, k++) {
     //calculate the current Point3D based on the equations of the curve
     var x = -13 * Math.Pow(n, 3) - 12 * n * n;
     var y = 35 * Math.Pow(n, 5) - 13 * n * n + 3 * n + 1;
     var z = -30 * Math.Pow(n, 3) + 20 * n * n - n - 1;
     //the current Point3D
     var p = new Point3D(x, y, z);
     //here is where we make it thin, 
     //you can replace .1 with such as 10 to enlarge the strip
     var u = new Point3D(x, y - .1, z);
     geo.Positions.Add(p);
     geo.Positions.Add(u);                                              
     if (k > 0) {
          geo.TriangleIndices.Add(k);
          geo.TriangleIndices.Add(k - 1);
          geo.TriangleIndices.Add(k + 1);                    
          geo.TriangleIndices.Add(k);                    
     }
     geo.TriangleIndices.Add(k);
     geo.TriangleIndices.Add(k + 1);
     k++;
 }

NOTE : I highly recommend you to read about basic 3D concepts in WPF first, at least you should understand how to connect the points (in Positions ) to indicate the triangle surfaces as what you want. Once understand that, you can understand the code above.