基于XNA 的3D 室内装修软件的设计

王灵香　苗新亮

摘要：在进行室内装修时，业主一般找专业的装修设计公司使用3D MAX等专业软件进行设计，或者自行使用室内装潢大师等商业软件进行设计。前者过于专业，一般人很难操作；后者则无法同步渲染输出，设计完后再渲染输出3D效果常会遇到失败。提出了一种3D室内装修设计软件，让操作者能够进行平面操作的同时，自动渲染输出3D效果，达到所见即所得的观感。平面操作采用SVG为基础实现，3D效果展示采用XNA实现。

关键词：3D；室内装修；SVG；XNA

中图分类号 TP399 文献标识码 A 文章编号：1009-3044（2014）10-2268-02

Abstract： During interior decoration， the owners often use complicated 3D MAX or limited commercial software in order to see the effect. Presents a 3D interior design application that allows the operator to perform the operation on two-dimensional plane and automatically render output 3D effect， to WYSIWYG perception. The operation on two-dimensional plane using SVG， 3D effects show using XNA.

Key words： 3D； Interior design； SVG； XNA

目前，室内环境的装修与布置是一项浩大的工程，即使业主对最终的装修效果不满意也不容易从头再来一遍，毕竟时间成本与经济成本都是很高的。在现实的装修过程中，有一部分业主并不找专业的装修公司，而是找普通的装修队来实现自己对于房间效果的想像，可是实际装修出来的效果未必与业主最初的想像是一致的。一旦最终效果达不到业主最初的预期，业主要么只能忍受不满意的家装效果，要么返工重装，无论哪一种选择都将会浪费大量的时间与金钱。在专业的设计公司里，室内装修的效果图一般用3D MAX、LightScape等专业软件进行设计制作。虽然这些软件做出来的效果图非常精确，效果也很好，但对于一般家装来说，业主只是想看看简单的效果已，甚至只是想布置一下家具的摆放位置，使用这些软件运用起来就太过麻烦了。

当前市场上，也有不少3D室内装修设计软件，比如室内装潢大师、我家我设计、首席建筑师、e家家居设计软件、创想装修设计软件等。这些软件要么需要付费使用，要么需要联网使用，有的甚至就直接通过浏览器访问和使用。而且多数的软件，都采用了二维操作，再渲染输出3D效果的设计方案，有时候一个较为复杂的房间设计完成后，常常在渲染输出3D效果时等待很长时间，甚至有可能渲染输出失败。

提出一款3D室内装修设计软件，以SVG可缩放矢量图形为基础进行二维空间的操作，以微软的XNA技术进行3D效果的同步渲染展示，实现所见即所得的即时观感。同时，也提供室内漫游的功能，可以满足业主提前感受到未来的装饰效果。

1 设计目标

3D室内装修设计软件能够：1）依据用户需要自行绘制房间户型图，同步渲染输出3D房间效果；2）能够让用户自由摆放家具饰品，同步渲染输出3D房间效果；3）能在3D房间中漫游查看摆放整体效果。

当然3D室内装修设计软件也提供诸如：导入3D家具模型，导入地面和墙面纹理，新建、打开、保存房间模型等。

2 设计原理

在3D室内装修设计软件中，将设计一个二维矢量绘制区和一个三维显示区。二维矢量区，用于绘制户型图、摆放家具，是房间布局设计的主要操作区，并利用SVG可缩放矢量图形进行操作绘制。三维显示区，用于以三维的形式同步显示二维矢量区的操作结果。

二维矢量绘制区由绘制区、墙体工具条、家具模型树组成。绘制区用于显示房间的平面图，可以对其中的各个SVG对象进行简单操作；墙体工具条含有常规直线、曲线、折线等常规工具选择，可用来操作对象的SVG对象在绘制区绘制墙体；家具模型树按照家具的功能进行分类显示，可以直接拖动家具到绘制区，并以SVG图形对象的形式显示。在保存房间设计时，绘制区中的每个SVG对象将按照SVG标准进行保存。再次打开房间时，将重新加载并创建SVG对象显示。同时，绘制区中的每个SVG对象将会同步渲染输出的三维显示区。

三维显示区是一个独立的XNA渲染环境，不具备对每个家具的操作功能。它只是被动显示二维矢量绘制区的绘制结果，为操作者提供一个所见即所得的三维虚拟场景。同时，三维显示区也提供可以选择查看模式的菜单项，如鸟瞰模式还是虚拟漫游模式的选择。

2.1 3D效果同步渲染输出

3D室内装修设计软件使用了观察者模式，使得操作者在二维矢量绘制区进行操作后，其三维效果同步渲染显示在三维显示区。观察者模式是GoF的《设计模式》中提到的23种基本设计模式之一，其意图就是定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新[1]。微软的.NET框架中提供了一个委托机制，3D室内装修设计软件也利用了基于事件的委托机制实现观察者模式[2]。

将二维矢量绘制区区SvgArtiste和三维显示区Room3D组织起来的工作，由主窗口RoomDesign负责。由于3D室内装修设计软件是一个专用软件，不会涉及到较多的变化，因此，基于避免过度设计的原则，这里没有采用《设计模式》中的标准设计，而进行了简化处理，同时充分利用了微软的.NET框架中的委托机制，如图1所示。

