WPF 3D 轮播可操控面板

最新推荐文章于 2025-05-14 13:08:56 发布

多佛朗明儿

最新推荐文章于 2025-05-14 13:08:56 发布

阅读量840

点赞数 1

CC 4.0 BY-SA版权

文章标签： wpf 3d microsoft

本文链接：https://blog.youkuaiyun.com/tm12319/article/details/122395926

本文介绍如何使用WPF实现3D旋转轮播图效果，并解释了Viewport3D、PerspectiveCamera等核心组件的作用及配置方法。还介绍了如何在3D环境中创建基本几何图形并实现旋转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个项目，项目需求中有个功能是要用3D旋转轮播图效果，每个面板又要能像2D那样可操作，由于之前没有3D的经验。没办法只能花几天时间学习学习。先来了解WPF 3D最基本的几个知识点：

1、坐标系：坐标方向得搞清楚

2、Viewport3D

WPF中使用Viewport3D作为3D物体的显示容器，我们所有的东西都要放在Viewport3D中

包括：

1、相机：

一般用PerspectiveCamera

<PerspectiveCamera Position="0.5,0.5,0.5" LookDirection="0,0,-0.5" UpDirection="0,1,0" FieldOfView="90"/>

Position：相机位置，离物体远看到的东西小，离得近看到的东西大

LookDirection：相机对准的方向，就像我们眼睛看的方向

UpDirection：相机的后面，就像我们的头的（我不怎么关注它）

FieldOfView：视角范围，就像我们眼睛看到的扇形范围

2、ModelVisual3D 3d可视化模型

1、灯光：是Viewport3D的Children

有好几种，我用AmbientLight

<AmbientLight Color="White"/>

2、可视化元素（点，线，面，体：都要通过坐标生成，WPF不提供具体的3D模型）

<GeometryModel3D>     <!--几何图型-->
   <GeometryModel3D.Geometry>
        <!--什么几何图型？ 网格几何图型-->
      <MeshGeometry3D Positions=" 0,0,0 0,1,0 1,1,0 1,0,0" TriangleIndices="0,3,1  1,3,2"/>
   </GeometryModel3D.Geometry>
   <GeometryModel3D.Material>
       <DiffuseMaterial Brush="Blue"/>
   </GeometryModel3D.Material>
</GeometryModel3D>

既然要在3维坐标中体现，把3维坐标看成立体的网格

点、线、面、体都是几何图所以有GeometryModel3D：3d几何模型

在3维坐标（网格）画几何图：MeshGeometry3D：网格几何

Positions：图型顶点在三维坐标的位置

TriangleIndices：三角坐标索引

WPF采用三角网格法，在三维空间中，一个面是有正反之分的。WPF只会渲染“正面”，“反面”是看不见的，

此时

正面TriangleIndices="0,3,1 1,3,2"

反面TriangleIndices="0,1,3 1,2,3" 把相机位置移到后面，相机方向反过来才能看到

GeometryModel3D.Material：几何图的材质，对应2D的背景

旋转

例如

 <ModelVisual3D.Transform>
      <Transform3DGroup>    
           <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
                 <RotateTransform3D.Rotation>
                     <AxisAngleRotation3D Axis="0,1,0" Angle="90"/>
                 </RotateTransform3D.Rotation>
            </RotateTransform3D>
       </Transform3DGroup>
 </ModelVisual3D.Transform>

改变<AxisAngleRotation3D Axis="0,1,0" Angle="20"/> Angle值，以Y轴（Axis="0,1,0"）为中心旋转

完整示例

<Viewport3D Grid.Column="0"  Height="50" Width="5">
            <!--相机-->
            <Viewport3D.Camera>
                <PerspectiveCamera Position="0.5,0.5,0.5" LookDirection="0,0,-0.5" UpDirection="0,1,0" FieldOfView="90"/>
            </Viewport3D.Camera>
            <!--灯光-->
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <AmbientLight Color="White"/>
                </ModelVisual3D.Content>
            </ModelVisual3D>

            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <!--3D模型组-->
                    <Model3DGroup>

                        <GeometryModel3D>
                            <!--几何图型-->
                            <GeometryModel3D.Geometry>
                                <!--什么几何图型？ 网格几何图型-->
                                <MeshGeometry3D Positions=" 0,0,0 0,1,0 1,1,0 1,0,0" TriangleIndices="0,3,1  1,3,2"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial Brush="Blue"/>
                            </GeometryModel3D.Material>
                        </GeometryModel3D>
                    </Model3DGroup>
                </ModelVisual3D.Content>
                <ModelVisual3D.Transform>
                    <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
                        <RotateTransform3D.Rotation>
                            <AxisAngleRotation3D Axis="0,1,0" Angle="20"/>
                        </RotateTransform3D.Rotation>
                    </RotateTransform3D>
                </ModelVisual3D.Transform>
            </ModelVisual3D>
        </Viewport3D>