第5章

WebAR解决方案介绍






5.1基于Kivicube的WebAR应用开发

Kivicube是成都弥知科技有限公司推出的国内首款免费的WebXR在线制作平台，于2018年10月上线，帮助用户零门槛制作AR场景，支持如图像跟踪与实物跟踪、空间SLAM等场景使用，持续为品牌提供AR制作能力支持。Kivicube可以在线制作AR、VR与3D场景，制作的3D场景可运行在通用的Web平台上。用户可以在其官网(网址请参考本书配套资源)注册账号并进行项目的制作，在大部分情况下用户无须编写代码。由于使用Kivicube开发WebXR项目无须用户在本地搭建复杂的开发环境，只需要在有网络的情况下就可以进行访问和制作，因此可以认为Kivicube是一种SaaS(软件即服务)平台。

5.1.1项目创建
1. 注册并登录Kivicube平台

在浏览器(推荐使用Windows Edge、火狐或者Google浏览器)中访问Kivicube官方网站，默认弹出注册和登录界面，如图5.1所示。可以选择使用手机号、邮箱或者用户名的方式来注册登录Kivicube，在后续的使用过程中，每次访问Kivicube都需要使用已经注册好的账户进行登录。



图5.1Kivicube注册和登录界面


注册登录成功之后，即可进入Kivicube的后台主页面，如图5.2所示。在该页面的上方，可以选择为创建好的项目添加AR场景、3D场景，或者进行AR场景定制； 在下方，可以单击ALL按钮来显示当前用户所拥有的所有项目。单击“+”按钮可以进行项目的新建。在左下角可以通过切换标签选项卡，来显示当前用户的项目、素材或者用户中心。



图5.2Kivicube后台主页


在用户中心可以看到当前用户的权限信息，可以看出当前用户为免费账号，可以创建的场景数最大为2个，如图5.3所示。



图5.3用户中心


2. 场景创建

单击后台主页下方的“+”按钮新建项目，如图5.4所示。



图5.4新建项目


在弹出的“新建项目”界面中，需要填写项目信息，如图5.5所示，包括项目名称、项目描述、项目Logo和项目类型。其中，项目名称和项目Logo为必选项，上传一个封面图片作为项目Logo，默认的项目类型为Web3D，然后单击“保存”按钮，这样一个WebXR项目就创建成功了。


3. 项目设置

默认情况下，新建的项目为Web3D项目，即在Web浏览器中展示三维模型。应用此默认选项后，项目入口没有任何效果，用户无法通过扫描打开项目下的场景。如果设置项目为“云识别”，则项目下所有的云识别场景都可以通过项目入口扫描识别图进入。如果设置项目为“图像检测与跟踪”，则场景也可以通过项目入口扫描识别图进入。

这里需要特别说明的是，如果项目同时含有Web3D、云识别、图像检测与跟踪3类场景，此时当项目被设置为云识别，那么项目入口就只能扫描到云识别场景，图像检测与跟踪场景同理。

5.1.2场景创建
1. 选择需要创建的场景类型

可以为当前已经创建好的项目添加AR场景、3D场景以及定制化的AR场景，如图5.6所示。

(1) AR场景： AR场景是指在实时摄像头画面上呈现AR内容的场景。

(2) 3D场景： 指普通的3D场景，并且体验时不会呈现摄像头的画面。

(3) AR场景定制： 指创建适用于各个流量平台的场景，包括支付宝、淘宝、天猫、京东等购物类网站、Facebook、Snapchat等。该案例中选择场景的类型为3D场景。



图5.5项目信息填写




图5.6新建场景





图5.7创建3D场景


2. 创建3D场景

基于3D内容的3D互动体验，广泛地运用于智慧电商、3D广告、3D传媒等，能够广泛支持所有安卓版浏览器与带浏览器功能的App、安卓微信、安卓微信小程序、所有iOS浏览器与带浏览器功能的App，以及iOS微信小程序。创建此类场景时首先要填写3D互动场景信息，如图5.7所示； 选择当前场景所属的项目名称，并且填写场景名称与场景描述，单击“立即制作”按钮，即可完成3D场景的创建。

在这里输入的场景名称会显示在展示端的主页，如图5.8所示。

3. 创建AR场景

