Wpf3d learning and cube Rendering

 

Take this as a good start! I 've always been too lazy. Sticking to writing articles is a good start! I happened to be studying wpf3d recently. I also organized this article to improve my writing skills. Take care of new users!

This article first describes the elements in 3D scenarios in WPF using a simple cube.

I will give a brief explanation of my skills. If you are not clear about it, you can go to http://msdn.microsoft.com/zh-cn/library/ms747437.aspx. the soft description is clear.

Let's talk about some basic things first.

Three Coordinate System

 
In the 3-D coordinate system, the origin is located in the center of the rendering area (that is, the container Center), the positive value on the X axis is facing to the right, but the positive value on the Y axis is facing up, the positive value on the Z axis is oriented outward from the origin to the observer.

Camera

In the following example, we will use the perspectivecamera camera.

Perspectivecamera specifies the projection from a 3-D model to a 2-D visual graph. This projection includes shorter pivoting.
In other words, perspectivecamera describes the intercept of each plane to a certain horizontal point. The closer the object is to the camera, the larger the object is. The smaller the object is to be farther away from the camera.

Create cube

Let's start our example.

3D scenarios

Create a 3D scenario.

<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="350" Width="525">        <Grid>            <Viewport3D x:Name="Cube">            </Viewport3D>        </Grid></Window>

Camera

Since it is a 3D scenario, there must be an observation direction, that is, the camera. Add a camera to a 3D scenario. Here we use the perspective camera perspectivecamera.

        <Grid>            <Viewport3D>                <Viewport3D.Camera>                    <PerspectiveCamera Position="0,0,8" x:Name="camera"></PerspectiveCamera>                </Viewport3D.Camera>            </Viewport3D>        </Grid>

Perspectivecamera has many attributes. the following attributes are commonly used:

Position

Obtains or sets the camera position in the world coordinate. (Inherited from projectioncamera .)

Fieldofview

Gets or sets a value that indicates the horizontal angle of the camera.

Lookdirection

Gets or sets vector3d that defines the camera's shooting direction in the world coordinates. (Inherited from Projectioncamera .)

Nearplanedistance

Gets or sets a value that specifies the distance from the camera to the near-cut plane of the camera. (Inherited from Projectioncamera .)

Farplanedistance

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

Updirection

Gets or sets vector3d that defines the camera's upward direction. (Inherited from Projectioncamera .)

Now we start from the basics and only define the attribute of position. (0, 0, 8) indicates that the camera is 8 away from the screen.

Model

The camera also has it. Now we can define the cube model. We all know that cubes have six faces, so we need to define six geometrymodel3d.

   <Viewport3D>            <Viewport3D.Camera>                <PerspectiveCamera Position="0,0,8" x:Name="camera"></PerspectiveCamera>            </Viewport3D.Camera>            <Viewport3D.Children>              <ModelVisual3D>                    <ModelVisual3D.Content>                        <Model3DGroup >                            <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>                        </Model3DGroup>                    </ModelVisual3D.Content>                </ModelVisual3D>            </Viewport3D.Children>        </Viewport3D>

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

Meshgeometry3d is used to generate a triangle primitive in a 3-D shape. This is too abstract, that is, you should define your model framework.

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

With these four points, you should start to draw triangle elements, that is, to concatenate points. Triangleindices = ", 2, 3", which means connecting the three vertices 0, 1, and 2 to form a triangle, link the three vertices 0, 2, and 3 to form another triangle. Here is a tip. For my understanding, if we establish a triangle that connects the vertex counterclockwise, the triangle is field oriented. If it is clockwise, you can try triangleindices = ", 2, 1 ". In this way, a plane shown in is drawn.

We define green. Why is it black. It's dark. Of course it's black! We lack light.

        <Viewport3D>            <Viewport3D.Camera>                <PerspectiveCamera Position="0,0,8" x:Name="camera"></PerspectiveCamera>            </Viewport3D.Camera>            <Viewport3D.Children>                <ModelVisual3D>                    <ModelVisual3D.Content>                        <Model3DGroup >                            <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>                        </Model3DGroup>                    </ModelVisual3D.Content>                </ModelVisual3D>                <ModelVisual3D x:Name="light">                    <ModelVisual3D.Content>                        <AmbientLight></AmbientLight>                    </ModelVisual3D.Content>                </ModelVisual3D>            </Viewport3D.Children>        </Viewport3D>

With the red code, there will be light, and the light will turn green.

Next we will give you some light. You can try it on your own.

• Ambientlight: the ambient light provided by ambientlight illuminates all objects in a consistent manner, regardless of the object's position or direction.

• Directionallight: illuminating like a distant light source. Specify the direction of light
  Vector3d, but no position is specified for the direction light.

• Pointlight: illuminating like a nearby light source. Pointlight
  Has a position and emits light from it. Objects in a scenario are illuminated based on the position and distance of the object relative to the light source. Pointlightbase exposes the range attribute, which determines a distance. When the distance is exceeded, the model cannot be illuminated by the light source. Pointlight
  Multiple attenuation attributes are also exposed to determine how the brightness of a light source decreases as the distance increases. You can specify a constant, linear, or quadratic interpolation algorithm for Attenuation of a light source.

• Spotlight: inherited from pointlight. Spotlight
  Is similar to pointlight, but it has both location and direction. They place light in the conical area (in degrees) set by the innerconeangle and outerconeangle attributes.

Now, we have made a face. Then, repeat the above action to complete the other five faces.

    <Grid >        <Viewport3D Margin="10">            <Viewport3D.Camera>                <PerspectiveCamera Position="0,0,8" x:Name="camera"></PerspectiveCamera>            </Viewport3D.Camera>            <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="Gray"/>                                </GeometryModel3D.Material>                                <GeometryModel3D.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,1,2 0,2,3">                                    </MeshGeometry3D>                                </GeometryModel3D.Geometry>                            </GeometryModel3D>                            <GeometryModel3D  x:Name="F5">                                <GeometryModel3D.Material>                                    <DiffuseMaterial Brush="Yellow"/>                                </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.Geometry>                            </GeometryModel3D>                        </Model3DGroup>                    </ModelVisual3D.Content>                </ModelVisual3D>                <ModelVisual3D x:Name="light">                    <ModelVisual3D.Content>                        <AmbientLight></AmbientLight>                    </ModelVisual3D.Content>                </ModelVisual3D>            </Viewport3D.Children>        </Viewport3D>    </Grid>

So far, the cube model has been created. You can use blend to rotate it back and forth!

The fill color of each face is different, so the cube is constructed by six faces.

So how can we build a green cube on all sides? Is it so troublesome. We understand that position represents vertices. A cube has eight vertices. Can we build a cube from these eight vertices?

<Grid >        <Viewport3D Margin="10">            <Viewport3D.Camera>                <PerspectiveCamera Position="0,0,8" x:Name="camera"></PerspectiveCamera>            </Viewport3D.Camera>            <Viewport3D.Children>                <ModelVisual3D>                    <ModelVisual3D.Content>                            <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 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>                    </ModelVisual3D.Content>                </ModelVisual3D>                <ModelVisual3D x:Name="light">                    <ModelVisual3D.Content>                        <AmbientLight></AmbientLight>                    </ModelVisual3D.Content>                </ModelVisual3D>            </Viewport3D.Children>        </Viewport3D>    </Grid>

In blend, view the following figure (transformed ):

Well, the construction of the cube ends here.

P.s is not easy. I wrote my own blog for the first time. If it is not good, don't spray it. It takes us an hour! I also just learned this WPF 3D. I will keep recording it after I add an animation and control it in 3D! New guy on the road, big and small don't laugh!