Embed Size (px)
Citation preview
深圳职业技术学院
2018
研究报告 基于 WebGL 的 3D 引擎研究
教育技术与信息中心 陈锐浩
1 / 32
目录
1、课题的研究背景 ......................................................................................................................... 2
2、课题研究的目的意义 ................................................................................................................. 3
3、研究内容 ..................................................................................................................................... 4
3.1 项目研究范围 .................................................................................................................... 4
3.2 基于 WebGL 的 3D 绘图标准及相关类库的研究 ........................................................... 5
3.3 Three.js 引擎研究。 ........................................................................................................... 7
3.3.1 基本介绍 ................................................................................................................. 7
3.3.2 主要组件介绍 ......................................................................................................... 9
3.3.3 基于 Three.js 的应用框架研究 ............................................................................ 14
3.3.4 基于 Three.js 的 3D 互动管理平台的研究 ......................................................... 15
3.3.5 基于 Three.js 的 WebVR 在艺术品展示中的研究 ............................................. 18
4、相关成果 ................................................................................................................................... 25
4.1 深圳市文化场馆数字化技术工程实验室网站平台 ....................................................... 25
4.2 开发系列基于浏览器的 3D 应用 .................................................................................... 27
4.3 开发全景漫游应用及 WebVR 系列应用 ........................................................................ 28
4.4 学术成果 .......................................................................................................................... 29
5、经济、社会、生态效益 ........................................................................................................... 30
6 总结 ............................................................................................................................................ 32
2 / 32
1、课题的研究背景
基于浏览器的 3D 技术最早采用的是 VRML，VRML 第一次将交互式的 3D 图形带入互
联网中，但是 VRML 的可编程性受到脚本语言虚拟机的限制，难以编写出用于整个 3D 场
景的通用代码，其次，VRML 的渲染模型是基于原始的 OpenGL API 的固化图形管线的，这
意味着除了内置于系统的视觉效果之外，开发者无法添加新的自定义效果。
随着图形技术和编程语言的发展，3D 图形管线也变成了完全可编程的，开发人员或设
计人员可以创造出无穷的光影着色效果。另外，JavaScript 的虚拟机的性能也得到很大的提
升，在浏览器中顺畅改变 3D 场景成为可能。
随着近几年来 OpenGL ES 2.0 API 的发展，计算机图形学的研发工作达到了顶峰，衍生
出 WebGL（全写 Web Graphics Library） API。WebGL 是一种 3D 绘图协议，和 3D 图形规
范 OpenGL、通用计算规范 OpenCL 一样来自 Khronos Group，而且免费开放，并于 2010 年
上半年完成并公开发布。2011 年 3 月，多媒体技术标准化组织 Khronos 在美国洛杉矶举办
的游戏开发大会上发布 WebGL 标准规范 R 1.0，支持 WebGL 的浏览器不借助任何插件便可
提供硬件图形加速从而提供高质量的 3D 体验。在最新的 2.0 版增加了对延迟渲染、色调映
射、粒子效果等先进的技巧。这也将 WebGL 提升到了与 OpenGL ES 3.0 相同的功能水准。
目前WebGL标准已经获得了业界广泛的支持: 包括Apple (Mac OS Safari nightly builds)，
Google （Chrome9.0)， Mozilla (Firefox4.0 beta)和 Opera (preview build)旗下的操作系统和浏
览器都支持 WebGL，微软的 Internet Explorer 11 的 WebGL 接口也已经封装完成。在国内包
括 QQ、UC 等移动浏览器，微信等移动 HTML5 落地场景，都加入了对 WebGL 的支持，截
至 2015 年，WebGL 在移动平台上的覆盖率就超过了 85%。
WebGL 完美地解决了现有的 Web 交互式三维动画的两个问题：第一，它通过 HTML
脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层
的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的 OpenGL 接口实现
的。
目前国外 WebGL 主流开源框架有 Threejs、SceneJS、Babylon.js 等，国内的有 Oak3D
引擎、白鹭引擎等，这些开源的 WebGL 类库降低了基于 WebGL 的 3D 应用的开发难度，进
一步推进了 WebGL 的普及。
随着浏览器性能的提升，WebGL 的性能瓶颈得到突破，目前基于 WebGL 的 3D 应用已
3 / 32
经在很多领域出现，如 3D 网页游戏，电子商务，数字博物馆等。以腾讯为首的国内巨头，
在 HTML5 内容领域已经开始快速布局。腾讯在 GMIC 上发布腾讯浏览服务（TBS），在升
级的技术支持上开始全面开放支持 WebGL，从而力图让接入 TBS 的 HTML5 内容，拥有更
优秀的效果表现和用户体验。主流的游戏开发引擎 Unity3D 也增加了 WebGL 的支持，开发
者可以把作品直接发布为基于浏览器的 WebGL 应用。
2、课题研究的目的意义
传统的 3 维模型，虚拟实景，都离不开渲染器的支持，以单机版为主，由于带宽和运行
速度的限制，网络版的实现功能非常有限。随着 Html5 的出现，基于 Html5 的 Canvas 对象
实现的动画效果，由于支持所有的移动终端，所以得到了推广。WebGL 的出现丰富和完善
了 Html5 的 3D 效果，WebGL 定义了一套 API，能够允许在网页中使用类似于 OpenGL，实
际上是一套基于 OpenGL ES 2.0 的 3D 图形 API。这些 API 是通过 Html5 的 Canvas 标签来
使用的。WebGL 使用了 Html5 的 Canvas 元素，因此不需要借助 Flash、Java 或其他图形插
件来运行，直接将 3D 图形引入万维网。通过 WebGL，3D 物体形象可以直接在网页上呈现
出来，网页开发人员可以直接借助系统显卡在浏览器里更流畅地展示 3D 场景和模型，还能
创建复杂的导航和数据视觉化。WebGL 技术标准免去了开发网页专用渲染插件的麻烦，将
开发流程进一步简化的同时，又能为用户带来更炫酷的 3D 效果体验。
“深圳市文化场馆数字化技术工程实验室”项目是我校承担的第一项深圳市发改委资助
的重点工程实验室，目标是对深圳市文化场馆，包括博物馆、展览馆、非物质文化遗产场馆
等进行数字化技术研究，并通过先进的网络平台和网络应用技术进行展示。WebGL 的特点
能够很好地满足项目的要求，解决 3D 场景和模型数据在线快速呈现和交互的难题。
由于直接利用底层 WebGL 接口进行开发，效率很低。因此，需要将常用的 WebGL 功
能封装起来，为用户提供一种中间件机制，使用户在无需了解底层细节的情况下，快速开发
Web 交互式三维图形应用。目前开源的 WebGL 类库都缺乏相关技术文档，难以入手，而且
不同类库特点不同，无法完全满足现实需求，所以需要根据实际情况，参考优秀的开源框架，
重新进行整合优化，实现对 3D 网站提供底层技术的支持，解决传统 3DWeb 访问速度慢、
展示不流畅，无法支持移动终端的问题。
4 / 32
本项目的实施除了支持“深圳市文化场馆数字化技术工程实验室”项目的成功推进，而且
还能够通过引擎的研究及相关应用的开发，提高我校在基于 Web 的 3D 虚拟仿真方面的技术
实力，培养和锻炼出我校在这方面的一只队伍。
本项目的研究可以用于多个行业。
1) 电子商务, 目前产品的展示手段是文字、图片，而现在我们可以让用户有机会真正
360 度地以 3D 化的方式来呈现产品,而且支持在线 DIY,形成自己个性化产品之后再下单；也
可以用于拍卖网站，实现拍卖品在线 360 度呈现。
2) 基于 Web 的场景漫游，由于不需要插件，只需要浏览器的支持，所以容易推广，可
以用于文化场馆的漫游，房地产沙盘的立体呈现。
3) 教育行业，如制作设备的立体手册，实现设备的拆装过程，360 浏览，虚拟仿真过
程，适合于理工科类的教学。
4) 游戏开发，过去 Flash+非标准插件的 3D 页游模式，正在逐渐演变成由 WebGL 当家，
HTML5 技术提供支撑的新 3D 页游模式，现在 WebGL 为页游带来的 3D 体验甚至可以媲美
传统的 PC 桌面游戏。
3、 研究内容
3.1 项目研究范围
本项目研究内容包括底层研究和实践开发两部分，底层研究从研究 WebGL 3D 绘图标
准入手，以国外开源框架 Three.js 为案例进行学习、分析、研究；实践开发部分包括基于
Three.js 应用框架开发，以及在该框架支持之下的 Web3D 应用开发、WebVR 应用开发。
Three.js 是当下最流行的网页 3D 渲染 JS 引擎，其主要是对 WebGL 编程以面向对象方式进
行的封装。
本项目具体的研究内容如下图：
5 / 32
图 2 项目研究内容
底层研究主要包括 WebGL API 研究，Three.js3D 引擎研究，在研究的基础之上形成基
于 Three.js 的应用框架。利用该框架，可以高效开发出系列的 3D 应用、WebVR 应用。实践
开发部分采用的技术主要涉及.NetFrame4.0、SqlServer2008 数据库、Bootstrap 框架；采用的
具体语言为 C#、Javascript、CSS 等；涉及的开发工具主要有 VS2015、WebStorm、Blender、
3Ds Max 等。
3.2 基于 WebGL 的 3D 绘图标准及相关类库的研究
WebGL 是一个用以渲染交互式 3D 和 2D 图形的无需插件且兼容下一代浏览器的 Ja
vaScript API，通过 HTML5 中 <canvas> 元素实现功能。WebGL 是由 Khronos Group
集团制定，而非 W3C 组织。目前，我们可以使用的是 WebGL 第一个版本，它继承自 O
penGL ES 2.0 。而 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形
API 的子集，针对手机、PDA 和游戏主机等嵌入式设备而设计。各版本之间的关系如图 1。
6 / 32
图 1 3D 绘图标准的演化
WebGL 有如下特点：
1、 WebGL 是一套 API
JavaScript 是 WebGL 的唯一入口，WebGL 是 HTML5 技术大家族中的一员，WebGL 中
的 3D 渲染与使用 Canvas 元素的 2D 绘画类似，所有的功能都通过 JavaScript API 调用。
2、 WebGL 是基于 OpenGL ES2.0
OpenGL ES 是历史悠久的 3D 渲染标准 OpenGL 的精简版本。“ES”是指“Embedded Sy
stems”，即嵌入式系统，目前主流的移动设备都采用 OpenGL ES 来进行 3D 渲染，WebGL
沿着 OpenGL ES 的足迹前行，打造一个跨平台、跨浏览器、高性能的 3D Web API。
3、 WebGL 和其他网络内容可以整合在一起
WebGL 内容可以放置于页面任何内容之上或之下，WebGL 内容最终在页面解析为 can
vas 画布元素，可以作为页面的一部分，也可以充满整个页面。可以放置与<div>标签中，采
用 z-index 属性制定堆叠顺序。一个页面可以包含 WebGL 应用和传统的 html 原色，浏览器
会将包括 3D 图形在内的页面上的所有图形和文字无缝整合在一起，提供给用户。
4、 WebGL 是用于搭建动态 Web 应用的
WebGL 能够跟浏览器整合，现实开发中一般都结合其他动态开发语言，如 c#、php、j
sp 等进行内容的动态管理，形成具体的应用，如本项目在数字化工程实验室平台的开发过
程中，就结合动态语言 c#进行开发，形成完整产品。
5、 WebGL 是跨平台的
WebGL 可以运行于任何操作系统、从手机、平板到 PC
6、 Web GL 是完全免费的
7 / 32
基于 WebGL 的原生 API 开发应用难度很大，效率不高，所以出现了很多开源的 JavaS
cript 工具集简化开发工作。比较有名的有如下：
Three.js：是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了
摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。这款引擎功能
强大，但是目前还处在比较完善阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的
学习难度，three.js 的代码托管在 github 上面。
Babylon.js：一个强大的 3D 游戏引擎，由 Microsoft 的员工 David Cathue 主导开发。
和 Three.js 相比，Three.js 更倾向于动画，而 Babylon.js 则更适合游戏开发。
PhiloGL：增加了额外的功能帮助你可以使用本地的 WebGL ，这个 WebGL 的接口不
是百分之百的被封装好了的，这使得 PhiloGL 上手难度较高。
SceneJS：一个开源的 JavaScript 3D 引擎，提供基于 JSON 的场景 API。特别适用于渲
染由大量各自独立却又铰链在一起的物体组成的模型，比如工程学和医学上常用的高精度模
型。
CopperLicht：一个“商业级别的 WebGL 3D 引擎和编辑器”，你可以免费使用，但是要
想获得未压缩的完整版带支持文档的源码和其他服务，则需要购买授权。
3.3 Three.js 引擎研究。
3.3.1 基本介绍
Three.js 是 JavaScript 编写的 WebGL 第三方库,是一款运行在浏览器中的 3D 引擎。提
供了非常多的 3D 显示功能。你可以用它创建各种三维场景，包括了摄影机、光影、材质等
各种对象。Three.js 的代码托管在 github 上面。 Three.js 可以大大降低 WebGL 的开发难度。
你可以将它理解成 Three + js。three 表示 3D 的意思，js 表示 javascript 的意思。合起来，
three.js 就是使用 javascript 来写 3D 程序的意思。
Three.js 源自 github 的一个开源项目，发展相当迅速，现在已经发展到 r92 版了。
Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源，Three.js
包含了许多实用的内置对象，可以方便的用于游戏开发、动画制作、高分辨模型和一些特殊
视觉效果制作。WebGL 本身并不提供拾取（picking）功能，难以知道鼠标是否正处于某个
8 / 32
物体上，而 Three.js 则固化了拾取支持，这样就可以为应用添加交互功能。
Three.js 拥有一个强大易用的数学库，可以在其中进行矩阵、投影和矢量运算；新版的
Three.js 增加了物理引擎、可以模拟重力加速度等效果；增加 WebVR 的支持，
Three.js 下载地址如下：
1).https://github.com/mrdoob/three.js 点右下角的“Download Zip”按钮下载
2). http://mrdoob.github.io/three.js/ 点左上角的“download”链接下载
目录结构如下：
Build 目录 包含两个文件，three.js 和 three.min.js 。这是 three.js 最终被
引用的文件。一个已经压缩，一个没有压缩的 js 文件。
Docs 目录 这里是 three.js 的帮助文档，里面是各个函数的 api，全是英
文。
Editor 目录 一个类似 3D-max 的简单编辑程序，它能创建一些三维物体。
Examples 目录 一些很有趣的例子 demo，可以学习参考。
Src 目录 源代码目录，里面是所有源代码。
Test 目录 一些测试代码，基本没用。
Utils 目录 存放一些脚本，python 文件的工具目录。例如将 3D-Max 格
式的模型转换为 three.js 特有的 json 模型。
.gitignore 文件 git 工具的过滤规则文件，没有用。
CONTRIBUTING.md 文件 一个怎么报 bug，怎么获得帮助的说明文档。
LICENSE 文件 版权信息。
README.md 文件 介绍 three.js 的文件，里面还包含了各个版本的更新内容列
表。
表 1 Three.js 目录结构
Three.js 开发环境及调试：
1).开发工具：Dreamweaver、Visual Studio、Zend Studio、Notepad++、Eclipse 等。推荐
使用 WebStorm，语法提示功能比较强。
2).调试：Three.js 本质上是 WebGL，如果你的浏览器不支持 WebGL，那么肯定你就不
能完整的运行 Three.js。支持 WebGL 的浏览器很多，例如 Chrome、FireFox、360 安全浏览
器 6.0 等，而 IE 浏览器对 Webgl 标准的支持就不太好。所以一般使用 Chrome 浏览器进行调
9 / 32
试。
Three.js 引擎调用方式很简单，只要 html 文件中引入 three.js 文件就可以了。只需要在
head 或 body 中引入，具体路径根据时间文件的存放位置而定，代码如下：
<script src="js/three.js"></script>
3.3.2 主要组件介绍
1)、3 大组件的关系
在 Three.js 中，要渲染物体到网页中，我们需要 3 个组件：场景（scene）、相机（camera）
和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。场景是一个物体的容
器，开发者可以将需要的角色放入场景中，同时，角色自身也管理着其在场景中的位置。相
机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。渲染器的作用就是将相机
拍摄下来的图片，放到浏览器中去显示。他们三者的关系如图所示：
代码：renderer.render(scene,camera);
图 2 场景，相机，渲染器之间的关系
2)、相机组件介绍
在 Threejs 中相机的表示是 THREE.Camera，它是相机的抽象基类，其子类有两种相机，
分别是正投影相机 THREE.OrthographicCamera 和透视投影相机 THREE.PerspectiveCamera。
正投影和透视投影的区别是：透视投影有一个基本点，就是远处的物体比近处的物体小。
10 / 32
图 3 正投影相机和透视相机效果
现实中用得最多的透视投影相机的构造函数如下所示：
PerspectiveCamera( fov, aspect, near, far )．
视角 fov：眼睛睁开的角度，即视角的大小，如果设置为 0，相当你闭上眼睛了，所以
什么也看不到，如果为 180，那么可以认为你的视界很广阔，但是在 180 度的时候，往往物
体很小，因为他在你的整个可视区域中的比例变小了。
纵横比 aspect：实际窗口的纵横比，即宽度除以高度。这个值越大，说明你宽度越大，
那么你可能看的是宽银幕电影了。
近平面 near：表示近处的裁面的距离，也可以认为是眼睛距离近处的距离。
远平面 far：表示远处的裁面。
图 4 透视相机
3)、Three.js 中的空间坐标
Three.js 使用的是右手坐标系，这源于 OpenGL 默认情况下，也是右手坐标系。解析几
何为了沟通空间图形与数的研究，需要建立空间的点与有序数组之间的联系，为此通过引进
空间直角坐标系来实现。在空间直角坐标系中，让右手拇指指向 x 轴的正方向，食指指向 y
轴的正方向，如果中指能指向 z 轴的正方向，则称这个坐标系为右手直角坐标系，反之则是
左手直角坐标系，两者的区别如下图。
11 / 32
图 5 左手坐标系跟右手坐标系
Three.js 里面提供了一个 AxisHelper 对象，AxisHelper 是一个坐标轴对象，添加到场景
中我们就可以看到世界坐标系的具体位置。
4）矩阵变换
在三维图形学中，几何变换大致分为三种，平移变换(Translation)，缩放变换(Scaling)，
旋转变换(Rotation)。三维空间的旋转有多种方式，如旋转欧拉角，矩阵，四元数。
欧拉角：Three.js 中场景里的物体都属于 Object3D 这个类。这个类中有表示物体朝向的
一个属性–rotation，这是一个欧拉类型的值，有三个轴旋转的角度，单位是π，还有一个
旋转的顺序组成，要使物体旋转可以改动这个 rotation 的值，比如让物体按 Y 轴正方向旋转
45°可以写成 object3D.rotation.y+=0.25*Math.PI。这里的旋转顺序默认使用的是‘XYZ’顺
序。另外 Object3D 还提供了几个方法来进行旋转， rotateX(angle)， rotateY(angle)，
rotateZ(angle)，分别是按照 X，Y，Z 轴的正反向旋转一个角度。但具体使用的时候和
object3D.rotation.y+=0.25*Math.PI 这种方式还是有一些区别的。另外还有一个方法是
rotateOnAxis(axis,angle) 可以指定旋转的轴，这里的 axis 是一个 Vector3 类型的值。
矩阵：Three.js 里的矩阵是一个 4x4 的复合的矩阵（Transform Matrix），将位置信息放
在了矩阵的最后一行。可以很容易的从这个矩阵里分解出旋转矩阵（Rotation Matrix），和位
置矩阵（Translation Matrix）。Matrix4 的主要方法有：
mutiply():矩阵的乘法；
transpose() :矩阵转置；
getInverse(m) :求逆矩阵；
makeRotationFromEuler(euler) :通过一个欧拉类型的值来设置矩阵的值；
makeRotationFromQuaternion(q):通过一个四元数类型的值来设置矩阵；
makeRotationonAxis(axis,theta):按一个轴旋转θ°，然后设置矩阵的值。
12 / 32
四元数（Quaternion）：四元数使用相对比较少，在 object3D 中设置 rotation 可以通过
Matrix ，也可以通过 Quaternion ，不过 setFromRotationQuaternion 的内部也是用的 Matrix。
5)、纹理和材质
纹理：纹理之于 3D 世界，就像皮肤之于动物世界一样。如果没有皮肤，那么人就会非
常的丑陋，没有纹理，那么 3D 世界也就不会那么吸引人了。
在 Threejs 中，纹理类由 THREE.Texture 表示，其构造函数如下所示：
THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type,
anisotropy )，具体参数介绍如下：
Image：这是一个图片类型，基本上它有 ImageUtils 来加载，如下代码
var image = THREE.ImageUtils.loadTexture(url); // url 是一个 http://xxxx/aaa.jpg 的类似
地址，javascript 没有从本地加载数据的能力，所以没有办法从您电脑的 C 盘加载数据。
Mapping：是一个 THREE.UVMapping()类型，它表示的是纹理坐标。
wrapS：表示 x 轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度的
时候，平面剩下的部分应该 p 以何种方式贴图的问题。
wrapT：表示 y 轴的纹理回环方式。 magFilter 和 minFilter 表示过滤的方式，这是 OpenGL
的基本概念。当您不设置的时候，它会取默认值。
format：表示加载的图片的格式，这个参数可以取值 THREE.RGBAFormat，RGBFormat
等。THREE.RGBAFormat 表示每个像素点要使用四个分量表示，分别是红、绿、蓝、透明
来表示。RGBFormat 则不使用透明，也就是说纹理不会有透明的效果。
type：表示存储纹理的内存的每一个字节的格式，是有符号，还是没有符号，是整形，
还是浮点型。默认是无符号型（THREE.UnsignedByteType）。
anisotropy：各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更
多的内存、CPU、GPU 时间。
加载好纹理，只需要将纹理映射到材质就可以了。本例子使用了一个普通的材质
THREE.MeshBasicMaterial，材质中有一个 map 属性，可以直接接受纹理．两者形成一个
THREE.Mesh 对象，并添加到场景上．
5）、光源介绍
在 Threejs 中，光源用 Light 表示，它是所有光源的基类。它的构造函数是：THREE.Light
( hex )，它有一个参数 hex，接受一个 16 进制的颜色值。例如要定义一种红色的光源，我们
可以这样来定义：Var redLight = new THREE.Light(0xFF0000)。
13 / 32
THREE.Light 只是其他所有光源的基类，要让光源除了具有颜色的特性之外，我们需
要其他光源。下面的类图是目前光源的继承结构。
图 6 光源的继承结构
可以看出，所有的具体光源都继承与 THREE.Light 类。下面我们来分析具体光源。
⚫ 环境光
应用于场景中的所有对象，用 THREE.AmbientLight 来表示，它的构造函数如下所示：
THREE.AmbientLight( hex )
它接受一个 16 进制的颜色值，作为光源的颜色。环境光将照射场景中的所有物体，让
物体显示出某种颜色。环境光的使用例子如下所示：
var light = new THREE.AmbientLight( 0xff0000 );
scene.add( light );
只需要将光源加入场景，场景就能够通过光源渲染出好的效果来了。环境光的构造函数
来看，它只有颜色，其位置对场景中的物体并没有影响，因为他是均匀的反射到物体的表面
的。
⚫ 方向光
影响对象：MeshLambertMaterial or MeshPhongMaterial.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );
⚫ 点光源
影响对象：MeshLambertMaterial or MeshPhongMaterial.
由这种光源放出的光线来自同一点，且方向辐射自四面八方。例如蜡烛放出的光，萤火
14 / 32
虫放出的光。
点光源用 PointLight 来表示，它的构造函数如下所示：
PointLight( color, intensity, distance )
这个类的参数稍微复杂一些，我们花点时间来解释一下：
Color：光的颜色
Intensity：光的强度，默认是 1.0,就是说是 100%强度的灯光，
distance：光的距离，从光源所在的位置，经过 distance 这段距离之后，光的强度将从
Intensity 衰减为 0。 默认情况下，这个值为 0.0，表示光源强度不衰减。
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 350,3 50,3 50 );
scene.add( light );
⚫ 聚光灯:
影响对象：MeshLambertMaterial or MeshPhongMaterial.
构造函数：THREE.SpotLight( hex, intensity, distance, angle, exponent )
hex：聚光灯发出的颜色，如 0xFFFFFF
intensity：光源的强度，默认是 1.0，如果为 0.5，则强度是一半，意思是颜色会淡一些。
和上面点光源一样。
distance：光线的强度，从最大值衰减到 0，需要的距离。 默认为 0，表示光不衰减，
如果非 0，则表示从光源的位置到 Distance 的距离，光都在线性衰减。到离光源距离 Distance
时，光源强度为 0.
angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度。
exponent：光源模型中，衰减的一个参数，越大衰减约快。
3.3.3 基于 Three.js 的应用框架研究
Three.js 扩展性强，为 Three.js 添加新的特性或进行自定义优化是很容易的事情，直接
封装到 Three.js 就可以。为了提高后续应用开发的重用性，降低后续开发的难度，提炼出基
于 Three.js 的具体应用框架，结构如图 10，可以应用于开发的所有应用中。
图 10 是一个基于 Three.js 的应用程序框架，程序一开始就读取系统配置，进行初始化，
然后进行渲染循环阶段，具体步骤如下：
15 / 32
⚫ 渲染器初始化，确定画布大小；
⚫ 初始化场景，创建一个空容器；
⚫ 初始化相机，确定拍摄的场景范围和景深；
⚫ 初始化光线，确定物体能否可见；
⚫ 初始化菜单，界面 UI 设置；
⚫ 渲染循环阶段不停根据 Update()函数的变化进行场景重绘。
图 7 应用框架
利用框架可以提高开发效率，把渲染器、状态统计、UI 组件、控制器、相机、光线等
组件固化下来重复使用，通过 UI 随时控制各种属性, 把常见的页面时间和鼠标互动行为也
打包为组件调用，每个应用都可以直接调用，减少重复开发工作。不同的应用差别是输入的
3D 场景数据不同和个性化交互模块需求不同。
3.3.4 基于 Three.js 的 3D 互动管理平台的研究
WebGL 内容可以放置于页面任何内容之上或之下，能够跟浏览器整合，现实开发中一
般都结合其他动态开发语言，如 c#、php、jsp 等进行内容的动态管理，形成具体的应用。
16 / 32
本项目在数字化工程实验室平台的开发过程中，就结合动态语言 c#进行开发，形成完整产
品。浏览器端采用 Html5+CSS3 编写，采用 media query(媒体查询)实现响应式网页效果，具
体适应三种情况，手机端，平板端，桌面端。
服务器端采用.NetFrame4.0+SqlServer2008 架构，采用 C#语言进行开发。
整个平台具体结构如下图所示：
图 8 3D 互动平台体系结构
如上图所示，3D 图形引擎位于浏览器端，基于 Three.js 进行二次开发，采用模块化方
式开发，分成若干模块。3D 模型在进行页面解析的时候，直接访问服务器端的模型文件，
借助浏览器端的 3D 图形引擎进行渲染和运行。对模型的操作，分两种，一种是不需要修改
服务器端模型文件的，一种是需要修改的，则通过异步传输模式发送请求。用户在客户端的
操作，需要保存状态的，如对 3D 物体进行了个性化设置，需要保留状态的，则相关参数保
存到服务器数据库中。服务器端主要实现平台的管理和模型管理。
3D 图形引擎具体模块主要功能如下：
场景模块：场景是所有物体的容器，如果要显示一个 3D 图形，就需要将该 3D 图形对
象加入场景中。
17 / 32
相机模块：相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人
站在不同位置，抬头或者低头都能够看到不同的景色。场景只有一种，但是相机却又很多种，
和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合
风景。相机主要包括两种，它们是：透视投影相机、正投影相机，前者有远近之分，后者没
有。
渲染器模块：渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方
式来绘制。渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。渲染有两种方
式，实时渲染和离线渲染，本项目主要研究实时渲染，通过渲染循环实现，把场景的变化，
通过摄像机呈现在浏览器，就形成了 3D 互动。
对象模块：包括网格对象，骨络对象，封装了常见的几何图形，便于用户快速创建图形，
包括三角行，立方体，球体，平面，柱体等对象，复杂的对象需要通过专业的 3D 建模软件
制作。
材质模块：材质包括物体的物理属性和具体的纹理，通过给 3D 对象设置材质，实现逼
真的效果。
光源模块：光源决定了渲染真实性，主要包括：环境光，区域光，方向光，聚光灯，点
光源。
模型加载模块：项目主要研究*.vtk，*.stl，*.obj，*.js 等格式的 3D 图形的加载和渲染
呈现，每种格式的文件结构不同，需要给每种格式编写加载算法。服务器上的模型文件大多
是存储的模型的顶点信息，这些信息可以以文本的方式存储的（并不一定需要用文本的方式
存储），具体加载思路如下图：
图 9 模型解析思路
1) 第一步：浏览器下载文本文件，这是一件很普通的事情，只需要使用 Javascript 的异
步请求就可以实现了。
18 / 32
2) 第二步：Javascript 解析文本文件并生成一个 geometry，根据需要添加材质，最终生
成 Mesh（网格对象）。
3) 当产生 Mesh 后，将其加入到场景中。
控制模块：通过对各种事件的侦听，执行回调函数，实现在线交互，如对窗口的自动缩
放感应，对键盘和鼠标的操作侦听，该模块主要实现对 3D 模型的人机交互操作。
数学模块：主要实现用数学的方法来描述和计算各对象，如向量，坐标情况，顶点情况，
线的情况，面等情况。
配置模块：主要是前端应用的输入和设置功能，根据不同应用开发不同的配置功能。
动画模块：静态模型只能进行 360 度旋转，缩放操作；动画模块可以实现对动态模型的
支持，实现基于层次对象的动画，这个层次可以是 3D 对象或骨头，并提供对 3D 动画对象
一系列的操作方法，如 start()，stop()，update 等。
状态模块：该模块主要是调试需要，呈现页面渲染的性能参数，便于知道程序的运行性
能。
3.3.5 基于 Three.js 的 WebVR 在艺术品展示中的研究
3.3.5.1 在线艺术品展示方法介绍
在线艺术品拍卖平台和在线博物馆系统里面，艺术品的展示模块是系统的核心，随着前
端技术的成熟，其展示模式也不断在完善，用户体验越来越成熟，从早期的图片展示慢慢转
向 VR 支持，具体呈现方式历经三个阶段，平面展示、3D 展示、VR 展示。
第一阶段平面展示，主要是以平面图片的形式进行展示，为了让用户对展品细节看得更
清除，采用了小图片和高分辨率图片结合的方式，利用诸如 jquery.zoom 之类的组件实现放
大镜效果，当鼠标在小图片上面停留的时候，对应的部位就会出现放大图片的效果，如图
10 所示，当鼠标停留在左侧展品的时候，右边就会出现以左侧鼠标为中心的一个方型区域
的放大图，在左侧图片上面移动鼠标可以查看不同位置的细节，这种模式在很多艺术品展示
网站一直有使用，像国内艺术品互联网拍卖先驱嘉德在线就采用这种展示方案。
19 / 32
图 10 嘉德在线拍卖品展示方案
第二阶段 3D 展示，从平面图片开始向 3D 展示发展，实现方式主要有两种，第一种采
用环物摄影方式实现，就是运用摄影技术把一件产品从不同角度拍摄成多个画面，再将多个
画面用三维技术制作成一个完整的动画并通过相应的程序进行演示，客户可以随意拖动鼠标，
就能从各个角度观看产品的每一个部位和结构，由于采用数码图片，放大都会失真，而且受
限拍摄条件，一般只是水平拍摄，导致只能呈现水平方向的 360 度，垂直方向无法观看。第
二种模式采用 3D 模型结合材质贴图进行呈现，利用 WebGL 实现基于浏览器的在线渲染，
通过 WebGL，前端开发人员可以直接借助 GPU 在浏览器里更流畅地展示 3D 场景和模型，
实现复杂交互。WebGL 技术标准免去了开发网页专用渲染插件的麻烦，简化开发流程，给
用户带来炫酷的 3D 效果体验。基于 WebGL 开发的在线展品展示系统比传统的图片展示表
达信息更丰富，解决了二维图片角度的限制，用户可以对展品进行 360 度旋转和随意缩放，
如图 11 所示，这是项目组团队开发的深职院南山匠人团队产品在线展示应用，图中展品为
匠人团队开发的羊壶，用户可以在右侧转盘选择不同展品观看，每个展品可以随意缩放，360
度观察，没有死角。
20 / 32
图 11 3D 展示应用-南山匠人
第三阶段 VR 展示，在第二阶段的基础之上，引入 WebVR 技术，实现基于浏览器的
VR 应用。WebVR 提供了专门访问 VR 设备的接口，同时能够接收这些设备的位置和动作
信息，开发者可以直接采用 JavaScript构建基于浏览器的VR应用，体验者能够在支持WebVR
API 的浏览器里运行 VR 内容。在手机上运行 WebVR 应用，利用手机的计算性能和追踪功
能，用户只需要再加一个简单的 VR 盒子就可以进行体验，大大了降低了 VR 体验的门槛。
WebVR 也支持主流的 VR 头盔，如 Oculus 和 HTC Vive ，只要在支持 VR 的 PC 上运行火
狐的 Firefox Nightly 和设置 VR enabled 的谷歌 chrome 浏览器就可以。VR 体验缩短了用户
和具体艺术品的距离，让用户足不出户，也能有身临其境的逼真体验。
3.3.5.2 WebVR 开发实践
1) 基于 WebVR 的艺术品展示的关键技术
基于 WebVR 的艺术品展示的关键技术主要包括两部分，基于浏览器的 3D 渲染和 VR
设备的支持。3D 渲染采用 Three.js 引擎，它封装了 WebGL 函数，简化了创建场景的代码成
本，增加了各种灯光的支持，内置多种着色器模板，降低了 WebGL 开发难度，是目前最主
流的 WebGL 开发框架。利用 Three.js 框架可以轻松的创建 3D 场景，导入各种格式的 3D 模
型文件，如常见的 obj、fbx、stl、md2、collada 等。
由于不同浏览器对 WebVR API 支持程度不同，所以需要引入 webvr-polyfill.js 来支持
WebVR 网页，webvr-polyfill.js 文件采用 ES6 标准编写，它提供了大量 VR 相关的 API，可
以轻松获取头戴设备(HMD)的信息。比如 navigator.getVRDisplays()方法可以获取 VR 头显设
备信息，识别 VR 设备之后，调用设备对象的 getPose()方法就可以返回 VR 设备在某一时刻
的信息，包括时间戳、位置(x,y,z)、线速度、线加速度、角速度、角加速度、方向信息等。
21 / 32
基于 Web 的 VR 互动主要包括头显和手柄两个层面，头显的互动采用 WebVR API，手
柄的互动须引用 Gamepad API，Gamepad API 是一个 HTML5 接口，让开发者可以通过 js 访
问游戏手柄。调用 navigator.getGamepads()方法可以获取一个手柄的实例，它返回一个
gamepads 数组，一旦有手柄连接上，gamepads 数组将产生有效的 gamepad 对象。
2) 3D 模型导入
Three.js 支持多种格式模型的导入，每种模型都有对应的加载器，以插件形式独立存在，
模型加载器插件命名规则为：后缀名+Loader.js，在具体开发的时候，需要加载某种格式的
模型，就引入该模型的加载器文件，如要加载 obj 格式的模型，需要引入 obj 加载器，具体
名称为：OBJLoader.js。obj 是一种简单的三位文件格式，使用非常广泛，定义了对象的集合
体，并没有包含材质信息，在浏览器渲染的时候，一般和 MTL 材质文件一起使用，加载
MTL 文件必须引入 MTLLoader.js 加载器。如果在 3DSMax 里面输出 obj 模式的时候，导出
了材质贴图，也可以直接调用 THREE.TextureLoader()对象的 load()方法加载图片。下面以
obj 文件为例详细介绍 OBJLoader 的 load 方法。
OBJLoader 的 load 方法包含 4 个参数，具体为 load ( url, onLoad, onProgress, onError )，
具体含义如下：
参数 url: 表示加载的*.obj 模型路径。
参数 onLoad：回调函数，模型加载完毕之后执行，以加载完毕的 3D 模型为参数，一般
模型加载完毕之后需要设置纹理，所以这个函数主要实现纹理的配置。
参数 onProgress：回调函数，加载过程中调用的函数。这个函数接收一个 XMLHttpRequest
实例，其中包含总加载字节，对于一些比较大的模型，如果需要增加加载进度的提示就需要
增加该参数。
参数 onError：回调函数，模型加载过程中如果出错就会触发该函数，该函数的参数为
出错信息，开发的时候调用该函数可以获取出错信息，便于调试。
除了参数 url 之外，其他三个参数都是可选项，一般加载模型之后，需要对模型做一系
列的处理，所以 onLoad 参数一般不会省略，而且 onLoad 参数里面承担主要的计算工作。
本案例的代码如下：
var loader=new THREE.OBJLoader();
loader.load('models/chahu/cha01_finch.obj',function(objData){
objData.traverse(function(objChild){
if(objChild instanceof THREE.Mesh){
objChild.material.map=texture;
22 / 32
objChild.material.side=THREE.DoubleSide
}
});
scene.add(objData);
});
上述加载方法省略了 onProgress 和 onError 两个回调函数，只实现 onLoad 函数，当模
型加载完毕之后，接收加载完毕的模型数据对象 objData，调用该对象的 traverse(function)
方法，该方法可以遍历调用者 objData 的所有后代，被调用者和每一个后代都要执行作为参
数传入的 function 函数，函数的参数为调用者本身。上例中遍历 objData 里面的每一个子对
象，如果判断是 THREE.Mesh 对象就对该子对象执行材质设置。所有子对象设置好材质之
后，才添加到场景中。
3) VR 实现
Three.js 提供了 WebVR 实现的两个核心文件：VRControls.js 和 VREffect.js，这两个文
件通过调用 WebVR API 实现特定的目的。
VRControls.js：在 3D 应用中，我们能看到的内容是由摄像机(camera)决定的，Three.js
提供了一些摄像机控件，使用这些控件可以控制场景中的摄像机，通过调整摄像机的位置让
输出的场景内容产生变化。VRControls.js 是 Three.js 提供的 VR 控制器，这个控件能够获取
HMD 的状态信息并应用到 camera 上，头戴设备的信息具体包括头显自身(HMDVRDevice)
和一个跟踪头部位置的位置捕捉传感器(PositionSensorVRDevice)。例如在手机上显示的时候，
由于手机有陀螺仪，陀螺仪信息能够通过 PositionSensorVRDevice 接口访问，所以手机的旋
转倾斜等就会直接作用到 camera 上，我们旋转手机，就会看到不同角度的内容。
VR 控制器的使用语法如下：
var controls = new THREE.VRControls(camera); //定义一个 VR 控制器实例
controls.standing = true; //确定采用站立姿态，这时用户的眼睛(camera)的高度由控制器
的 userHeight 属性决定。
VREffect.js：实现立体视觉的控件，人眼立体视觉的原理基本是依靠深度知觉加上两眼
视差来实现的，根据这个原理，VREffect.js 把屏幕切割为左右眼所视的屏幕，实现双屏渲染
输出，两个屏幕所显示的内容差异由瞳距的偏移 offset 和左右眼的视角 fov 决定。两个屏幕
分别对应左右眼，利用深度知觉+两眼视差，让大脑“重建”出立体场景。双屏渲染输出流程
如下：
23 / 32
图 12 双屏渲染流程
立体视觉控件调用代码如下：
var effect = new THREE.VREffect(renderer); //定义一个立体渲染对象，传入参数 renderer
为一个 WebGLRender()类型的渲染器，返回对象 effect 为立体对象渲染器。
effect.setSize(window.innerWidth, window.innerHeight); //初始化，传递参数为屏幕参数的
宽度和高度，该方法里面调用 getEyeParameters()，返回左右眼所视屏幕信息。
最后把左右眼相机的所示内容分别渲染到左右屏幕，就形成了立体视觉。
4) 完整流程及实现效果
基于 WebVR 的艺术品展示程序由两部分组成，初始化部份 init()和动画部分 animate()，
init()运行一遍，animate()方法里面调用 requestAnimationFrame(animate)实现渲染循环，重复
执行，整个程序的流程图如下：
24 / 32
图 13 WebVR 程序流程
展示的时候，天空盒背景可以更换，让用户可以在不同环境下面观察具体的艺术品，充
分发挥 VR 沉浸式的体验效果。图 14 和图 15 是本案例实现效果，运行于安卓手机上面的
Chrome 浏览器，加上普通的 VR 盒子就可以进行沉浸式 VR 体验。
图 14 手机 VR 模式展示界面截图 1
25 / 32
图 15 手机 VR 模式展示界面截图 2
4、相关成果
4.1 深圳市文化场馆数字化技术工程实验室网站平台
采用本项目研究内容开发的管理平台给深圳市文化场馆数字化工程技术实验室采纳使
用，平台前端整合了 Bootstrap 框架，Three.js 框架，在基于浏览器的 3D 应用加上了响应式
布局效果，在项目展示方面，采用 Ajax 技术实现当先流行的瀑布流效果，当页面往下拉的
时候，内容自动加载，特别适合于在移动设备上使用。后端实现了模型数据的动态管理和更
新，保证实验室网站平台的扩展性。具体界面如下图：
26 / 32
图 16 平台界面
平台管理端如下图：
图 17 实验室平台后台管理端
27 / 32
4.2 开发系列基于浏览器的 3D 应用
与我校南山匠人团队合作，推出南山匠人系列产品 Web3D 展示应用，并且在文博会期
间参展，展示匠人风采，也展示出团队开发的成果能够服务于实际应用。正常情况下，我们
在博物馆观看展品的时候，只能隔着橱窗观察，用户无法进一步了解相关信息。项目在这方
面进行了系列研究，通过 3D 扫描仪扫描方式获取实物模型数据和材质贴图，保证了模型的
逼真度，通过 WebGL 技术实现在线展示，利用微信扫一扫功能，快速打开模型进行观看，
效果逼真。
图 18 南山匠人作品 3D 展示应用
根据我校艺术设计学院绿色可循环展台设计的理念，开发制作展台在线 DIY 应用测试
版本，支持各种终端，用户可以根据实际需要在线选择展台及相关的装饰，最后提交，具体
界面如下：
图 19 展览在线 DIY
28 / 32
4.3 开发全景漫游应用及 WebVR 系列应用
研究成果用于具体项目的开发，如深圳博物馆全景开发，我校文博会分会场全景展示、
27 届深圳钟表站 VR 全景等。在早期的全景漫游应用中，主流技术都是采用 flash。进入移
动互联网时代之后，由于 flash 在移动端支持不好，它在苹果手机上无法运行，安卓手机也
不会预装 flash player，因此可以说移动端基本是不支持 flash，再加上诸如 VR 这些特性 fla
sh 也么有很好的支持，而这都是当前的热点，所以 Html5 技术成了当下全景漫游的主流技
术，WebGL 在其中承担关键的角色。在主流的全景漫游开发软件 krPano 中就预留 WebGL
使用接口，在立体渲染和 WebVR 渲染方面采用的是 WebGL 技术，并且支持对 3D 物体的
hit-testing (onover, onout, onup, ondown, onclick)以及鼠标光标操纵。
图 20 文博会深职院分会场
图 21 深圳举行的第 27 届钟表展的现场 WebVR 应用
29 / 32
4.4 学术成果
项目组成员在实践研究的基础之上，总结归纳，申请了软件著作权一项，发表了《WebVR
技术在短期商业会展中的应用研究》、《WebVR 在艺术品展示中的应用研究》两篇实践总结
的文章。
图 22 软件著作权
30 / 32
图 23 发表文章
5、经济、社会、生态效益
项目根据实际需求申请并进行具体的开发，包括底层研究，应用开发，底层研究给应用
开发提供支撑，应用开发结合我校实际情况，开发出来的系列应用得到真正的使用，并取得
响应的效果，具体效益如下：
1)开发平台被我校数字化工程实验室所采用，如前面图 16、图 17 所示。
2)开发的平台，WebVR 应用在文博会我校分会场展出,下面为具体的参展证书。
31 / 32
图 24 文博会参展证书
3)制作的 27 届钟表展全景漫游应用被组委会采用，展会期间被广泛观看，以下为钟表
展公众号当初的连接截图及项目的二维码，可以扫码进入。
图 25 第 27 届钟表展全景漫游应用
4)项目负责人基于该技术研究的基础之上，形成系列培训报告，在我校的教师培训和假
期对外培训班及对外的研讨会上都做了相关的介绍，有一定的影响。先后做了如下报告：《基
32 / 32
于 WebGL 的 3D 技术基础》、《移动互联网时代数字资源建设新思路及实例分享》、《3D 全景
漫游制作》、《虚拟现实资源的教学应用模式及建设思路》。
6、总结
WebGL3D 引擎的研究是一件比较复杂的工作，国内目前还是处于追赶和模仿的阶段，
本项目在现有的基础上进行应用开发，研究了 WebGL 的技术体系，对 Three.js 框架进行深
入研究，并进行二次开发，提炼出基于 Three.js 的应用框架，开发出基于 Three.js 的 Web 管
理平台，实现 Three.js 跟动态语言的融合开发；研究了 Three.js 在全景漫游开发方面的应用
和在WebVR方面的应用，特别是在艺术品展示方面的应用。项目有一系列实践应用的成果，
但是还是缺乏标志性的成果，论文还是以实践总结为主。下一步，结合人工智能、深度学习
开源框架 TensorFlow 进行研究，以 WebGL 为 3D 显示引擎，TensorFlow 进行具体算法的实
现进行深度学习的一些研究，希望在以后的相关研究方面，能够有相关的突破。
