使用WPF实现3D场景[一]
2007-02-13 15:07
363 查看
在这篇文章里,将介绍如何实现一个简单的三维场景,一个三维的空间,包括空间内的三维物体的组合.
首先介绍一下一个三维场景里的基本元素:
先是定义一个简单的三维的场景环境
代码如下:
<Viewport3D Name="myViewport">
</Viewport3D>
以上是定义了一个名称叫做 myViewport 的的三维场景,接下来可以在这个三位场景里添加一些元素:
元素一:照相机
照相机是三维场景内用户的视角,当然照相机也是唯一的。
来看如何定义一个简单的照相机代码:
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="3000" NearPlaneDistance="0.25" FieldOfView="90" Position="1800,0,0" LookDirection="-1,0,0" UpDirection="0,1,0"></PerspectiveCamera>
</Viewport3D.Camera>
这里面描述了照相机在三维场景里的位置,包括它观察的角度,最远的视线,等等这样信息和属性。如果想灵活的使用照相机改变视角会在第二讲和第三讲里详尽的介绍。
元素一:三维模型
三维模型是三维场景内的物体,也就是模型中的元素,不唯一,可以组合,重叠。
来看如何定义一个简单的三维模型组合的代码:
<ModelVisual3D x:Name="topModelVisual3D">
<ModelVisual3D.Children>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="-3,-4,-5" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D Geometry="{StaticResource chair}">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="Yellow" Opacity="1.0" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<TranslateTransform3D OffsetX="0" OffsetY="-200" OffsetZ="-600" />
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D Geometry="{StaticResource table}">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="Yellow" Opacity="1.0" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<TranslateTransform3D OffsetX="0" OffsetY="20" OffsetZ="60" />
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D Geometry="{StaticResource man}">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="black" Opacity="1.0" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<TranslateTransform3D OffsetX="75" OffsetY="20" OffsetZ="0" />
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
<ModelVisual3D.Transform>
<Transform3DGroup>
<ScaleTransform3D ScaleX="10" ScaleY="10" ScaleZ="10" x:Name="scaleTransform"/>
<MatrixTransform3D/>
<RotateTransform3D >
<RotateTransform3D.Rotation >
<AxisAngleRotation3D Angle="275" Axis="0,0,1" x:Name="myAngleRotationMan"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</ModelVisual3D.Transform>
</ModelVisual3D>
</ModelVisual3D.Children>
<ModelVisual3D.Transform>
<Transform3DGroup>
<MatrixTransform3D/>
<RotateTransform3D >
<RotateTransform3D.Rotation >
<AxisAngleRotation3D Angle="0" Axis="0,10,0" x:Name="myAngleRotationChair"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</ModelVisual3D.Transform>
</ModelVisual3D>
来看一下效果:
到这里就完成了整个的三维场景的建立。
补充元素:动画效果
如果想让整体的三维模型都能动起来,就需要为三维场景添加动画效果。
看一段可以让三维场景按纵轴(中心轴)旋转的代码:
<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="myAngleRotationChair"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:10"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Viewport3D.Triggers>
填写如上代码之后就完成了一个最简单的三维动画的处理。
好的~如果您对更多的三维场景变成想有所了解,请关注第二讲。
如果您想下载源代码或收听语音教程,请访问:微软webcast
再次感谢您的关注,谢谢!
首先介绍一下一个三维场景里的基本元素:
先是定义一个简单的三维的场景环境
代码如下:
<Viewport3D Name="myViewport">
</Viewport3D>
以上是定义了一个名称叫做 myViewport 的的三维场景,接下来可以在这个三位场景里添加一些元素:
元素一:照相机
照相机是三维场景内用户的视角,当然照相机也是唯一的。
来看如何定义一个简单的照相机代码:
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="3000" NearPlaneDistance="0.25" FieldOfView="90" Position="1800,0,0" LookDirection="-1,0,0" UpDirection="0,1,0"></PerspectiveCamera>
</Viewport3D.Camera>
这里面描述了照相机在三维场景里的位置,包括它观察的角度,最远的视线,等等这样信息和属性。如果想灵活的使用照相机改变视角会在第二讲和第三讲里详尽的介绍。
元素一:三维模型
三维模型是三维场景内的物体,也就是模型中的元素,不唯一,可以组合,重叠。
来看如何定义一个简单的三维模型组合的代码:
<ModelVisual3D x:Name="topModelVisual3D">
<ModelVisual3D.Children>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="-3,-4,-5" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D Geometry="{StaticResource chair}">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="Yellow" Opacity="1.0" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<TranslateTransform3D OffsetX="0" OffsetY="-200" OffsetZ="-600" />
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D Geometry="{StaticResource table}">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="Yellow" Opacity="1.0" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<TranslateTransform3D OffsetX="0" OffsetY="20" OffsetZ="60" />
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D Geometry="{StaticResource man}">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="black" Opacity="1.0" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<TranslateTransform3D OffsetX="75" OffsetY="20" OffsetZ="0" />
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
<ModelVisual3D.Transform>
<Transform3DGroup>
<ScaleTransform3D ScaleX="10" ScaleY="10" ScaleZ="10" x:Name="scaleTransform"/>
<MatrixTransform3D/>
<RotateTransform3D >
<RotateTransform3D.Rotation >
<AxisAngleRotation3D Angle="275" Axis="0,0,1" x:Name="myAngleRotationMan"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</ModelVisual3D.Transform>
</ModelVisual3D>
</ModelVisual3D.Children>
<ModelVisual3D.Transform>
<Transform3DGroup>
<MatrixTransform3D/>
<RotateTransform3D >
<RotateTransform3D.Rotation >
<AxisAngleRotation3D Angle="0" Axis="0,10,0" x:Name="myAngleRotationChair"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</ModelVisual3D.Transform>
</ModelVisual3D>
来看一下效果:
到这里就完成了整个的三维场景的建立。
补充元素:动画效果
如果想让整体的三维模型都能动起来,就需要为三维场景添加动画效果。
看一段可以让三维场景按纵轴(中心轴)旋转的代码:
<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="myAngleRotationChair"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:10"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Viewport3D.Triggers>
填写如上代码之后就完成了一个最简单的三维动画的处理。
好的~如果您对更多的三维场景变成想有所了解,请关注第二讲。
如果您想下载源代码或收听语音教程,请访问:微软webcast
再次感谢您的关注,谢谢!
相关文章推荐
- 使用WPF实现3D场景[二]
- 手把手教你使用Silverlight实现3D场景二(创建自定义模版控件为物件应用3D动画)
- 手把手教你使用Silverlight实现3D场景一(素材准备,使用Blend创建主场景)
- WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现
- 通过例子学设计模式之--外观模式以及使用场景说明(C++实现)
- 微信H5支付可以实现在非微信浏览器(如QQ浏览器、谷歌浏览器、Safari等)中使用微信支付的场景。
- c#,使用WPF实现iPhone的短信框效果
- 如何使用CSS3实现一个平滑的3D文本标题
- Android Gradle 常用使用场景实现方式的总结
- 使用WPF技术实现基于MSN协议的五子棋程序
- 使用CSS3实现3D图片滑块效果
- 使用threejs实现3D全景漫游
- 通过例子学设计模式之--简单工厂模式以及使用场景说明(C++实现)
- [Unity3D]手机3D游戏开发:如何实现最高分的存储与显示(二)----使用GUI.Box显示文字
- [Unity3D]手机3D游戏开发:如何实现最高分的存储与显示(七)----使用Game ID避免数据重复输入
- 使用UI Automation实现自动化测试--5 (Winfrom和WPF中弹出和关闭对话框的不同处理方式)
- WPF and Silverlight 学习笔记(二十二):使用代码实现绑定、绑定数据的验证
- WPF实现3D翻转的动画效果
- 使用HoloToolKit实现导航手势旋转3D模型
- javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景