基于Three.js的虚拟三维展示研究

王建兴

【摘 要】本文研究了关于实体虚拟数据模型构建方法，通过对javascript中的Three.js引擎的研究，实现了基于网页的虚拟实体三维展示。

【关键词】Three.js；OBJ；实体；三维展示

0 引言

随着计算机与互联网的高速发展，HTML5的出现标志着互联网进入到了一个新的层次，用户通过浏览器就能使用到以往需要安装各种插件才能进行的各类操作。在新技术里，人们想要将现实的物体通过虚拟环境呈现的过程也将变得简单。

本文研究实体虚拟三维展示。其实现的过程主要分为两部分：一是如何实体还原成虚拟模型；二是将虚拟模型在网页端口进行展示。

1 需求分析

本文基于以下用户需求：

①主要用于手机观看，并通过微信朋友圈进行传播。

②响应式网页，能够根据不同屏幕尺寸的手机浏览器，自动调整页面至最佳比例和模式，同时照顾到iOS和Android平台的浏览器。

③页面格式为单列直通。最上部为大标题，接着就是3D展示，下部是简介。

④通过Three.js引擎，在HTML5的页面中，实时渲染3D模型。模型能够通过手指移动且360度旋转，并能通过两指操作进行缩放。

⑤3D模型由用户提供obj格式。此模型结构简单，所需计算量较小。

⑥只需要前端的工作，不需要后台数据库库支持。

2 场景以及模型构建

2.1 3d空间模型

Three.js创建的场景scene空间坐标x，y，z轴可以无限延伸，本文实验布局提供了九个点的图形展示。Three.js依据WebGL的规范性，做了一些简单的封装，可以利用强大的镜头控制器完成“行走”等一系列动作，真实完成虚拟景象。

2.2 天空盒子背景

外景天空盒子技术要领：相机的拍摄相片应时候做裁剪处理，形成正方形图片，这样完成盒子模型的仿真程度会比较高。其次，对于相机的像素要求高，能够最大限度还原出场景的全景。

外景的天空盒子原理模型展示：从一个定点中心拍摄上下左右前后共计6张景观图片将其经过处理后贴放在实物的四周，模拟出虚拟的场景来。

2.3 OBJ模型制作

OBJ模型的制作根据图片还原成3D模型的原理，通过对标志点的识别联系，建立起相应的虚拟3D实体数据模型。完成实体三维虚拟化过程需要先将实体进行照片的拍摄。拍摄的照片数量越多，能够识别出来的标志点就越多，还原成的图片与实体的真实度就越多。一般对实体拍摄的照片数量需要32张。

实体还原的真实度除了受照片所能识别的特征点数量影响外，对于相机的像素、环境光的影响都有一定的要求。在过亮或者过暗环境拍摄的照片，还原出来的实体景象也相对较暗。一些像素较低的拍摄器械会导致还原出来的虚拟实体清晰度不高。

3 实现方法

使用Three.js创建项目的主要过程：创建场景（画布），载入相机（carema），实体（OBJLoader），光线（light）元素，最后通过渲染（render）获取图片，这个过程中，Three.js提供了多种的相机以及光线，可以通过调用不同的类库进行环境的布置。

完成了文件的导入部分后，最后就是修缮整体的视觉感受。整体效果实现后，浏览场景时，可以随意转换场景，观看实体的展示。实体在虚拟呈像中的真实度相比于flash制作出来的真实度更高。

4 总结

本文工作目的是通过三维技术更好地更好的展示商品。HTML5的問世以及随之而来的各种类库强大了web网络的这种服务能力。基于Three.js库可以实现的虚拟三维展示应用，同时还可以把相关应用拓展到各种Web终端平台。

【参考文献】

[1]王腾飞，等.基于Three.js 3D引擎的三维网页实现与加密[J].企业技术开发，2014，33（2）.

[2]任康红，等.基于Three.js的真实三维地形可视化设计与实现[J].测绘与空间地理信息，2015，38（10）.

[3]极客学院.Three.js案例指导[EB/OL]. http：//www.jikexueyuan.com/course/2109_1.html.endprint