[WPF] 立方体 (cube)

3Dグラフィックスで立方体(cube)を作成します。XAMLだけで作成します。

1. まずは立方体を作ってみる

最初に、まずは立方体を作ってみましょう。

環境：

Visual Studio 2015 pro., C#, .NET Framework 4.5
OS: Windows10 home

[実行結果]

立方体 3D 表示例

[立方体の頂点座標]

立方体の頂点座標付き図

[プログラムソース "MainWindow.xaml"]

<Window x:Class="Qube.MainWindow"
        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"
        xmlns:local="clr-namespace:Qube"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="640">
    <Grid>
        <Viewport3D Margin="10">
            <Viewport3D.Camera>
                <PerspectiveCamera Position="-4,4,9" LookDirection="4,-4,-9" UpDirection="0,1,0" FieldOfView="50"/>
            </Viewport3D.Camera>

            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <Model3DGroup>
                        <DirectionalLight Direction="2,-10,-2"/>
                        <GeometryModel3D>

                            <!-- 立方体モデル -->
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D>
                                    <!-- 頂点 -->
                                    <MeshGeometry3D.Positions>
                                        -2, 2, -2
                                        2, 2, -2
                                        2, 2, 2
                                        -2, 2, 2
                                        -2, -2, -2
                                        2, -2, -2
                                        2, -2, 2
                                        -2, -2, 2
                                    </MeshGeometry3D.Positions>

                                    <!-- 三角形 -->
                                    <MeshGeometry3D.TriangleIndices>
                                        <!-- 底面 -->
                                        4,5,7
                                        5,6,7
                                        <!-- 奥面 -->
                                        5,4,0
                                        0,1,5
                                        <!-- 左面 -->
                                        3,0,4
                                        4,7,3
                                        <!-- 右面 -->
                                        1,2,5
                                        2,6,5
                                        <!-- 上面 -->
                                        0,2,1
                                        2,0,3
                                        <!-- 前面 -->
                                        2,3,6
                                        3,7,6
                                    </MeshGeometry3D.TriangleIndices>
                                </MeshGeometry3D>
                            </GeometryModel3D.Geometry>

                            <!-- マテリアル -->
                            <GeometryModel3D.Material>
                                <DiffuseMaterial Brush="LightBlue"/>
                            </GeometryModel3D.Material>
                            <GeometryModel3D.BackMaterial>
                                <DiffuseMaterial Brush="LightGray"/>
                            </GeometryModel3D.BackMaterial>
                        </GeometryModel3D>
                    </Model3DGroup>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D>
    </Grid>
</Window>

2. 上面と他の色を変える（複数の "GeometryModel3D" でモデルを作る）

<GeometryModel3D> を複数登録することで、部分ごとに異なる色を塗れるようにします。

環境：

Visual Studio 2015 pro., C#, .NET Framework 4.5
OS: Windows10 home

[実行結果]

図：上面と他の面の色を変えた例

[プログラムソース "MainWindow.xaml"]

<Window x:Class="Qube_2.MainWindow"
        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"
        xmlns:local="clr-namespace:Qube_2"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="640">
    <Grid>
        <Viewport3D Margin="10">

            <Viewport3D.Camera>
                <PerspectiveCamera Position="-4,4,9" LookDirection="4,-4,-9" UpDirection="0,1,0" FieldOfView="50"/>
            </Viewport3D.Camera>

            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <Model3DGroup>
                        <!-- 光源 -->
                        <DirectionalLight Direction="2,-10,-2"/>

                        <!-- 箱、上面以外 -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D>
                                    <!-- 頂点 -->
                                    <MeshGeometry3D.Positions>
                                        -2, 2, -2
                                        2, 2, -2
                                        2, 2, 2
                                        -2, 2, 2
                                        -2, -2, -2
                                        2, -2, -2
                                        2, -2, 2
                                        -2, -2, 2
                                    </MeshGeometry3D.Positions>

                                    <!-- 三角形 -->
                                    <MeshGeometry3D.TriangleIndices>
                                        <!-- 底面 -->
                                        4,5,7
                                        5,6,7
                                        <!-- 奥面 -->
                                        5,4,0
                                        0,1,5
                                        <!-- 左面 -->
                                        3,0,4
                                        4,7,3
                                        <!-- 右面 -->
                                        1,2,5
                                        2,6,5
                                        <!-- 前面 -->
                                        2,3,6
                                        3,7,6
                                    </MeshGeometry3D.TriangleIndices>
                                </MeshGeometry3D>
                            </GeometryModel3D.Geometry>

                            <!-- マテリアル -->
                            <GeometryModel3D.Material>
                                <DiffuseMaterial Brush="Cyan"/>
                            </GeometryModel3D.Material>
                            <GeometryModel3D.BackMaterial>
                                <DiffuseMaterial Brush="LightGray"/>
                            </GeometryModel3D.BackMaterial>
                        </GeometryModel3D>

                        <!-- 箱の上面 -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D>
                                    <!-- 頂点 -->
                                    <MeshGeometry3D.Positions>
                                        -2, 2, -2
                                        2, 2, -2
                                        2, 2, 2
                                        -2, 2, 2
                                    </MeshGeometry3D.Positions>

                                    <!-- 三角形 -->
                                    <MeshGeometry3D.TriangleIndices>
                                        <!-- 上面 -->
                                        0,2,1
                                        2,0,3
                                    </MeshGeometry3D.TriangleIndices>
                                </MeshGeometry3D>
                            </GeometryModel3D.Geometry>

                            <!-- マテリアル -->
                            <GeometryModel3D.Material>
                                <DiffuseMaterial Brush="Yellow"/>
                            </GeometryModel3D.Material>
                            <GeometryModel3D.BackMaterial>
                                <DiffuseMaterial Brush="LightGray"/>
                            </GeometryModel3D.BackMaterial>
                        </GeometryModel3D>
                    </Model3DGroup>
                </ModelVisual3D.Content>
            </ModelVisual3D>

        </Viewport3D>
    </Grid>
