WPF3D learning, drawing of cubes

Original: Wpf3d learning, drawing of cubes

Take this as a good start! Have been too lazy, insist on writing the article is a good start! I happen to be studying WPF3D this piece of knowledge recently, also in order to practice his writing level, finishing this article. Novice on the road, a lot of attention!

In this paper, the elements in three-dimensional scenes in WPF are systematically elaborated in a simple cube.

Practice skills, I will simply say, it is not clear that we can go to http://msdn.microsoft.com/zh-cn/library/ms747437.aspx here, Microsoft said very clearly.

First of all, some basic stuff.

Three-bit coordinate system

In A-Z coordinate system, the origin is at the center of the rendering area (that is, the center of the container), the positive value on the x-axis is to the right, but the positive value on the y-axis is upward, and the positive value on the axis is outward from the origin toward the observer.

Camera

In the example that follows, we use the Perspectivecamera camera.

Perspectivecamera Specifies the projection of the 2-d visual surface. This projection includes perspective shortening. In other words, thePerspectivecamera describes the flat-cut body where each polygon is clustered to a certain level. the closer the object is to the camera, the larger it becomes, and the farther away it appears the smaller.

Creation of cubes

Let's start with our example.

3D scene

Create a 3D scene.

<window        xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x= "http// Schemas.microsoft.com/winfx/2006/xaml "        xmlns:d=" http://schemas.microsoft.com/expression/blend/2008 "xmlns: Mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable= "D" x:class= " Wpfapplication1.mainwindow "        title=" MainWindow "height=", width= "525" >        <Grid>          <span style= "COLOR: #ff0000;" >  <viewport3d x:name= "Cube" >            </Viewport3D></span>        </Grid></Window>

Camera

Since it is a 3D scene, of course it has to be the direction of observation, that is, the camera. Add a camera to the 3D scene. Here we use the perspective camera Perspectivecamera .

        <Grid>            <Viewport3D>               <span style= "color: #ff0000;" > <Viewport3D.Camera>                    <perspectivecamera position= "0,0,8" x:name= "Camera" ></ perspectivecamera>                </Viewport3D.Camera></span>            </Viewport3D>        </Grid>

Perspectivecamera has a number of properties that are commonly used in the following sections:

Position

Gets or sets the camera position represented in world coordinates. (inherited from Projectioncamera.) ）

Fieldofview

Gets or sets a value that represents the horizontal view of the camera.

Lookdirection

Gets or sets the Vector3Dthat defines the camera's shooting direction in world coordinates. (inherited from Projectioncamera.) ）

Nearplanedistance

Gets or sets a value that specifies the distance of the camera to the camera's near clipping plane. (inherited from Projectioncamera.) ）

Farplanedistance

Gets or sets a value that specifies the distance to the camera of the camera's remote clipping plane. (inherited from Projectioncamera.) ）

Updirection

Gets or sets the Vector3Dthat defines the camera's upward direction. (inherited from Projectioncamera.) ）

We now start with the basics and define only the properties of the position. (0,0,8) meaning for the camera distance screen for 8.

Model

The camera is there, and now it's time to define the cube model. We all know that the cube has 6 faces, so we have to define 6 GeometryModel3D.

   <Viewport3D> <Viewport3D.Camera> <perspectivecamera position= "0,0,8" X:name= "C              Amera "></PerspectiveCamera> </Viewport3D.Camera> <Viewport3D.Children>                            <ModelVisual3D> <ModelVisual3D.Content> <model3dgroup > <span style= "color: #ff0000;"                                    ><GeometryModel3D> <GeometryModel3D.Material>                                <diffusematerial brush= "Green"/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <meshgeometry3d positions= "0,0,0                                2,0,0 2,2,0 0,2,0 "triangleindices=" 0,1,2 0,2,3 "> </MeshGeometry3D> </GeometryModel3D.Geometry> </geOmetrymodel3d></span> </Model3DGroup> </modelvisual3d.content&                Gt </ModelVisual3D> </Viewport3D.Children> </Viewport3D>

