且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用WPF实现3D场景[一]

更新时间:2022-09-02 09:00:29

原文:使用WPF实现3D场景[一]

在这篇文章里,将介绍如何实现一个简单的三维场景,一个三维的空间,包括空间内的三维物体的组合.

首先介绍一下一个三维场景里的基本元素:

先是定义一个简单的三维的场景环境

代码如下:

使用WPF实现3D场景[一]<Viewport3D Name="myViewport">
使用WPF实现3D场景[一]
</Viewport3D>

以上是定义了一个名称叫做 myViewport 的的三维场景,接下来可以在这个三位场景里添加一些元素:

元素一:照相机

照相机是三维场景内用户的视角,当然照相机也是唯一的。

来看如何定义一个简单的照相机代码:

使用WPF实现3D场景[一]<Viewport3D.Camera>
使用WPF实现3D场景[一]        
<PerspectiveCamera FarPlaneDistance="3000" NearPlaneDistance="0.25" FieldOfView="90" Position="1800,0,0" LookDirection="-1,0,0" UpDirection="0,1,0"></PerspectiveCamera>
使用WPF实现3D场景[一]      
</Viewport3D.Camera>

这里面描述了照相机在三维场景里的位置,包括它观察的角度,最远的视线,等等这样信息和属性。如果想灵活的使用照相机改变视角会在第二讲和第三讲里详尽的介绍。

元素一:三维模型

三维模型是三维场景内的物体,也就是模型中的元素,不唯一,可以组合,重叠。

来看如何定义一个简单的三维模型组合的代码:

使用WPF实现3D场景[一]      <ModelVisual3D x:Name="topModelVisual3D">
使用WPF实现3D场景[一]        
<ModelVisual3D.Children>
使用WPF实现3D场景[一]          
<ModelVisual3D>
使用WPF实现3D场景[一]            
<ModelVisual3D.Content>
使用WPF实现3D场景[一]              
<DirectionalLight Color="#FFFFFFFF" Direction="-3,-4,-5" />
使用WPF实现3D场景[一]            
</ModelVisual3D.Content>
使用WPF实现3D场景[一]          
</ModelVisual3D>
使用WPF实现3D场景[一]
使用WPF实现3D场景[一]          
<ModelVisual3D>
使用WPF实现3D场景[一]            
<ModelVisual3D.Content>
使用WPF实现3D场景[一]              
<GeometryModel3D Geometry="{StaticResource chair}">
使用WPF实现3D场景[一]                
<GeometryModel3D.Material>
使用WPF实现3D场景[一]                  
<DiffuseMaterial>
使用WPF实现3D场景[一]                    
<DiffuseMaterial.Brush>
使用WPF实现3D场景[一]                      
<SolidColorBrush Color="Yellow" Opacity="1.0" />
使用WPF实现3D场景[一]                    
</DiffuseMaterial.Brush>
使用WPF实现3D场景[一]                  
</DiffuseMaterial>
使用WPF实现3D场景[一]                
</GeometryModel3D.Material>
使用WPF实现3D场景[一]                
<GeometryModel3D.Transform>
使用WPF实现3D场景[一]                  
<TranslateTransform3D OffsetX="0" OffsetY="-200" OffsetZ="-600" />
使用WPF实现3D场景[一]                
</GeometryModel3D.Transform>
使用WPF实现3D场景[一]              
</GeometryModel3D>
使用WPF实现3D场景[一]            
</ModelVisual3D.Content>
使用WPF实现3D场景[一]          
</ModelVisual3D>
使用WPF实现3D场景[一]
使用WPF实现3D场景[一]          
<ModelVisual3D>
使用WPF实现3D场景[一]            
<ModelVisual3D.Content>
使用WPF实现3D场景[一]              
<GeometryModel3D Geometry="{StaticResource table}">
使用WPF实现3D场景[一]                
<GeometryModel3D.Material>
使用WPF实现3D场景[一]                  
<DiffuseMaterial>
使用WPF实现3D场景[一]                    
<DiffuseMaterial.Brush>
使用WPF实现3D场景[一]                      
<SolidColorBrush Color="Yellow" Opacity="1.0" />
使用WPF实现3D场景[一]                    
</DiffuseMaterial.Brush>
使用WPF实现3D场景[一]                  
</DiffuseMaterial>
使用WPF实现3D场景[一]                
</GeometryModel3D.Material>
使用WPF实现3D场景[一]                
<GeometryModel3D.Transform>
使用WPF实现3D场景[一]                  
<TranslateTransform3D OffsetX="0" OffsetY="20" OffsetZ="60" />
使用WPF实现3D场景[一]                
</GeometryModel3D.Transform>
使用WPF实现3D场景[一]              
</GeometryModel3D>
使用WPF实现3D场景[一]            
</ModelVisual3D.Content>
使用WPF实现3D场景[一]          
</ModelVisual3D>
使用WPF实现3D场景[一]
使用WPF实现3D场景[一]
使用WPF实现3D场景[一]          
<ModelVisual3D>
使用WPF实现3D场景[一]            
<ModelVisual3D.Content>
使用WPF实现3D场景[一]              
<GeometryModel3D Geometry="{StaticResource man}">
使用WPF实现3D场景[一]                
<GeometryModel3D.Material>
使用WPF实现3D场景[一]                  
<DiffuseMaterial>
使用WPF实现3D场景[一]                    
<DiffuseMaterial.Brush>
使用WPF实现3D场景[一]                      
<SolidColorBrush Color="black" Opacity="1.0" />
使用WPF实现3D场景[一]                    
</DiffuseMaterial.Brush>
使用WPF实现3D场景[一]                  
</DiffuseMaterial>
使用WPF实现3D场景[一]                
</GeometryModel3D.Material>
使用WPF实现3D场景[一]                
<GeometryModel3D.Transform>
使用WPF实现3D场景[一]                  
<TranslateTransform3D OffsetX="75" OffsetY="20" OffsetZ="0" />
使用WPF实现3D场景[一]                
</GeometryModel3D.Transform>
使用WPF实现3D场景[一]              
</GeometryModel3D>
使用WPF实现3D场景[一]            
</ModelVisual3D.Content>
使用WPF实现3D场景[一]            
使用WPF实现3D场景[一]            
使用WPF实现3D场景[一]            
<ModelVisual3D.Transform>
使用WPF实现3D场景[一]              
<Transform3DGroup>
使用WPF实现3D场景[一]                
<ScaleTransform3D ScaleX="10" ScaleY="10" ScaleZ="10"  x:Name="scaleTransform"/>
使用WPF实现3D场景[一]                
<MatrixTransform3D/>
使用WPF实现3D场景[一]                
<RotateTransform3D >
使用WPF实现3D场景[一]                  
<RotateTransform3D.Rotation >
使用WPF实现3D场景[一]                    
<AxisAngleRotation3D Angle="275" Axis="0,0,1" x:Name="myAngleRotationMan"/>
使用WPF实现3D场景[一]                  
</RotateTransform3D.Rotation>
使用WPF实现3D场景[一]                
</RotateTransform3D>
使用WPF实现3D场景[一]              
</Transform3DGroup>
使用WPF实现3D场景[一]            
</ModelVisual3D.Transform> 
使用WPF实现3D场景[一]            
使用WPF实现3D场景[一]            
使用WPF实现3D场景[一]          
</ModelVisual3D>
使用WPF实现3D场景[一]        
</ModelVisual3D.Children>
使用WPF实现3D场景[一]        
使用WPF实现3D场景[一]        
<ModelVisual3D.Transform>
使用WPF实现3D场景[一]          
<Transform3DGroup>
使用WPF实现3D场景[一]            
<MatrixTransform3D/>
使用WPF实现3D场景[一]            
<RotateTransform3D >
使用WPF实现3D场景[一]              
<RotateTransform3D.Rotation >
使用WPF实现3D场景[一]                
<AxisAngleRotation3D Angle="0" Axis="0,10,0" x:Name="myAngleRotationChair"/>
使用WPF实现3D场景[一]              
</RotateTransform3D.Rotation>
使用WPF实现3D场景[一]            
</RotateTransform3D>
使用WPF实现3D场景[一]          
</Transform3DGroup>
使用WPF实现3D场景[一]        
</ModelVisual3D.Transform>
使用WPF实现3D场景[一]      
</ModelVisual3D>