</Window>

3. <ModelUIElement3D>で立方体を作る

.NET3.5以降で使用できる<ModelUIElement3D>で前述のモデルをXAMLで表記してみます。
内容は同じ内容で作成します。
<ModelUIElement3D>はマウスクリックによる3Dモデル操作などを行う際に必要となります。
この表記方法を標準とした方が何かと都合が良いかもしれません。

全く同じなので、実行時の画像は掲載を省略します。

[プログラムソース "MainWindow.xaml"]

<Window x:Class="Qube_3.MainWindow"
        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"
        xmlns:local="clr-namespace:Qube_3"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="640">
    <Grid>
        <Viewport3D Margin="10">

            <!-- カメラ -->
            <Viewport3D.Camera>
                <PerspectiveCamera Position="-4,4,9" LookDirection="4,-4,-9" UpDirection="0,1,0" FieldOfView="50"/>
            </Viewport3D.Camera>

            <!-- ライト -->
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <DirectionalLight Direction="2,-10,-2"/>
                    <!--
                    <AmbientLight Color="White"/>
                    -->
                </ModelVisual3D.Content>
            </ModelVisual3D>

            <!-- モデル -->
            <ContainerUIElement3D>
                <ModelUIElement3D>
                    <ModelUIElement3D.Model>
                        <Model3DGroup>
                            <!-- 箱、上面以外 -->
                            <GeometryModel3D>
                                <GeometryModel3D.Geometry>
                                    <MeshGeometry3D>
                                        <MeshGeometry3D.Positions>
                                            -2, 2, -2
                                            2, 2, -2
                                            2, 2, 2
                                            -2, 2, 2
                                            -2, -2, -2
                                            2, -2, -2
                                            2, -2, 2
                                            -2, -2, 2
                                        </MeshGeometry3D.Positions>
                                        
                                        <MeshGeometry3D.TriangleIndices>
                                            <!-- 底面 -->
                                            4,5,7
                                            5,6,7
                                            <!-- 奥面 -->
                                            5,4,0
                                            0,1,5
                                            <!-- 左面 -->
                                            3,0,4
                                            4,7,3
                                            <!-- 右面 -->
                                            1,2,5
                                            2,6,5
                                            <!-- 前面 -->
                                            2,3,6
                                            3,7,6
                                        </MeshGeometry3D.TriangleIndices>
                                    </MeshGeometry3D>
                                </GeometryModel3D.Geometry>
                                <GeometryModel3D.Material>
                                    <DiffuseMaterial Brush="Cyan"/>
                                </GeometryModel3D.Material>
                                <GeometryModel3D.BackMaterial>
                                    <DiffuseMaterial Brush="LightGray"/>
                                </GeometryModel3D.BackMaterial>
                            </GeometryModel3D>
                            <!-- 箱の上面 -->
                            <GeometryModel3D>
                                <GeometryModel3D.Geometry>
                                    <MeshGeometry3D>
                                        <MeshGeometry3D.Positions>
                                            -2, 2, -2
                                            2, 2, -2
                                            2, 2, 2
                                            -2, 2, 2
                                        </MeshGeometry3D.Positions>
                                        <MeshGeometry3D.TriangleIndices>
                                            <!-- 上面 -->
                                            0,2,1
                                            2,0,3
                                        </MeshGeometry3D.TriangleIndices>
                                    </MeshGeometry3D>
                                </GeometryModel3D.Geometry>
                                <GeometryModel3D.Material>
                                    <DiffuseMaterial Brush="Yellow"/>
                                </GeometryModel3D.Material>
                                <GeometryModel3D.BackMaterial>
                                    <DiffuseMaterial Brush="LightGray"/>
                                </GeometryModel3D.BackMaterial>
                            </GeometryModel3D>
                        </Model3DGroup>
                    </ModelUIElement3D.Model>
                </ModelUIElement3D>
            </ContainerUIElement3D>

        </Viewport3D>
    </Grid>
</Window>

サンプルプログラム

サンプルプログラムダウンロード

ライセンス

本ページの情報は、特記無い限り下記 MIT ライセンスで提供されます。

The MIT License (MIT)

Copyright © 2015-2022 Kinoshita Hidetoshi

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

参考

書籍「プログラミングWPF C#編」第10章 3Dグラフィックス
ModelUIElement3D クラス (System.Windows.Media.Media3D) | Microsoft Learn
https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.media.media3d.modeluielement3d?view=netframework-4.8
WPFで滑らかマウス操作を実現 - Qiita
https://qiita.com/ProOJI/items/0c34ba3104f8b4129a79

変更履歴

2022-08-10	-	ページデザイン更新
2015-08-06	-	新規作成

Programming Items トップページ

プライバシーポリシー