创建AR场景，用户可以通过扫描现实世界中的平面图像(如杂志封面、照片与名片等)，然后呈现出与之对应的场景内容与交互，并实现实时位置匹配与跟踪。

选择场景类型为AR场景后，需要填写图像检测与跟踪场景信息，如图5.9所示。同样包括所属项目的名称和场景名称，同时需要上传待识别的图片，然后单击“立即制作”按钮完成创建。



图5.83D场景的预览效果




图5.9创建AR场景



例如，创建一个AR场景，添加Babylon.js的Logo作为识别图，单击“立即制作”按钮，如图5.10所示。



图5.10添加识别图



可以为一个场景添加多张识别图，一方面用户通过扫描不同的识别图进入同一个场景体验，另一方面也可以完成对实物的识别。AR体验场景还支持空间位置定位与跟踪，用户通过扫描现实环境中的平面，然后在平面上呈现与之对应的场景内容与交互，并实现实时位置匹配与跟踪。


同样，系统支持陀螺仪。陀螺仪是基于移动设备的陀螺仪传感器，用户可以转动设备查看四周的场景内容，并与之交互。云识别基于云端图像识别与匹配，能够支持10万张图片的识别。

4. 创建流量平台AR场景

平台支持支付宝、淘宝/天猫、Facebook、Snapchat、京东等平台，可以轻松地在上述平台中进行数字化建模，并将虚拟的商品放置在地板、桌面等现实世界中。其中支付宝能够支持图像检测与跟踪、平面检测与跟踪、人脸检测与跟踪、微笑检测、人体姿态检测、手势检测等功能。

5.1.3创建场景内容
1. 打开场景

单击打开在上述的操作中已经创建好的AR场景，如图5.11所示。





图5.11打开AR场景


2. 上传素材

Kivicube目前支持图片、模型、AR视频、音频、透明视频、全景图6种类型的素材，其中“AR场景”→“图像检测与跟踪”不支持全景图。如图5.12所示，这里选择上传的素材类型为3D模型，然后单击“上传素材”按钮。




图5.12选择素材的类型并上传


这里要求上传的模型文件类型为zip格式，建议将模型从3ds Max/Maya/Blender等三维建模软件中导出，然后将其压缩为zip格式压缩包并拖入指定的区域后，模型开始上传，当上传进度为100%或者上传进度提示信息消失时，单击“完成”按钮，如图5.13所示。




图5.13上传模型素材


3. 将素材添加至场景

上传后的模型素材会显示在左侧的素材列表中，直接将需要的模型拖入场景，如图5.14所示。




图5.14将模型素材添加至场景


素材添加完成后，就能从编辑器右边的“场景结构”选项卡中查看已添加的素材内容了。

5.1.4创建场景交互
1. 添加自动循环播放的音频

按照上述方法，还可添加音频类素材，如图5.15所示。添加完成后，将音频素材同样拖入场景中，然后在素材列表中选择该音频素材，单击“音频控制”按钮，在音频控制界面可以设置该音频文件的播放模式为“循环播放”(Loop)，并且设置音频播放的触发条件为“扫描识别到”。




图5.15音频控制


2. 添加单击图片打开网页的交互(可选)

如果要为图片添加网页交互，那么可以选择图片素材，然后单击“打开网页”按钮。在弹出的打开网页设置界面中，设置功能的名称，添加将要打开的网址，并且设置触发条件为“扫描识别到”，如图5.16所示。



图5.16添加网页设置




图5.17显示/隐藏设置


3. 添加模型素材显示或隐藏的交互

选择模型素材，单击“显示/隐藏”按钮，在弹出的“显示/隐藏”设置界面选择具体的功能设置，这里选中当前的3D模型名称（3DPlayer）。然后选择要执行的操作为“显示”或者“隐藏”，并且选择具体的触发条件，例如“扫描识别到”，如图5.17所示。

5.1.5场景保存与分享

上述步骤完成后，就可以保存场景并分享体验了。首先选择右上角的“场景结构”选项卡，确认场景中添加的素材节点(包括模型、音频、图片等)以及相关的控制设置(例如，音频控制、模型控制等)符合要求，如图5.18(a)所示。然后选择 “场景设置”选项卡，确认当前场景的设置信息，或者对已经存在的设置信息进行重新修改，如图5.18(b)所示。最后单击“保存”按钮保存场景。




