Viewport3D content size

Question

i have a Viewport3D that contains an Image, here's my code:

<Window>
    <Window.Resources>
    <MaterialGroup x:Key="mat1" >
            <DiffuseMaterial >
                <DiffuseMaterial.Brush >
                    <VisualBrush >
                        <VisualBrush.Visual >
                            <Grid Width="270" Height="638" Background="Red">
                                <Image Width="270" Height="638" Source="screenshot-1.Png"></Image>
                            </Grid>
                        </VisualBrush.Visual >
                    </VisualBrush >
                </DiffuseMaterial.Brush >
            </DiffuseMaterial >
        </MaterialGroup>
    </Window.Resources >
    <Grid>
        <Viewport3D x:Name="vp" UIElement.ClipToBounds ="False" Height="638" UIElement.IsHitTestVisible ="False" RenderOptions.EdgeMode ="Unspecified" >
            <Viewport3D.Camera >
                <PerspectiveCamera x:Name="camera" ProjectionCamera.Position="0,0,5" ProjectionCamera.LookDirection ="0,0,-1" PerspectiveCamera.FieldOfView ="28" />
            </Viewport3D.Camera>
            <Viewport3D.Children >
                <ModelVisual3D >
                    <ModelVisual3D.Content >
                        <SpotLight PointLightBase.Position="0,0,30" SpotLight.Direction ="0,0,-1" Light.Color ="white" />
                    </ModelVisual3D.Content>
                </ModelVisual3D>

                <ModelVisual3D >
                    <ModelVisual3D.Content >
                        <GeometryModel3D x:Name="gm3d" Material="{StaticResource mat1}" >
                            <GeometryModel3D.Geometry >
                                <MeshGeometry3D x:Name="plane3d" MeshGeometry3D.Normals ="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1" MeshGeometry3D.TextureCoordinates ="0,1 1,1 1,0 1,0 0,0 0,1" MeshGeometry3D.Positions ="-1,-1,1 1,-1,1 1,1,1 1,1,1 -1,1,1 -1,-1,1" />
                            </GeometryModel3D.Geometry>
                            <Model3D.Transform >
                                <RotateTransform3D >
                                    <RotateTransform3D.Rotation >
                                        <AxisAngleRotation3D AxisAngleRotation3D.Axis="0,1,0" AxisAngleRotation3D.Angle ="0" x:Name ="rAngle" />
                                    </RotateTransform3D.Rotation>
                                </RotateTransform3D>
                            </Model3D.Transform>
                        </GeometryModel3D>
                    </ModelVisual3D.Content>
                </ModelVisual3D>
            </Viewport3D.Children>
        </Viewport3D>

        <Button Height="20" Width="30" VerticalAlignment="Top" HorizontalAlignment="Left" Click="Button_Click_2"></Button>
    </Grid>
</Window>

The problem is that the Image size is supposed to be like this:

but it looks like this when using the Viewport3D:

Is there anyone could help me, please?

Answer 1

The simple explanation to this is that you are putting a rectangular image on a square face.

A little more detailed explanation is that your MeshGeometry3D.TextureCoordinates defines two triangles that cover your rectangular image and squeezes them into a square area defined by the values in MeshGeometry3D.Positions.

Now there are many solutions depending on what you want to achieve. Let's start with a simple one:

Change your brush to have a square image. This will conserve the image's aspect ratio since by default, Image.Stretch is Uniform. Note that I have also changed the background to Transparent.

    <MaterialGroup x:Key="mat1" >
        <DiffuseMaterial >
            <DiffuseMaterial.Brush >
                <VisualBrush >
                    <VisualBrush.Visual >
                        <Grid Width="800" Height="800" Background="Transparent">
                            <Image Source="screenshot-1.Png"></Image>
                        </Grid>
                    </VisualBrush.Visual >
                </VisualBrush >
            </DiffuseMaterial.Brush >
        </DiffuseMaterial >
    </MaterialGroup>