Material is the texture you want to fill the model with, we use green to fill it.

The MeshGeometry3D is used to generate triangle primitives for the shape of the. This explanation is too abstract to say that you should define your model framework.

positions= "0,0,0 2,0,0 2,2,0 0,2,0" defines four points.

With these four points, you should begin to draw a triangular primitive, which is to string up the dots. triangleindices= "0,1,2 0,2,3" means that the three vertices of 0, 1, 2 are connected together to form a triangle, and 0, 2, 3 vertices are connected together to form another triangle. Here is a technique, I would like to understand, in the establishment of the triangle, if it is a counter-clockwise connection vertex, then the establishment of the triangle is a vision-oriented, if the clockwise connection, is back to the field of view (outward), we can try triangleindices= "0,3,2 0,2,1". This will draw a face as shown.

We define green, why is it black? It's dark, and of course it's black! We lack light.

        <Viewport3D> <Viewport3D.Camera> <perspectivecamera position= "0,0,8" X:na                Me= "Camera" ></PerspectiveCamera> </Viewport3D.Camera> <Viewport3D.Children>  <ModelVisual3D> <ModelVisual3D.Content> <model3dgroup                                    > <GeometryModel3D> <GeometryModel3D.Material> <diffusematerial brush= "Green"/> </geometrymodel 3D. Material> <GeometryModel3D.Geometry> <meshge Ometry3d positions= "0,0,0 2,0,0 2,2,0 0,2,0" triangleindices= "0,1,2 0,2,3" > </mes Hgeometry3d> </GeometryModel3D.Geometry> </geometrym           Odel3d>             </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> <span style= "color: #ff0000;" > <modelvisual3d x:name= "Light" > <ModelVisual3D.Content> <ambi Entlight></ambientlight> </ModelVisual3D.Content> </modelvisual3d>& Lt;/span> </Viewport3D.Children> </Viewport3D>

Add the red code, there is light, there is light, it becomes green.

Next give everyone a few light, specific people can try it yourself.

• ambientlight: It provides ambient light that illuminates all objects in a consistent manner, regardless of the position or orientation of the object.

• directionallight: Illuminating like a distant light source. The Direction of the directional light is specified as Vector3D, but no position is specified for the directional light.

• pointlight : Illuminates like a nearby light source.   pointlight has a position and casts light from that position.     pointlightbase   public Range The   property, which determines a distance beyond which the model cannot be illuminated by the light source.   pointlight also exposes several attenuation properties that determine how the light's brightness decreases with increasing distance.   You can specify a constant, linear, or two interpolation algorithm for the attenuation of the light source.

• SpotLight: Inherit from pointlight . Spotlight is illuminated in a similar way to pointlight, but it has both a position and a direction.   They're in Innerconeangle and outerconeangle . the tapered area set by the property (specified in degrees) casts light.

