有不少研究表明，增强现实（AR）相较于二维平面的多媒体物体更能够提供情境感知体验, 学生通过多种不同的视角来观察3D模型，可以增强对现实事物的理解，并使得学习者产生身临其境的感觉，加强了沉浸感。与虚拟现实技术（VR）相比，AR的实现成本更低，利用手机、平板电脑等就可以实现简单的应用。

我做的这个小项目设想的用户群体主要是在线学习的学生和老师。目前，在线课程中的教学资源基本为视频、文字、图片和网页等，形式较为单一、枯燥，难以吸引学习者的兴趣。AR教学资源在一定程度上可以弥补这些不足，所以我想设计一个可以提供AR教学资源的平台工具，以供老师和学生在学习中可以简单便捷的体验和创建到AR教学资源。

设计目标

考虑到用户群体的复杂性，他们的所使用的设备不可能统一，很难找到能够兼容大部分设备的AR框架，所以我采用的是webAR的形式。目前的进度停留在静态页面的DEMO上，已经证实利用纯HTML就能够实现AR教学资源的展示，下一步工作我打算寻求后端人员来帮忙或者自学着搭建平台，实现一些后台功能。我设想的是用户上传模型，或者sketchfab上的可下载模型链接，自动生成用于展示AR资源的网页。

此外，目前采用的Web AR的SDK是基于人工标记的，体验不太好，可用的交互方式也相当少，下一步将想办法优化用户体验。

静态Demo体验流程

设备要求：绝大部分Android，IOS，PC（带摄像头）均可体验，浏览器推荐使用Safari/Chrome/Firefox。

第一步：用手机浏览器打开AR课件资源网站（或用浏览器扫描下方二维码，注意不要使用微信或者支付宝）；

第二步：用摄像头对准下方标签图片。

完成！

相关技术介绍

1、框架

此项目是基于A-Frame框架和AR.js进行设计的。A-Frame是用于构建虚拟现实（VR）体验的Web框架，其核心是一个强大的实体组件框架，为three.js提供了声明性、可扩展和可组合的结构。本项目中主要使用A-Frame来快速搭建基于Web的三维场景和实现与三维模型的交互。AR.js提供了Web AR的解决方案，它无需安装，是一个基于three.js和jsartoolkit5的JavaScript库，适用于任何带有webgl和webrtc的手机。

Demo中的响应式布局采用的是Bootstrap来实现，它是一个用于使用HTML，CSS和JS进行开发的开源工具包。

2、模型

Demo中的模型素材来源于sketchfab.com，再利用3D Max对其进行修改和组合。模型的格式采用的是glTF，这是A-Frame官方推荐的格式，它与较旧的OBJ格式（仅支持顶点，法线，纹理坐标和基本材质，不支持动画）相比，glTF提供了一组更强大的功能。此外，glTF还提供：分层对象、场景信息（光源，相机）、骨骼结构和动画、更强大的材料和着色器。glTF支持的功能与COLLADA或FBX非常相似，但是由于glTF专注于提供“传输格式”而不是编辑器格式，它与Web技术的互操作性更强。考虑到学习者学习环境是网络学习，在本项目中，每一个场景中的所有模型和动画资源大小均在几百k左右，一定程度上保证了AR课件资源在Web环境下的稳定性与浏览速度。3D Max无法直接导出glTF格式，在本项目中，为了保留材质贴图及动画，所有模型和动画先采用FBX格式进行导出，再利用格式转化工具进行格式的转化。

3、音频

A-Frame对音频的支持不是很好，IOS设备上无法默认播放，本项目引入了Hower.js对音频进行统一的管理。在大部分浏览器中，不允许网页在加载完成后自动进行音频的播放，必须有用户主动的物理交互才能播放音频。因此，在本项目中，对于需要进行音频播放的场景设计了UI界面，用户可以通过点击“播放”按钮进行音频及动画的播放。