图5.18项目设置与保存


项目保存完毕之后，可以单击“分享”按钮进行项目的发布，如图5.19(a)所示。在场景发布界面，可以设置分享的Logo图片、分享的名称以及分享的描述信息。同时，还会自动生成分享二维码以及网址链接，如图5.19(b)所示。二维码可以直接扫描并进行体验，而网址链接可以在移动端或者固定端的浏览器中进行访问。就便捷性而言，二维码方式的分享体验更好一些。




图5.19场景分享


最终的场景效果请读者结合本书配套资源中的素材资源，亲自动手实践进行体验。

5.2基于EasyAR的WebAR应用开发
5.2.1EasyAR WebAR简介

EasyAR WebAR是以 Web 平台来集成 AR 技术，区别于原生 AR 应用，具有模式轻、部署快、传播能力强等特点，可以轻松地运行在 Android、iOS、Windows、macOS 等系统的 Web 浏览器上，无需App，真正实现跨平台。EasyAR WebAR提供在 Web 端嵌入 AR 技术的整套服务和解决方案，后续也会向开发者发布 WebAR SDK。

EasyAR WebAR由Web前端和EasyAR云服务两部分组成，支持平面图片识别、云识别、3D渲染、复杂互动等功能，主要以 URL 的格式来传播，符合微信等社交媒体信息流动的基本技术要求，配合创意策划方案，可以形成爆炸式的营销效果。

5.2.2EasyAR WebAR快速入门

使用EasyAR开发WebAR应用之前，需要做好如下准备工作。

1. EasyAR WebAR 授权

访问EasyAR官方网站(网址请参考本书配套资源)，在图5.20右侧进行EasyAR账户的注册和登录，详细的操作步骤与Kivicube相同，此处不再赘述。





图5.20EasyAR官网首页


通过邮箱注册之后，可以在邮件中通过链接激活EasyAR账户，然后使用新账户登录就能够访问图5.20中的开发中心了。初次进入开发中心时，系统会要求补全用户信息，如图5.21所示，可以选择下次再填写，将当前窗口关闭。





图5.21EasyAR官网服务使用情况调查


EasyAR开发之前首先需要为项目申请Sense授权。EasyAR Sense能够实现Mega云定位服务、AR图像识别、稠密空间地图、稀疏空间地图、3D物体跟踪、运动跟踪、平面图像跟踪、表面跟踪、录屏等多种功能。默认情况下，开发中心是没有Sense授权的，此时可以单击“Sense授权管理”下的“我需要一个新的Sense许可证密钥”按钮来申请新的授权，如图5.22所示。





图5.22Sense授权申请


在展开的Sense订阅界面可以看出，支持的授权类型有3种，分别是个人版、专业版和经典版，如图5.23所示。其中专业版和经典版都是需要付费进行使用的，不同的是专业版是按月付费订阅，而经典版是一次性付费永久使用。这里的案例仅用于学习和研究，开发的应用并不用于商业目的，因此申请个人版免费授权即可。





图5.23Sense授权类型


选择授权类型为个人版之后，选择所需要的授权功能。如果需要使用稀疏空间地图，则可以选择“是”，否则选择“否”即可。在“创建应用”中分别设置AR应用的名称以及在不同的移动端系统中的参数。这里如果是iOS系统，那么需要绑定Bundle ID； 如果是Android系统，那么需要填写打包时的Package Name,这里将二者设置为一致即可。AR应用的有效期可以视情况而定，这里设置为无限期，即永久生效，然后单击“确认”按钮，就将应用的名称与Sense授权进行绑定了，如图5.24所示。





图5.24申请个人版Sense授权


申请后的授权列表如图5.25所示。





图5.25申请后的授权列表


如果开发的EasyAR应用是微信小程序，那么接下来在授权管理中，可以创建Mega微信小程序许可证密钥。这里选择授权类型为测试版，在“创建应用”中需要填写小程序的名称以及小程序的APP ID，然后单击“确认”按钮，如图5.26所示。



图5.26申请Mega微信小程序授权


