实现WebVR的技术探究
摘 要
全景虚拟漫游其实看到很多例子，比如地图上的全景，校园的全景，之前在朋友圈流行转发的公司全景。但真的想起来要去研究或者实现一下，是前几日说工作上可能会有这样的一个需求。觉悟来得太晚，好奇心也不够重，这么好玩新奇的东西怎么一开始没想到去尝试呢？由于对这方面的了解是一篇空白的，于是直接在google里搜，发现资料很少，说的稍微全一些的就属《打造H5里的“3D全景漫游”秘籍 》。几种方案中，打算决定采用ThreeJS，因为之前也稍微看过一点，也打算学习，这正好是一个机会。但是看到这篇里面的教程其实说的比较含糊，关键步骤应该都展示出来了，但是没有完整的代码还是不能让我有个很好的概念的。本文基于互联网络webVR技术，结合面向对象的思想，采用网络技术和数据库技术，研究开发在线三维虚拟产品展示系统。首先介绍了课题的研究背景及意义，提出论文主要研究内容；其次，研究了虚拟产品展示系统开发方案和相关技术，在对整体系统设计与实现的基础上,本文进一步分析了系统关键模块的业务流程,研究了系统各个功能模块的设计方法。最后，在分析的基础上，论述了本系统各个功能模块，使用 java 技术进行三维展示系统的设计与实现，包括前台首页、车型管理、以及后台登录、汽车管理模块等主要功能，使用THREE.js技术设计模型，结合专业引擎THREE.js技术，实现了3d模型与网站完美结合，完善了在线三维虚拟产品展示系统的各个功能，同时也保证了系统运行的稳定，达到了系统运行的性能要求。
关键词：java，webVR，unity，THREE.js，数据库
Abstract
There are many examples of panoramic virtual roaming, such as panorama on the map, panorama of the campus, the panoramic view of the company that was popular in the circle of friends. But it really reminds me of the need to study or realize that there may be such a demand on the job the other day. Consciousness is too late, and curiosity is not enough. How can such a fun new thing not be attempted at first? As the understanding of this is a blank, it was searched directly in the Google and found little information, and a little more of it was the secret of "creating the" 3D panoramic roaming "in the H5." In several schemes, I intend to decide to adopt ThreeJS, because I have seen a little bit before and intend to learn, which is just an opportunity. But seeing the tutorials in this article is ambiguous, the key steps should be displayed, but without the complete code, I can't give me a good idea. Based on the webVR technology of interconnected network and the idea of object oriented, this paper uses network technology and database technology to develop an online 3D virtual product display system. Firstly, it introduces the background and significance of the research, and puts forward the main research contents of the thesis. Secondly, it studies the development scheme and related technology of the virtual product display system. On the basis of the design and implementation of the whole system, this paper further analyzes the business flow of the key modules of the system, and studies the design of each function module of the system. Method。 Finally, on the basis of the analysis, this paper discusses the function modules of the system, and uses the java technology to design and implement the 3D display system, including the front front page, the model management, the backstage login, the automobile management module and so on. The THREE.js technology is used to design the model and the THREE.js technology of the professional engine. It realizes the perfect combination of the 3D model and the website, and improves the functions of the online 3D virtual product display system. At the same time, it also ensures the stability of the system operation and achieves the performance requirements of the system operation.
Keywords: java, webVR, unity, THREE.js, database
目录
1 引言 3
1.1 课题研究背景及研究意义 3
1.2 虚拟展示技术的国内外研究现状 5
1.2.1 国外研究现状 5
1.2.2 国内研究现状 6
1.2.3 现有系统存在的问题 7
1.3 研究内容 8
2 虚拟产品展示系统开发方案与相关技术 7
2.1总体开发方案 7
2.1.1 系统整体架构 7
2.1.2 系统运行模式 8
2.1.3 需求分析 9
2.1.4 预期设计目标 10
2.1.5 系统流程图 10
2.1.6 系统用户用例图 11
2.2 系统开发相关技术 12
2.2.1 Apache服务器介绍 12
2.2.2 MYSQL数据库介绍 13
2.2.3 java介绍 13
2.2.4 CodeIgniter框架平台 14
2.3 软件开发工具介绍 15
2.3.1 unity引擎 15
2.3.2 THREE.js介绍 16
2.3.3 Adobe Dreamweaver 介绍 17
3 虚拟产品展示系统概要设计 18
3.1 数据库设计 18
3.1.1 数据库详细设计 18
3.1.2 数据库结构设计 18
3.1.3 数据库逻辑结构设计 19
3.1.4 数据库链接 21
3.2 前台功能模块设计 21
3.2.1 系统主界面程序设计 21
3.2.2 车型管理程序设计 22
3.2.4 三维展示模块 23
3.2.5 留言模块程序设计 24
3.3 后台功能模块设计 26
3.3.1 后台登录 26
3.3.2 发布汽车 26
3.3.3 编辑汽车信息 29
3.3.4 增加管理员 30
3.3.5 管理员回复评论模块 31
4 虚拟产品展示系统设计与实现 32
4.1 3d模型制作 32
4.2 数据库设计 33
4.3 功能模块的实现 34
4.3.1 前台功能模块设计 34
4.3.2 后台界面的实现 36
入门例子 40
全景虚拟漫游分析 43
全景虚拟漫游实现 45
5 结 论 40
参 考 文 献 41
1 引言
随着信息技术的飞速发展，Internet 逐渐成为当今信息传播的主要渠道之一。实体展示也逐渐由现实走进网络，随之在网络上出现了相应的虚拟展示。早期的虚拟展示主要借助于网站，并通过图片、文字和视频的方式将实体展品呈现出来，通过网络跨越时空进行传播。这种二维描述三维空间的形式与真实的世界相差甚远，纵多环境下对有效表现现实世界的事物和现象显现出较大的差距，制约了对人们认识世界、改造世界能力的发挥。
虚拟现实是一种由计算机和电子技术创造的新世界，是一个看似真实的模拟环境，通过多种传感设备，用户可根据自身的感觉，使用人的自然技能对虚拟世界中的物体进行考察和操作，参与其中的事件，同时提供视、听、触等直观而又自然的实时感知，并使参与者“沉浸”于模拟环境中 。Wed3d 技术[1]是虚拟现实的一个分支，它是一种互联网上利用的虚拟现实技术，可以简单地把它看成是 webVR技术和 3D 技术相结合的产物，本质特征是网络性、三维性和互动性。webVR3D 的虚拟展示技术能创建出逼真的三维物品虚拟模型[2],在网上呈现出丰富的3D 交互视觉效果，以三维虚拟空间和实时交互为特征的虚拟现实能够多方位的展现商品，充分表现出商品的特色与立体感，拉近了商品与消费者的距离，消费者可以详细地查看商品的各种特征，看、听甚至是触和嗅，提供给消费者极大的观察空间和自由，刺激了消费者的购买欲望。
THREE.js作为一款专业的游戏引擎,它能够提供方便、简洁的多平台游戏开发,对DirectX和OpenGL拥有高度优化的图形渲染管道,非常适合用于虚拟现实世界的生成。本系统利用THREE.js做一个产品的展示。可使产品做到全方位的展示、色彩实时装配等，具有直观立体、真实互动的效果，用户可以动手操作，了解产品的每一个细节，更容易找到心仪的产品。三维虚拟产品展示系统的应用有可能大幅度改善顾客在网上购买商品的经历，显著提高电子商务的可行性。因此，针对网络虚拟商品展示技术的研究是具有十分重要的理论意义和实际的应用价值的。
1.1 课题研究背景及研究意义
虚拟现实是一种由计算机和电子技术创造新世界，是一个看似真实的模拟环境通过多种传感设备，用户可根据自身的感觉，使用人的自然技能对虚拟世界中的物体进行考察和操作，参与其中的事件，同时提供视、听、触等直观而又自然的实时感知并使参与者“沉浸”于模拟环境中。虚拟现实展示设计，是伴随着虚拟现实技术和相关计算机应用技术的产生普及而形成的视听设计新课题，它利用计算机虚拟现实技术并整合图像、声音、动画、视频等多媒体手段，通过创建和表现虚拟物体与虚拟空间使信息的展示方式有了新的途径和形式，使信息更直观、高效的传递。虚拟现实技术的飞速发展，己经开始广泛应用于社会生活的各个方面，其中将虚拟现实技术应用于电子商务(E-Commerce)是一个非常重要的发展方向。E-Commerce 作为一种新的商务模式，伴随着互联网的快速发展，以三维的虚拟空间和实时交互为特征的虚拟现实技术在这方面得天独厚的优越性以及它与 Internet 技术的无缝结合，使得在电子商务中引入虚拟现实技术将会带给电子商务更多新的特性。借助 Internet 把商家和消费者连接起来，使得商品交易过程突破了传统的时间、空间限制。通过构建具有真实感的3D虚拟产品展示系统，让顾客能够从不同角度浏览产品，并能够实现交互地选择产品的细部进行审视，甚至可以进入实体的内部进行浏览，从而为顾客提供了一个全面了解产品的新体验，为企业提供了展示其产品的新模式，这已成为电子商务和广告业发展的最新趋势，必将带来显著的经济效益。产品网络三维虚拟展示已经成为大势所趋。几乎所有的大公司都通过运用虚拟现实技术，建立了自己的网站，在网页上展示自己的产品虚拟模型和服务，以给消费者极大的观察空间和自由。大大小小的网上商城如雨后春笋般涌现，消费者可以从各个方位 360°的任意角度观察产品，具有全方位、互动式、两维与三维结合的特点；同时消费者也可以在虚拟商城内随意漫游，选择自己感兴趣的产品，然后下单购买。但是目前大多数网站仅仅停留在产品的宣传层面上都是以文字、图片或 flash 动画作为产品展示的主要方式，缺乏逼真的人机互动功能。某个产品要想在同类产品中脱颖而出，获得消费者的青睐，就必须倚仗一个非常出色的虚拟展示系统。此外，随着电子商务的发展，个性化定制己经不再是专门针对少数人的服务，普通消费者完全可以对展示出来的商品提出自己独特的需求，并提交给商家，商家可以根据用户的合理需求对商品做出相应的设计，甚至可以专门为某个消费者定制产品。
本文针对目前产品展示的现状，考虑虚拟现实技术的优势及局限，尝试将传统展示设计理论应用于基于网络的虚拟展示系统，利用计算机网络、虚拟现实、人机交互、网络数据库等技术构建基于网络的应用于电子商务的虚拟展示系统，营造一种新型的产品展示方式。该系统力求弥补传统产品展示受时间空间限制、交互性差等缺点，与传统展示相结合为消费者提供更为全面的服务。
1.2 虚拟展示技术的国内外研究现状
1.2.1 国外研究现状
美国是虚拟现实技术的发源地。美国虚拟现实研究技术的水平基本上就代表国际 虚拟现实发展的水平。目前美国在该领域的基础研究主要集中在感知、用户界面、后台软件和硬件四个方面。
美国宇航局的Ames 实验室：将数据手套工程化，使其成为可用性较高的产品。在约翰逊空间中心完成空间站操纵的实时仿真。大量运用了面向座舱的飞行模拟技术。对哈勃太空望远镜的仿真。现在正致力于一个叫“虚拟行星探索”（VPE）的试验计划。现在 NASA 己经建立了航空、卫星维护虚拟现实训练系统，空间站虚拟现实训练系统，并且已经建立了可供全国使用的虚拟现实[2]教育系统。
北卡罗来纳大学（UNC[3]）的计算机系是进行虚拟现实研究最早最著名的大学。他们主要研究分子建模、航空驾驶、外科手术仿真、建筑仿真等。Loma Linda大学医学中心的David Warner博士和他的研究小组成功地将计算机图形及虚拟现实的设备用于探讨与神经疾病相关的问题，首创了虚拟现实儿科治疗法。
麻省理工学院（MIT）是研究人工智能、机器人和计算机图形学及动画的先锋，这些技术都是虚拟现实技术的基础，1985年MIT成立了媒体实验室，进行虚拟环境的正规研究。SRI研究中心建立了“视觉感知计划”，研究现有虚拟现实技术的进一步发展。1991年后，SRI进行了利用虚拟现实技术对军用飞机或车辆驾驶的训练研究，试图通过仿真来减少飞行事故。
在当前实用虚拟现实技术的研究与开发中日本是居于领先地位的国家之一，主要致力于建立大规模虚拟现实知识库的研究。另外在虚拟现实的游戏方面的研究也做了很多工作。
东京技术学院精密和智能实验室研究了一个用于建立三维模型的人性化界面。NEC 公司开发了一种虚拟现实系统，它能让操作者都使用“代用手”去处理三维 CAD 中的形体模型，该系统通过数据手套把对模型的处理与操作者手的运动联系起来。
京都的先进电子通信研究所（ATR）正在开发一套系统，它能用图像处理来识别手势和面部表情，并把它们作为系统输入。
日本国际工业和商业部产品科学研究院开发了一种采用X、Y 记录器的受力反馈装置。
东京大学的高级科学研究中心将他们的研究重点放在远程控制方面，最近的研究项目是主从系统。该系统可以使用户控制远程摄像系统和一个模拟人手的随动机械人手臂。
东京大学原岛研究室开展了3项研究：人类面都表情特征的提取、三维结构的判定和三维形状的表示、动态图像的提取。
东京大学广濑研究室重点研究虚拟现实的可视化问题。为了克服当前显示和交互作用技术的局限性，他们正在开发一种虚拟全息系统。
筑波大学研究一些力反馈显示方法，开发了九自由度的触觉输入器，虚拟行走原型系统。
富士通实验室有限公司正在研究虚拟生物与虚拟现实环境的相互作用。他们还在研究虚拟现实中的手势识别，已经开发了一套神经网络姿势识别系统，该系统可以识别姿势，也可以识别表示词的信号语言。