Well, I've already made a face. Then repeat the above actions and draw all the other five faces.

    <grid > <viewport3d margin= "ten" > <Viewport3D.Camera> <perspectiv Ecamera position= "0,0,8" x:name= "Camera" ></PerspectiveCamera> </Viewport3D.Camera> &L T                        Viewport3d.children> <ModelVisual3D> <ModelVisual3D.Content>                                <model3dgroup > <geometrymodel3d x:name= "F1" >                                <GeometryModel3D.Material> <diffusematerial brush= "Green"/>                                    </GeometryModel3D.Material> <GeometryModel3D.Geometry>                                    <meshgeometry3d positions= "0,0,0 2,0,0 2,2,0 0,2,0" triangleindices= "0,2,1 0,3,2" >                       </MeshGeometry3D> </GeometryModel3D.Geometry>      </GeometryModel3D> <geometrymodel3d x:name= "F2" >                                <GeometryModel3D.Material> <diffusematerial brush= "Blue"/>                                    </GeometryModel3D.Material> <GeometryModel3D.Geometry>                                    <meshgeometry3d positions= "0,0,0 0,0,2 0,2,2 0,2,0" triangleindices= "0,1,2 0,2,3" >                            </MeshGeometry3D> </GeometryModel3D.Geometry>                                </GeometryModel3D> <geometrymodel3d x:name= "F3" > <GeometryModel3D.Material> <diffusematerial brush= "Gra Y "/> </GeometryModel3D.Material> <geometrymodel3          D.geometry>                          <meshgeometry3d positions= "0,0,0 0,0,2 2,0,2 2,0,0" triangleindices= "0,2,1 0,3,2" >                            </MeshGeometry3D> </GeometryModel3D.Geometry>                                </GeometryModel3D> <geometrymodel3d x:name= "F4" > <GeometryModel3D.Material> <diffusematerial brush= "Bisque" /> </GeometryModel3D.Material> <geometrymodel3d. geometry> <meshgeometry3d positions= "2,0,0 2,2,0 2,2,2 2,0,2" triangleindices= "0, 0,2,3 "> </MeshGeometry3D> </geometrymode l3d.geometry> </GeometryModel3D> <geometrymodel3d X:nam              E= "F5" >                  <GeometryModel3D.Material> <diffusematerial brush= "Yellow"/&                                Gt                                    </GeometryModel3D.Material> <GeometryModel3D.Geometry>                                    <meshgeometry3d positions= "0,2,2 2,2,2 2,2,0 0,2,0" triangleindices= "0,1,2 0,2,3" >                            </MeshGeometry3D> </GeometryModel3D.Geometry>                                </GeometryModel3D> <geometrymodel3d x:name= "F6" >                                <GeometryModel3D.Material> <diffusematerial brush= "Red"/>                                    </GeometryModel3D.Material> <GeometryModel3D.Geometry> <meshgeometry3d positions= "0,2,2 2,2,2 0,0,2 2,0,2" triangleindices= "0,2,3 0,3, 1 "> </MeshGeometry3D> </geometrymodel3d.geo                    Metry> </GeometryModel3D> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> <modelvisual3d x:name= "Light" &G                    T <ModelVisual3D.Content> <AmbientLight></AmbientLight> </mod elvisual3d.content> </ModelVisual3D> </Viewport3D.Children> </viewport3 D> </Grid>

At this point, the cube model has been established. You can use blend to turn around and try it!

The upper one is divided into 6 polygons to construct the cube because of the different fill color of each face.

So if a cube with all the faces is green, how can it be so troublesome? We understand that position represents vertices, and a cube has 8 vertices. So is it possible to build a cube from these 8 vertices?

<grid > <viewport3d margin= "ten" > <Viewport3D.Camera> <perspectivecam ERA position= "0,0,8" x:name= "Camera" ></PerspectiveCamera> </Viewport3D.Camera> <vi                           Ewport3d.children> <ModelVisual3D> <ModelVisual3D.Content> <span style= "color: #ff0000;"                                    > <geometrymodel3d x:name= "F1" > <GeometryModel3D.Material>                                <diffusematerial brush= "Green"/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <meshgeometry3d Posi tions="0,0,0 2,0,0 2,2,0 0,2,0 0,2,2 0,0,2 2,0,2 2,2,2" TriangleIndices="0,2,1 0,3,2 0,4,3 0,5,4 0,1,6 0,6,5 3,4,7 3,7,2 4                 , 5,6 4,6,7 7,6,1 7,1,2 "> </MeshGeometry3D>               </GeometryModel3D.Geometry> </GeometryModel3D></span> </ModelVisual3D.Content> </ModelVisual3D> <modelvisual3d x:name= "L ight "> <ModelVisual3D.Content> <ambientlight></ambientlight&gt                    ; </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D.Children> </v Iewport3d> </Grid>

The view graph in blend is as follows (transformed):

Well, the structure of the cube ends here.

P.S not easy Ah, the first time to write their own blog, not good do not spray, cost us two hours! I also just learned this WPF 3D, followed by animation added, 3D control, I will insist on the record! Novice on the road, the size of God mo laugh ha!

WPF3D learning, drawing of cubes