如果要使用EasyAR云服务，那么首先需要创建一个云服务，这里选择“云识别管理”，然后创建一个图库，名为ARImages，如图5.27所示。图库分为按调用次数计费和按日活计费两种方式，这里选择默认的“按调用次数”进行计费，并且可以默认拥有500次/日的试用次数。


接下来需要申请云服务API Key，如图5.28所示，将应用名称与云服务的类型进行绑定。这里创建名为ARTest的应用，并且选择云服务类型为“云识别”。

2. Web服务器

用于存储HTML等静态网页内容。可以通过部署Windows下的IIS服务器或者是在Linux中安装Web服务器来提供静态网页内容的访问。

3. 支持HTTPS的域名

在浏览器上使用摄像头，需要HTTPS协议支持。

具体的开发步骤可以通过如下代码实现，基本的代码还是遵循了HTML+CSS+JavaScript的编程风格。



图5.27创建云识别图库




图5.28申请云识别API Key


1） 打开摄像头



1.// 更多参数请查看 

2.//https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints

3.const constraints = {

4.audio: false,

5.video: {facingMode: {exact: 'environment'}}

6.//video: {facingMode: {exact: 'user'}}

7.//video: true

8.};

9.

10.navigator.mediaDevices.getUserMedia(constraints)

11..then((stream) => {

12.// videoElement为video元素，将摄像头视频流绑定到video上实时预览

13.videoElement.srcObject = stream;

14.videoElement.style.display = 'block';

15.videoElement.play();

16.resolve(true);

17.})

18..catch((err) => {

19.reject(err);

20.});





2） 截取摄像头图像



1.// canvasElement为canvas元素

2.// canvasContext为canvas的context 2D对象

3.// videoSetting为video元素的宽、高

4.canvasContext.drawImage(videoElement, 0, 0, videoSetting.width, videoSetting.height);

5.const image = canvasElement.toDataURL('image/jpeg', 0.5).split('base64,')［1］;





3） 将图像发送到服务器识别

在EasyAR开发中心中选择“授权”→“云服务API Key”，查看云服务API Key，如图5.29所示。通过上述操作已经为ARTest应用申请了API Key，此时单击后面的“管理”按钮。



图5.29API Key列表


选择Token有效期的天数后，单击“生成Token”按钮，如图5.30所示。可以看出，生成的Token能够支持为期5天的云识别服务，并且将新建的图库名称进行了绑定。





图5.30生成Token


Token会过期，支持动态刷新。Token是写在JavaScript文件中的，适合在安全要求较低的环境中使用，建议调用接口动态获取Token。

在“云服务”的“云识别管理”中，可以看到之前申请的云识别图库，如图5.31所示。



图5.31云识别图库列表


单击该图库后面的“管理”按钮，可以查看云识别库的相关信息，如图5.32所示。其中，在“识别图”标签中，可以看到当前没有识别图，可根据具体的应用开发，单击“上传识别图”按钮，将需要识别的图片进行上传。



图5.32云识别库详细信息


然后在“密钥”标签中可以看到实现识别所需要的相关密钥信息，如图5.33所示，包括CRS AppId、API KEY以及Cloud URLs三项内容。





图5.33云识别库密钥


单击图5.33中的“API KEY列表”按钮，弹出如图5.34所示的基于应用名称的API Key列表，然后根据实际情况进行选择。





图5.34API Key列表


接下来，将获取的上述3项内容，补充到如下代码中，就能够完成识别代码的编写。



1.// 云图库的Client-end URL

2.const clientendUrl = '您云图库的Client-end URL/search';

3.// 云图库的Cloud Token

4.const token = '这里是云图库的Cloud Token';

5.// 云图库的CRS AppId

6.const appId = '这里是云图库的CRS AppId';

7.

8.// 可以使用 jQuery 或 axios 等发送网络请求

9.const http = new XMLHttpRequest();

10.http.onload = () => {

11.try {









12.const msg = JSON.parse(http.responseText);

13.if (http.status === 200) {

14.if (msg.statusCode === 0) {

15.resolve(msg.result);

16.} else {

17.reject(msg);

18.}

19.} else {

20.reject(msg);

21.}

22.} catch (err) {

23.reject(err);

24.}

25.};

26.http.onerror = (err) => {

27.reject(err);

28.};

29.

30.// 发送到云图库服务器

31.http.open('POST', clientendUrl);

