摘 要

随着计算机图形技术日渐成熟和计算机高性能硬件的日渐普及，虚拟现实（Virtual Reality）技术已慢慢下沉民用生活。虚拟现实技术的使用范围十分广阔，例如在医学，教育，艺术创作，意识娱乐等方面的使用。其中，在家庭装修的行业中，人们也开始研究与探索虚拟现实在其中的可行性。随着技术的不断发展，虚拟现实技术对于家庭装修行业有着很大的利用价值和发展潜力。

目前，人们对于家庭装修的方案选择有很多。尤其在家庭户型设计这一环节，有些是委托装修公司或设计公司主要负责，这种方案虽然保证了户型设计的合理性，但缺少客户主动设计等良好用户体验细节；有些是客户负责整体设计，但这种会因存在客户专业性不足等因素，使得家庭户型设计方案不合理与不完整。同时，采用日渐成熟的Web技术和Web 3D技术设计在线家庭装修户型设计系统，可以综合设计师专业性和普通客户的主动参与性，提高这一环节的用户体验。

本文采用Web开发技术，结合3D绘图标准WebGL（Web Graphics Library）和HTML5语言，研究一套从二维计算机图形和三维计算机图形两方面出发，实现虚拟家庭装修户型设计的系统，主要研究包括以下几点：

（1）研究了虚拟现实技术。主要了解虚拟现实的历史与发展，分析虚拟现实在现实生活中的使用场景，比较传统现实中使用虚拟现实与否时的效果与体验，发表对虚拟现实未来发展的意见。

（2）设计了虚拟家装二维户型设计系统方案。以家庭装修户型设计与目标用户的关系为基础，借助统一建模语言UML中的静态模型和动态模型和HTML5超文本标记语言，从目标用户主动操作设计等角度设计一套虚拟家装二维户型设计系统方案。

（3）结合3D绘图标准WebGL和二维户型设计系统，生成目标用户主动设计的三维户型效果图。通过WebGL，借助系统显示核心和支持WebGL的浏览器，顺利流畅地展示设计了的户型3D场景。在此渲染过程中，也避免了复杂网页专用的渲染插件的开发。

最后，本文在Windows平台上，运用JetBrains的WebStorm平台，Google的Chrome等工具，设计实现了此虚拟家装的墙体设计系统。用户能通过此系统直观设计家庭墙体等户型设计，并可快速查看三维渲染效果。

关键词：虚拟现实；家庭装修；网页开发；Three.js

Abstract

With the gradual maturation of computer graphics technology and the popularization of high performance hardware, virtual reality (reality) technology has gradually sunk into civilian life. Virtual reality technology has a wide range of uses, such as in medicine, education, artistic creation, awareness and entertainment. Among them, in the home decoration industry, people also began to study and explore the feasibility of virtual reality.

With the continuous development of technology, virtual reality technology for home decoration industry has a great use of value and development potential. At present, there are many options for home decoration. Especially in the family house type design This link, some are commissioned decoration company or design company is mainly responsible, although this scheme ensures the rationality of house type design, it lacks the customer's initiative design and other good user experience details; Some customers are responsible for the overall design, but this will be due to the lack of customer professionalism and other factors, making the family house type design is unreasonable and incomplete.

At the same time, the adoption of mature Web technology and web 3D technology design online home decoration design system, can be integrated designer professionalism and the active participation of ordinary customers, improve the user experience of this link.

Based on web development technology, combined with 3D drawing standard WebGL (Web graphics library) and HTML5 language, this paper studies a system of virtual home decoration design from two-dimensional computer graphics and three-dimensional computer graphics, the main research includes the following:

(1)It mainly understands the history and development of virtual reality, analyzes the use scenes of virtual reality in real life, compares the effect and experience of using virtual reality in the traditional reality, and publishes the opinions on the future development of virtual reality. 2 design of the virtual home decoration two-dimensional design system scheme.

(2)Based on the relationship between the family decoration design and the target user, this paper designs a two-dimensional house design system with the help of the static model and the dynamic model and the HTML5 Hypertext Markup Language in UML, and from the point of view of the active operation design of the target user. 3 combined with 3D drawing standard WebGL and two-dimensional house type design system, it generates the three-dimensional type effect drawing that the target user designs actively. Through WebGL, with the help of the system display core and support WebGL browser, smooth and smoothly display the design of the house type 3D scene.

(3)In this rendering process, also avoids the complex web page dedicated rendering plug-in development. Finally, in the Windows platform, using Jetbrains Webstorm platform, Google Chrome and other tools, designed to achieve this virtual home decoration wall design system. The user can design the family wall and so on intuitively through this system, and can quickly see the three-dimensional rendering effect.

Key words: Virtual Reality; Home improvements; Web development; Three.js

目 录

摘要 I

Abstract II

第1章 绪论 1

1.1 论文研究的背景和意义 1

1.2 国内外的研究现状分析 1

1.3 研究路线及工作内容 2

1.4 论文主要结构 3

第2章 虚拟家装户型设计系统模型 4

2.1 建模语言UML概述 4

2.1.1 UML主要模型 4

2.1.2 UML图形 4

2.2 虚拟家装户型设计系统功能需求 5

2.2.1 二维户型设计系统模型 5

2.2.2 3D效果渲染系统模型 5

2.3 本章小结 5

第3章 二维户型设计系统 6

3.1 Web基本知识和技术 6

3.2 实现二维户型设计系统 6

3.2.1 利用HTML5中的canvas标签 6

3.2.2 利用HTML中的div标签 9

3.3 本章小结 11

第4章 户型3D效果渲染系统 12

4.1 浏览器3D渲染知识和技术 12

4.2 实现户型3D效果渲染系统 12

4.3 本章小结 14

第5章 总结与展望 15

5.1 论文总结 15

5.2 工作展望 15

参考文献 17

致谢 18

第1章 绪论

1.1 论文研究的背景和意义

随着计算机图形等技术日渐成熟和计算机高性能硬件的日渐普及，虚拟现实（Virtual Reality）技术已慢慢下沉民用生活。目前已经有诸多企业正加速研究并发展虚拟现实，如有开发头戴式显示设备的HTC、Samsung、Facebook等，有开发虚拟现实内容的UBISOFT、Vrse、zSpace等^[1]。虚拟现实技术的使用范围十分广阔，例如在医学，教育，艺术创作，意识娱乐等方面的使用。有资料显示：在2015年里，虚拟现实在中国有着15.4亿元的市场规模，此数值预计在2016年将会达到56.6亿元，在2020年将预计超过550亿元。在虚拟现实除了在军事训练领域中应用比较成熟外，它也有应用于教育、设计、医疗、建筑等领域，但应用程度较低。虚拟现实作为新型事物已经进入了人们的视野，它的不断良好发展将对人类社会带来更新，更高效率，更有趣的工作和生活方式。

自2015年起，国内多地区有着一系列房产新政，有公积金购买首套房最低首付比例降至两成、商业贷款二套房最低首付比例降低四成等。这些新政为楼市带来正面影响。此时，80、90等深受互联网影响的群体也渐渐步入居家置业阶段。在选择家装公司时，他们更偏向主张个性化、高效率的互联网家装公司。