基于threejs的三维全景虚拟家居展示平台

于冰洋 张绍玉 崔贺明 成都理工大学信息科学与技术学院

0引言：本论文主要在为解决目前家具市场上家具展示遇到的问题和挑战，研究和设计三维家具展示平台。该平台充分利用计算机科学，提出了一套贴合家具购买者需求，简单有效，低复杂度，切实可行的家具展示平台解决方案。

1.系统模块设计

本系统着力三维动态视景和实体行为相结合，它给人们带来全新的真实体验和交互式的感受。该项目通过鼠标拖动，使普通用户操作更为简便，三维全景图像源自对真实场景的摄影捕捉，真实感强烈，所以制作出的全景展示会更加生动和真实。而基于3D模型的全景展示技术无疑是锦上添花。本项目将全景虚拟技术和3D模型结合一体能最大程度上的去模拟现实情景，提高用户的可参与性和可操作性。系统总体框架及所使用的技术见图1：但大多数网站只有单个或单种家居的展示，使用户使用起来略显单调无法满足。在本项目中则解决了这个问题，我们实现了网页上多个模型的加载，不同类型种类的家具模型都可以在一个页面上加载出来，用户能够完美的选择拖动摆放多个家具，实现自己想要的整体房间家具布置效果。

图2 多个模型加载效果图

图1 系统总体框架

后台我们采用的是Jeecg快速开发平台进行开发，该平台着力于为企业提供服务，通过对外提供的接口服务，就可以在平台上进行企业的注册，注册通过后就可以使用该平台进行三维展示功能。通过家具管理功能模块就可以上传自己的家具模型，并可以对家具模型进行编辑。通过家居风格功能模块，可以制定不同的家具风格展示，并在家具管理功能模块中把家具加入到相应的家具风格中。本系统采用精细化的数据权限控制，精确到行级，列表级，表单字段级，为不同的角色分配不同的权限。在部门管理功能模块中添加相关企业信息，部门信息。在用户管理功能模块中可以添加用户，分配该用户的资源权限。在部门管理功能模块中把加入到相应的部门中进行统一管理。

前端主要进行家具模型展示，前端采用bootstrap框架技术和HTML5开发引擎Three.js 。前端主要分两个模块，左侧预览区和右侧模型展示区，首先我们可以上传一张室内背景图在右侧模型展示区，然后在左侧预览区选择家具模型拖动到右侧模型展示区进行展示。本系统实现动态添加删除多个模型和模型位置摆放，大小控制等。本系统还实现了在VR效果下摆放家具模型，使家具摆放更具真实感，虚拟地面的设计使模型的摆放更加精确，人眼位置的设定可以在不同的方位观看家具摆放的效果。

本系统的数据库采用MySql数据库，该数据库的设计主要是用于对虚拟家居系统的家具信息，用户信息，企业信息进行存储。

2.三维全景展示功能与threejs技术

2.1 ThreeJS技术的理论与应用

在项目的初期，我们就将三维全景展示与网页结合的观念作为了项目的核心。三维全景展示是项目的重点与创新点，而在网页上来实现则是考虑到用户的使用方便性同时需要减少开发的成本来决定的。随着现代技术的进步以及WebGL的规范，游览器能很好的展示高质量三维效果，threejs作为一个比较完善的基于webgl的开源项目，能用JavaScript高效的在网页上实现3D程序。

Threejs是一个3DJavaScript库，作者是巴塞罗那的Ricardo Cabello Miguels 又称作Mr.doob。作为webGL的一个第三方库，Threejs对于大多数的软件以及游览器都具有良好的兼容性。通俗的来讲，threejs即为 three+js，three代表3D，js则指JavaScript，Javascript是运行在web端的脚本语言，threejs作为JavaScript的一个图形引擎，能够在网页上完美的实现三维效果以及3D渲染功能，同时作为WebGL的衍生并对其进行了一定的封装，threejs相对webGL只需用少量的代码就能实现相同的效果。

2.2 在项目中添加的创新点

市场上存在着一些家居售卖网站，同样也使用着三维展示的效果。

同时threejs中的camera元素决定着三维画面中摄像机的高度，对应到网页来看就是人眼观察整个房间布局的高度。用户上传的背景图或许会因为摄影者的身高或相机照相位置与网页中摄像机摆放高度有差异，影响了整个页面的协调性。我们通过对camera函数的修改，使其成为用户自设定的参数，让用户能够完全自己修改摄像机在画面里的高度，解决了上传的背景存在不适感的问题。

由于项目与家具的摆放相关，在项目的进行中也需要考虑到用户的使用体验。为项目添加上虚拟地面功能，对场景scene添加了GridHelper函数，作为网格的GridHelper函数自带size和division参数，用户可根据自己拍照时实际地面的高度作为参照物，对在网页上呈现的三维全景虚拟家具背景设定自己需要的地面高度，只需输入地面高度、宽度，展示页面上便会生成相应的三维地面，家具在其中的摆放便会受到地面的限制，完全能够模拟现实里真实的家具摆放。

3.VR技术在项目中的应用

随着VR技术的火热发展，基于交互式的三维动态视景和实体行为的系统是目前企业发展的新机遇，在科学发展的驱动下三维全景展示很大程度上将会成为相关领域未来的新方向。本项目同时将全景虚拟技术和3D模型结合一体能最大程度上的去模拟现实情景，提高用户的可参与性和可操作性，让用户能有一种身临其境之感。本项目实际应用价值很高，虽功能强大但操作简单，用户只需上传一张室内图即可看到家具摆放情况即所见即所感。有功能完善的后台系统作为支持，降低了企业人员的工作量。全景虚拟展示无疑将会成为未来新潮流，提前进入全景领域无疑是一种明智之举，抓住这样的机遇才是成功的关键。全景虚拟展示应用很广，全景虚拟家居展示平台只是其中一个领域，而在其他领域也会涉及。

4.结束语

本论文主要在为解决目前家具市场上家具展示遇到的问题和挑战，研究和设计三维家具展示平台。该平台充分利用计算机科学，提出了一套贴合家具购买者需求，简单有效，低复杂度，切实可行的家具展示平台解决方案。