32.http.setRequestHeader('Content-Type', 'application/json;Charset=UTF-8');

33.

34.// 将Cloud Token写在请求头中

35.http.setRequestHeader('Authorization', token);

36.

37.// image为截取的摄像头图片数据，如:{image: '/9j/4AAQSkZJRgA...', appId: appId}

38.http.send(JSON.stringify(image));





4. 检测识别结果

如果未识别到内容，则继续识别，否则停止识别，将识别的结果(如targetId、meta等)信息取出处理。通过URL“https://云图库的客户端URL/search”进行目标识别时，若未识别到目标，则HTTP状态码会变为404。

5.2.3EasyAR Web3D模型动画要求

EasyAR能够提供优秀的3D模型展示，通过Web方式展示3D模型动画，比平面HTML5页面具有更强的感染力。例如，在电商活动中，通过Web 3D方式展示产品模型，为用户提供直观感受产品的视觉入口，增强活动传播效果。EasyAR对于3D模型的展示具有如下要求。

(1) 动画模型需要单个mesh(可编辑网格)，当模型没有动画时无此要求。

(2) 动画模型骨骼只可以有一套，骨骼权重要和骨骼保持一致，蒙皮权重必须要完整，可以限制网格顶点，受控制骨骼数目最好不超过4个。

(3) 骨骼层级要遵循命名规范，目的在于当动画出现问题时可以追溯。

(4) 避免使用曲线网格。

(5) 动画模型纹理需要使用JPG/PNG格式，不能使用psd作为纹理源文件，材质最好不使用透明通道，若使用透明通道则需要进行代码调试。

(6) Three.js支持的动画文件格式只有FBX、 DAE和JSON三种， FBX格式包括ASCII和二进制两种文件类型，最好可以获得源工程文件，在使用3dsMax/Maya/Blender导入导出时有不兼容的地方需要手动调整。

(7) 模型面数限制在10000以下。

(8) 在动画模型中为了方便绘制角色的运动轨迹，通常会为角色添加一个根节点，这个节点没有对应信息的绑定，会导致导出模型的初始位置出错。这里需要找到根节点并选择根节点的下级节点，再断开其与根节点的链接。

(9) 不支持动画中存在虚拟节点和控制器。

(10) 所有节点不能有负数。

(11) 模型缩放为1，模型只能是一个mesh，单个模型独立对应一种纹理并独立对应一套骨骼。对于绑定过的模型，不要二次返修。

(12) 模型制作使用polygon多边形建模，避免使用NURBS等其他类型建模。制作完成的模型统一导出格式为FBX，导出之前需要将模型历史记录及无关节点清空，模型坐标位于坐标点中心，并将坐标数据清零，冻结变换。

5.3基于开源的AR.js应用开发

AR.js是一个用于网络增强现实(WebAR)的轻量级库，具有图像跟踪、基于位置的AR和基于标记的AR等功能，它是完全开源的，非常适合平时做科研使用。图5.35展示了AR.js的一些使用案例。



图5.35AR.js使用案例


该项目现在属于Github 组织，可以在AR.js官网(网址请参考本书配套资源)找到并免费申请加入。下面介绍AR.js的三大功能。

1. 图像跟踪

当相机发现 2D 图像时，可以在其顶部或附近显示某种内容。其内容可以是 2D 图像、GIF、3D 模型(也是动画)和 2D视频，应用范围包括增强艺术、学习(增强型书籍)、增强型传单或广告等。

2.  基于位置的AR

这种AR使用真实世界的地理位置，以便在用户设备上显示增强现实内容。用户可以移动(最好是户外)，并且可以通过智能手机看到现实世界中的 AR 内容。四处移动和旋转手机将使 AR 内容根据用户的位置和旋转而变化(因此地点被“锚定”在其真实位置，并根据它们与用户距离的远近而变小或变大)。借助此解决方案，可以构建诸如导游的交互式支持、探索新城市时的帮助、查找建筑物/博物馆/餐馆/酒店等体验； 还可以构建诸如寻宝、生物学或历史学习游戏等体验，或者将这种技术用于情境艺术(与特定现实世界坐标绑定的视觉艺术体验)。

3.  基于标记的AR

