WPF中3D控制元件的使用

ggtc發表於2024-06-26
3D控制元件

wpf使用了Directx,所有才能夠進行3D程式設計。
比較方便的是，3D模型也是宣告式的，就像普通控制元件一樣。
由於3D控制元件也是宣告式的，所以還可以利用binding改變其屬性
image

控制元件

  • Viewport3D
    這是一個3D視口，所有的3D控制元件都要放在這裡面。
    3D空間的基本元素是 相機、 光源、 物件。
<!--空間-->
<Viewport3D>
    <!--相機-->
    <Viewport3D.Camera>
        <PerspectiveCamera Position="1,0,10" LookDirection="-1,0,-10" UpDirection="0,0,1" FieldOfView="90" />
    </Viewport3D.Camera>
    <!--光源-->
    <ModelVisual3D>
        <ModelVisual3D.Content>
            <AmbientLight Color="White"/>
        </ModelVisual3D.Content>
    </ModelVisual3D>
    <!--可視物件-->
    <ModelVisual3D>
        <ModelVisual3D.Content>
            <!--幾何物件-->
            <GeometryModel3D>
                <!--物件網格-->
                <GeometryModel3D.Geometry>
                    <MeshGeometry3D Positions="0,0,0 0,1,0 1,1,0 1,0,0" TriangleIndices="1,3,0 2,3,1"/>
                </GeometryModel3D.Geometry>
                <!--物件材質-->
                <GeometryModel3D.Material>
                    <DiffuseMaterial Brush="Blue"/>
                </GeometryModel3D.Material>
                <GeometryModel3D.BackMaterial>
                    <DiffuseMaterial Brush="Black"/>
                </GeometryModel3D.BackMaterial>
            </GeometryModel3D>
        </ModelVisual3D.Content>
    </ModelVisual3D>
</Viewport3D>

  • PerspectiveCamera
    透視相機，這是最常用的相機。主要屬性是

    • Position 位置
    • LookDirection 朝向點
    • UpDirection 垂直方向
    • FieldOfView 視場角
    • 遠近裁剪面
      image

  • ModelVisual3D
    可視物件

    • GeometryModel3D
      代表一個幾何物件，比如矩形、正方體、球體
      • MeshGeometry3D
        幾何體的網格由 點雲 和使用點的索引宣告的 三角形 構成,三角形的正面由右手定則確定
      • Material
        材質，一般有漫反射材質、鏡面反射、自發光。還可以自己寫shader匯入為材質

  • Model3DGroup
    可以將多個可視物件當作子物件，整體上表現為一個物件

變換

ModelVisual3D可以進行3D變換，比如平移、旋轉、縮放、仿射。透過ModelVisual3D.Transform為其定義

紋理，在3D空間顯示2D控制元件

2D控制元件比如Button以紋理的方式對映到幾何體網格上
對於平面的紋理座標
紋理座標的起點是左上角
對映的方式是把原圖片壓縮成11的圖片
然後用一個小於11的紋理座標系在這個這個圖片上移動，擷取圖片
至於非平面的正方體的紋理對映則更復雜
比如墨卡託投影出來的地球地圖，要貼在一個球體上。我們得計算出球體上每個頂點透過這種方式投影在圓柱體側面上的頂點座標，然後把側面展開為一個矩形，在壓縮成1*1的正方形，剛好和紋理貼圖對應上。

  • Viewport2DVisual3D
    這個3D控制元件是2D控制元件的容器，其子元素是Button等2D控制元件
    為這個控制元件設定材質、變換、網格，然後透過紋理的形式把2D控制元件畫這個控制元件上
    image
        <Viewport2DVisual3D>
            <Viewport2DVisual3D.Material>
                <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
            </Viewport2DVisual3D.Material>
            <Viewport2DVisual3D.Geometry>
                <MeshGeometry3D Positions="1,0,0 1,0,1 1,1,1 1,1,0" TriangleIndices="0,3,1 1,3,2"  
				TextureCoordinates="0,1 0,0 1,0  1,1"/>
            </Viewport2DVisual3D.Geometry>
            <StackPanel Orientation="Horizontal" Background="#eeeeee">
                <Button Content="+" Margin="8"/>
                <Button Content="門" Margin="0,2,0,0"/>
                <Button Content="+" Margin="8"/>
            </StackPanel>
        </Viewport2DVisual3D>

控制物件生成位置

這個和角動量計算差不多，用叉乘來做。法向量和控制向量叉乘獲得一個垂直於兩個向量平面所在的向量，其大小隨控制向量模長變化而變換。

場景漫遊

為了方便滑鼠控制相機在場景中移動，
可以透過變換+事件來控制，但不如直接用現成的包。HelixToolkit

相關文章