Question XAML 3D Cube Not Showing Correct.

F

f15e

Member
Joined
May 4, 2006
Messages
21
Programming Experience
Beginner
I've been writing desktop apps in VB for personal use for quite a while now. I recently started to dabble in the 3D world using XAML and decided to start off by creating a basic 3D cube with each cube face having a different color. I have run into some problems and now am asking for your help. Some of the cube faces only show up with one of the two triangles visible or the cube face won't show up at all no matter how I adjust the code. There is something I am missing but don't know what it is. I'm thinking that it may be the order I put the "MeshGeometry3D Positions" or the "TriangleIndices" (i.e. counter-clockwise). I also think that I have too many "MeshGeometry3D Positions" points for some of the cube faces but for some reason it seems to work; but not in all cases. It's best if I show you my code and hopefully someone could point out my mistakes and what I'm doing wrong. See code below with screen shot. I'd really appreciate any help you could provide.

<!-- ********************************************************************************************************** -->
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowState="Maximized"
Background="Black">


<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="30,25,30" LookDirection="-30,-25,-30" FieldOfView="60"/>

</Viewport3D.Camera>

<Viewport3D.Children>

<ModelVisual3D x:Name="Light">
<ModelVisual3D.Content>
<AmbientLight Color="White"/>
</ModelVisual3D.Content>
</ModelVisual3D>

<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup x:Name="House">


<!-- ********************************************************************************************************** -->
<GeometryModel3D x:Name="CubeSide_1">

<GeometryModel3D.Material>
<DiffuseMaterial Brush="Red"/>
</GeometryModel3D.Material>

<GeometryModel3D.BackMaterial>
<DiffuseMaterial Brush="Red"/>
</GeometryModel3D.BackMaterial>

<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 5,0,0 5,5,0 0,0,0 0,5,0 5,5,0"
TriangleIndices="0 2 1 0 4 2"/>
</GeometryModel3D.Geometry>

</GeometryModel3D>
<!-- ********************************************************************************************************** -->
<GeometryModel3D x:Name="CubeSide_2">

<GeometryModel3D.Material>
<DiffuseMaterial Brush="Blue"/>
</GeometryModel3D.Material>

<GeometryModel3D.BackMaterial>
<DiffuseMaterial Brush="Blue"/>
</GeometryModel3D.BackMaterial>

<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 0,5,5 0,5,0 0,0,0 0,0,5 0,5,5 0,5,0"
TriangleIndices="0 5 4 0 5 6"/>
</GeometryModel3D.Geometry>

</GeometryModel3D>
<!-- ********************************************************************************************************** -->
<GeometryModel3D x:Name="CubeSide_3">

<GeometryModel3D.Material>
<DiffuseMaterial Brush="Orange"/>
</GeometryModel3D.Material>

<GeometryModel3D.BackMaterial>
<DiffuseMaterial Brush="Orange"/>
</GeometryModel3D.BackMaterial>

<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 5,0,5 5,0,0 0,0,0 5,0,5 0,0,5 0,0,0"
TriangleIndices="0 7 1 0 7 6"/>
</GeometryModel3D.Geometry>

</GeometryModel3D>
<!-- ********************************************************************************************************** -->
<GeometryModel3D x:Name="CubeSide_4">

<GeometryModel3D.Material>
<DiffuseMaterial Brush="Purple"/>
</GeometryModel3D.Material>

<GeometryModel3D.BackMaterial>
<DiffuseMaterial Brush="Purple"/>
</GeometryModel3D.BackMaterial>

<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="5,5,5 5,5,0 0,5,0 5,5,5 0,5,0 0,5,5"
TriangleIndices="3 2 4 3 4 5"/>
</GeometryModel3D.Geometry>

</GeometryModel3D>
<!-- ********************************************************************************************************** -->
<GeometryModel3D x:Name="CubeSide_5">

<GeometryModel3D.Material>
<DiffuseMaterial Brush="Yellow"/>
</GeometryModel3D.Material>

<GeometryModel3D.BackMaterial>
<DiffuseMaterial Brush="Yellow"/>
</GeometryModel3D.BackMaterial>

<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="5,5,5 5,0,0 5,5,0 5,5,5 5,0,0 5,0,5 5,5,5"
TriangleIndices="3 1 2 3 7 1"/>
</GeometryModel3D.Geometry>

</GeometryModel3D>
<!-- ********************************************************************************************************** -->
<GeometryModel3D x:Name="CubeSide_6">

<GeometryModel3D.Material>
<DiffuseMaterial Brush="Green"/>
</GeometryModel3D.Material>

<GeometryModel3D.BackMaterial>
<DiffuseMaterial Brush="Green"/>
</GeometryModel3D.BackMaterial>

<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,5 5,0,5 0,5,5 5,5,5"
TriangleIndices="1 3 0 0 3 2"/>
</GeometryModel3D.Geometry>

</GeometryModel3D>
<!-- ********************************************************************************************************** -->
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
</Viewport3D>
</Window>
<!-- ********************************************************************************************************** -->

3D Cube.jpg

3D Cube Screenshot 1.jpg

3D Cube Screenshot 2.jpg

3D Cube Screenshot 3.jpg
 
Last edited:
Sort by date Sort by votes
I think you misunderstand how to use the TriangleIndices property. Also your XAML is long a tedious to read. Use resources when it makes sense, and use the short form when possible, it makes everything clearer. Also try to avoid naming things Side_1 etc, it's not descriptive and hard to read..