当相机找到标记时，可以显示一些内容(与图像跟踪相同)。标记非常稳定，但形状、颜色和大小有限，使用示例包括增强型书籍、增强型传单或广告等。

5.3.1图像跟踪案例

创建新的项目并添加如下代码： 



1.<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b54124
87cd94b290b/dist/aframe-master.min.js">

2.</script>

3.<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">

4.</script>

5.<style>

6..arjs-loader {

7.height: 100%;

8.width: 100%;

9.position: absolute;

10.top: 0;

11.left: 0;

12.background-color: rgba(0, 0, 0, 0.8);

13.z-index: 9999;

14.display: flex;

15.justify-content: center;

16.align-items: center;

17.}

18.

19..arjs-loader div {








20.text-align: center;

21.font-size: 1.25em;

22.color: white;

23.}

24.</style>

25.

26.<body style="margin : 0px; overflow: hidden;">

27.<!-- 在加载图像描述符之前显示的最小加载程序 -->

28.<div class="arjs-loader">

29.<div>Loading, please wait...</div>

30.</div>

31.<a-scene

32.vr-mode-ui="enabled: false;"

33.renderer="logarithmicDepthBuffer: true;"

34.embedded

35.arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"

36.>

37.<!-- 使用cors代理来避免跨源问题 -->

38.<a-nft

39.type="nft"

40.url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"

41.smooth="true"

42.smoothCount="10"

43.smoothTolerance=".01"

44.smoothThreshold="5"

45.>

46.<a-entity

47.gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"

48.scale="5 5 5"

49.position="50 150 0"

50.>

51.</a-entity>

52.</a-nft>

53.<a-entity camera></a-entity>

54.</a-scene>

55.</body>







图5.36AR效果实验图（一）


将上述代码部署至已经搭建好的Web服务器中，可以使用基于Windows的IIS服务器或者是基于Linux的Apache/Nginx服务器。

在手机浏览器中访问Web服务器提供的URL，对上述配置的站点进行访问。

扫描如图5.36所示的图像，就能够在手机中体验AR应用了。

5.3.2基于位置的AR案例


使用以下代码创建一个项目，将第22行代码中的 addyourlatitude 和 addyourlongitude 属性更改为实际的纬度和经度，注意不带 “<>”。



1.<!DOCTYPE html>

2.<html>

3.<head>

4.<meta charset="utf-8" />

5.<meta http-equiv="X-UA-Compatible" content="IE=edge" />

6.<title>GeoAR.js demo</title>

7.<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

8.<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>

9.<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

10.</head>

11.

12.<body style="margin: 0; overflow: hidden;">

13.<a-scene

14.vr-mode-ui="enabled: false"

15.embedded

16.arjs="sourceType: webcam; debugUIEnabled: false;"

17.>

18.<a-text

19.value="This content will always face you."

20.look-at="［gps-camera］"

21.scale="120 120 120"

22.gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"

23.></a-text>

24.<a-camera gps-camera rotation-reader> </a-camera>

25.</a-scene>

26.</body>

27.</html> 





将上述代码部署至已经搭建好的Web服务器中，可以使用基于Windows的IIS服务器或者是基于Linux的Apache/Nginx服务器。

在手机上激活 GPS 并导航到示例 URL。即使环顾四周并移动手机，也应该看到文本正对着用户，出现在请求的位置。

5.3.3基于标记的AR案例

使用下列代码创建项目： 



1.<!DOCTYPE html>

2.<html>








3.<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

4.<!-- 导入ARjs版本，不带NFT，但支持标记+位置 -->

5.<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

6.<body style="margin : 0px; overflow: hidden;">

7.<a-scene embedded arjs>

8.<a-marker preset="hiro">

9.<a-entity

10.position="0 0 0"

11.scale="0.05 0.05 0.05"

12.gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"

13.></a-entity>

14.</a-marker>

15.<a-entity camera></a-entity>

16.</a-scene>

17.</body>

18.</html>





将上述代码部署至已经搭建好的Web服务器中，可以使用基于Windows的IIS服务器或者是基于Linux的Apache/Nginx服务器。

在手机浏览器中访问Web服务器提供的URL网址，对上述配置的站点进行访问。

扫描如图5.37所示的图像，就能够在手机中体验AR应用了。





图5.37AR效果实验图（二）