来看一下效果:

 

 

 

使用WPF实现3D场景[一]

到这里就完成了整个的三维场景的建立。

补充元素:动画效果

如果想让整体的三维模型都能动起来,就需要为三维场景添加动画效果。

看一段可以让三维场景按纵轴(中心轴)旋转的代码:

使用WPF实现3D场景[一]   <Viewport3D.Triggers>
使用WPF实现3D场景[一]        
<EventTrigger RoutedEvent="Viewport3D.Loaded">
使用WPF实现3D场景[一]          
<BeginStoryboard>
使用WPF实现3D场景[一]            
<Storyboard>
使用WPF实现3D场景[一]              
<DoubleAnimation 
使用WPF实现3D场景[一]                
Storyboard.TargetName="myAngleRotationChair"
使用WPF实现3D场景[一]                Storyboard.TargetProperty
="Angle"
使用WPF实现3D场景[一]                From
="0" To="360" Duration="0:0:10"
使用WPF实现3D场景[一]                RepeatBehavior
="Forever" />
使用WPF实现3D场景[一]            
</Storyboard>
使用WPF实现3D场景[一]          
</BeginStoryboard>
使用WPF实现3D场景[一]        
</EventTrigger>
使用WPF实现3D场景[一]      
</Viewport3D.Triggers>

填写如上代码之后就完成了一个最简单的三维动画的处理。

好的~如果您对更多的三维场景变成想有所了解,请关注第二讲。

如果您想下载源代码或收听语音教程,请访问:微软webcast

 

再次感谢您的关注,谢谢!