SvgObjectChangedEventArgs是一个自定义事件参数，主要用于指明具体的变化对象。Handler是一个自定义多播委托，所有符合该签名的方法都可以注册使用[3]。SvgArtiste是二维矢量绘制区类，它定义了一个Handler类型的多播委托NotifyObservers，也定义了一个Notify方法。Room3D是三维显示区，定义了一个遵循Handler定义的Update方法，接收二维数量区的矢量物体变化。RoomDesign是主窗口类，它定义了一个RegObserver方法，用于将Room3D中的Update方法注册到SvgArtiste的NotifyObservers多播委托中，订阅SvgArtiste中发布的信息。

当操作人员操作SvgArtiste中的矢量物体时，如拖入一个家具，SvgArtiste将由Notify方法通过NotifyObservers将变化的信息ChangedObject发布给订阅者Room3D。Room3D拿到ChangedObject后，就可从中获取到三维显示区中对应的3D物体，并根据相应参数做出相应的变化。

对于ChangedObject，则定义了唯一标识、名称、二维坐标位置、悬空高度、3D模型文件、二维静态图等。唯一标识决定二维矢量绘制区和三维显示区操作的物体。二维坐标位置转换成三维空间位置，使得操作者在二维矢量绘制区和三维显示区能够同步挪动、旋转家具。悬空高度，表明了该家具在三维空间中离开地面的高度。3D模型文件，是通过3D MAX软件设计输出的3D模型文件，并经由XNA编译形成的xnb文件，它指明了在三维显示区应该加载哪个模型文件表示这个家具，当然对于墙体，则直接创建遵循一般墙体高度和厚度的3D长方体。二维静态图是该家具的平面图形，用于在二维矢量绘制区的平面展示。

2.2 XNA窗口化

XNA游戏框架提供了一种快速、易于使用和轻便的方式来托管用户的游戏。它会自动创建一个窗口，通过重写一些方法，游戏可以在其中运行、初始化硬件、提供简单的更新和绘制[4]。但这都必须基于直接使用XNA框架的Game类来创建游戏环境，与常用的Windows用户操作环境不同，而3D室内装修设计软件要求将三维场景渲染输出到Windows的窗口中。

幸运的是，XNA的核心框架可以直接利用，并且在XNA官网上也提供了一个WinForms Graphics Device示例。它的原理是编写一个从System.Windows.Forms.Control继承的控件，编写绘制代码，然后为Winform自定义控件提供XNA框架的功能，并使用XNA框架中的ContentManager来加载和处理数据[4]。

2.3 3D房间漫游

XNA提供了一个3D摄像机，通过设置摄像机的高度，可以实现鸟瞰和平视效果，如摄像机的高度设置为5米可以实现鸟瞰效果，设置为一个成人的高度1.7米可以实现平视效果。再增加对鼠标或键盘的响应处理，实现前移、旋转、仰视、俯视等效果，就可以实现鸟瞰模式漫游和虚拟参观漫游的效果。

XNA的3D摄像机由视图矩阵和投影矩阵这两个Matrix对象构成。视图矩阵用于实现世界坐标向摄像机坐标的转换，它决定了摄像机在3D世界中的位置、它的指向、以及它自己的摆放方向。投影矩阵用于实现摄像机坐标系向屏幕坐标系的转换，它决定了如何在屏幕上观察3D世界[5]。通过Matrix类的静态方法CreateLookAt可以创建视图矩阵，其中传递的参数就包括：cameraPosition摄像机位置坐标、cameraTarget摄像机指向的目标位置坐标、cameraUpVector代表哪个方向是“上”的Vector3对象。

通过移动摄像机的位置实现虚拟漫游时，则响应键盘或者鼠标事件，设定好速度speed后，然后不断调整cameraPosition、cameraDirection即可。其中cameraDirection是摄像机的朝向，是一个相对方向，它等于 cameraTarget 减 cameraPosition后的Normalize结果，是一个长度为1的向量[5]。如：向前移动时，只需要重新计算cameraDirection乘以speed得到新的cameraPosition；俯视时，相当于对摄像机进行Pitch旋转[5]。

3 结束语

3D室内装修设计软件利用了.NET的委托技术，采用观察者模式，将操作人员对房间的二维矢量绘制同步输出到三维显示环境中，实现了所见即所得的三维房间布置效果。其中三维效果的展示利用了微软的XNA核心框架，将三维世界窗口化展示。

利用XNA中的3D摄像机，3D室内装修设计软件提供了鸟瞰模式的漫游和虚拟参观模式的漫游两种漫游效果，为操作者进行设计和参观设计效果提供了良好的体验能力。

参考文献：

[1] Erich Gamma， Richard Helm， Ralph Johnson，等. 设计模式[M].北京：机械工业出版社，2007：194.

[2] 吴清寿.基于事件机制的观察者模式及应用[J]. 重庆理工大学学报：自然科学，2012，26（9）：100-104.

[3] Christian Nagel，Bill Evjen，Jay Glynn. C#高级编程（第四版）[M].北京：清华大学出版社，2006：153-173.

[4] MSDN. WinForms Series 1： Graphics Device Code Sample[EB/OL]. [2008-01-10]. http：//xbox.create.msdn.com/en-US/education/catalog/sample/winforms_series_1.

[5] Aaron Reed/XNA游戏编程（中文版）[M].北京：清华大学出版社，2011：167-225.