Here is your cube, redone:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:clr="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="407" Width="515">

    <Grid Background="Black" Margin="0">

        <Viewport3D>
            <Viewport3D.Camera>
                <PerspectiveCamera x:Name="camera" Position="30,25,30" LookDirection="-30,-25,-30" UpDirection="0,1,0" FieldOfView="20"  />
            </Viewport3D.Camera>

            <Viewport3D.Resources>
                <!--Define two variables for the opacity, one for the three back faces, another for the 3 front faces.-->
                <clr:Double x:Key="alphaFront">0.7</clr:Double>
                <clr:Double x:Key="alphaBack">1</clr:Double>
                <!--Define our brushes and set opacity to the appropriate level.-->
                <SolidColorBrush x:Key="brRed" Color="Red" Opacity="{StaticResource alphaBack}" />
                <SolidColorBrush x:Key="brBlue" Color="Blue" Opacity="{StaticResource alphaBack}" />
                <SolidColorBrush x:Key="brOrange" Color="Orange" Opacity="{StaticResource alphaBack}" />
                <SolidColorBrush x:Key="brYellow" Color="Yellow" Opacity="{StaticResource alphaFront}" />
                <SolidColorBrush x:Key="brGreen" Color="Green" Opacity="{StaticResource alphaFront}" />
                <SolidColorBrush x:Key="brPurple" Color="Purple" Opacity="{StaticResource alphaFront}" />
                <!--Define our painted materials using the brushes above.-->
                <DiffuseMaterial x:Key="matRed" Brush="{StaticResource brRed}" />
                <DiffuseMaterial x:Key="matBlue" Brush="{StaticResource brBlue}" />
                <DiffuseMaterial x:Key="matOrange" Brush="{StaticResource brOrange}" />
                <DiffuseMaterial x:Key="matGreen" Brush="{StaticResource brGreen}" />
                <DiffuseMaterial x:Key="matYellow" Brush="{StaticResource brYellow}" />
                <DiffuseMaterial x:Key="matPurple" Brush="{StaticResource brPurple}" />
                <!--Define the mesh geometry for each side of the cube.-->
                <MeshGeometry3D x:Key="meshRedSide" Positions="0,0,0 5,0,0 5,5,0 0,5,0" TriangleIndices="0 1 2 0 3 2" />
                <MeshGeometry3D x:Key="meshBlueSide" Positions="0,0,0 0,5,0 0,5,5 0,0,5" TriangleIndices="0 1 2 0 3 2" />
                <MeshGeometry3D x:Key="meshOrangeSide" Positions="0,0,0 0,0,5 5,0,5 5,0,0" TriangleIndices="0 1 2 0 2 3" />
                <MeshGeometry3D x:Key="meshYellowSide" Positions="5,5,5 5,0,0 5,5,0 5,0,5" TriangleIndices="0 1 2 0 1 3" />
                <MeshGeometry3D x:Key="meshGreenSide" Positions="0,0,5 0,5,5 5,5,5 5,0,5" TriangleIndices="0 3 2 2 1 0" />
                <MeshGeometry3D x:Key="meshPurpleSide" Positions="0,5,0 0,5,5 5,5,0 5,5,5" TriangleIndices="0 1 2 2 3 1" />
            </Viewport3D.Resources>

            <Viewport3D.Children>
                
                <!--Our basic ambient light source. Could add more light sources in here...-->
                <ModelVisual3D x:Name="Light">
                    <ModelVisual3D.Content>
                        <AmbientLight Color="White" />
                    </ModelVisual3D.Content>
                </ModelVisual3D>

                <ModelVisual3D x:Name="House">
                    <ModelVisual3D.Content>

                        <!--Here we define the 3D faces and group them into a cube. Take care of the order you add
                            each GeometryModel3D! Always start with the faces in the back, otherwise they will not be
                            rendered if they are hidden behind front faces when you add them. For an example of this,
                            move the OrangeSide in between GreenSide and PurpleSide. Since the front faces already exist,
                            and completely obstruct OrangeSide, it is never rendered.-->
                        <Model3DGroup x:Name="grpCube">
                            <GeometryModel3D x:Name="RedSide" Geometry="{StaticResource meshRedSide}"
                                             Material="{StaticResource matRed}" BackMaterial="{StaticResource matRed}" />

                            <GeometryModel3D x:Name="BlueSide" Geometry="{StaticResource meshBlueSide}"
                                             Material="{StaticResource matBlue}" BackMaterial="{StaticResource matBlue}" />

                            <GeometryModel3D x:Name="OrangeSide" Geometry="{StaticResource meshOrangeSide}"
                                             Material="{StaticResource matOrange}" BackMaterial="{StaticResource matOrange}" />

                            <GeometryModel3D x:Name="YellowSide" Geometry="{StaticResource meshYellowSide}"
                                             Material="{StaticResource matYellow}" BackMaterial="{StaticResource matYellow}" />

                            <GeometryModel3D x:Name="GreenSide" Geometry="{StaticResource meshGreenSide}"
                                             Material="{StaticResource matGreen}" BackMaterial="{StaticResource matGreen}" />

                            <GeometryModel3D x:Name="PurpleSide" Geometry="{StaticResource meshPurpleSide}"
                                             Material="{StaticResource matPurple}" BackMaterial="{StaticResource matPurple}" />

                        </Model3DGroup>

                    </ModelVisual3D.Content>
                </ModelVisual3D>

            </Viewport3D.Children>
                        
        </Viewport3D>
        
    </Grid>
</Window>


And the result:

XGahLMd.png
 
Last edited:
Upvote 0 Downvote

Similar threads

K
  • Question
Question Wpf different images on a 3d cube!
Replies
0
Views
4K
konhee93
K
Q
  • Question
Please Help import namespace
Replies
0
Views
3K
quddusaliquddus
Q

Share this page

Latest posts

Back
Top