原文：
zh.annas-archive.org/md5/ef99724ddd4d350ed6a2857c854fa264译者：飞龙
前言
增强现实（AR）是一项令人惊叹的技术，其历史可以追溯到 20 世纪 90 年代，直到谷歌眼镜的出现和基于 AR 的游戏《精灵宝可梦 GO》的发布，才为公众所熟知。尽管最初它主要用于营销以获得“哇”的效果，但它后来被证明是许多其他领域（如旅游、工业、医学和教育）中用户的自然界面。其功能的多功能性（基于图像或物理世界识别、GPS 定位等）和目标设备（Android/iOS 移动设备、计算机、网络和头戴式显示器（HMD））使其成为不同领域和实施（如工业指南、现场艺术体验和培训工具）的完美补充。
《企业增强现实项目》旨在带您踏上使用市场上最知名的框架开发并构建增强现实（AR）应用的旅程。在这本书中，我们将详细探讨为六个不同的企业领域（制造、培训、营销、零售、自动化和旅游）开发基于 AR 的应用程序，从市场需求出发，并在每种情况下选择最合适的工具。每一章都将通过使用不同的框架或目标设备来介绍 AR 的新用途。
第一章将介绍 AR，以便您在开始编码之前对其用途和潜力有一个良好的理解。接下来，我们将向您介绍 Unity，这是一个惊人的 3D 工具，它将在许多章节中简化集成 AR 框架和操作 3D 对象和场景的任务。然后，我们将使用 Android Studio 和 ARCore 来创建我们的第一个用于原型设计的增强现实项目。之后，我们将探索使用 Google Web Component <model-viewer>的 WebAR，以及新兴的 AR 创作工具 Augmented Class!，用于教育。接下来，我们将开始使用 Unity 来集成 AR 框架 EasyAR，创建一个用于营销体验的 AR 目录。然后，我们将继续使用 Vuforia 框架，并在零售中使用它。此外，我们将使用 Vuforia 结合 AR 眼镜来创建自动化过程的逐步指南。然后，我们将以在 Xcode 中开发的 ARKit 结束本书，以实现一个用于旅游的增强现实维度门户。
本书面向对象
《企业增强现实项目》面向对新兴和交互式技术感兴趣的爱好者，他们希望逐步构建任何领域的 AR 应用程序，并了解开发它们的最新工具。无需具备 AR 经验。一些面向对象的编程技能将有所帮助。
本书涵盖内容
第一章，《AR 简介及其在企业中的应用》，本书首先介绍了 AR 及其应用。它涵盖了技术的起源、可开发的 AR 类型、本书中将要使用的框架，以及 AR 在不同企业领域的应用。
第二章，《Unity AR 开发的简介》，是 Unity 实时 3D 开发平台的介绍，您将学习主要元素的名词和用法。您还将学习如何使用 C#创建第一个脚本，以了解这个工具的潜力。
第三章，《使用 ARCore 进行制造业的 AR》，介绍了 ARCore 技术及其表面检测功能。您将使用 Android Studio 和 Sceneform 插件创建一个 Android 原型查看器，这将帮助我们轻松地将 3D 模型集成到我们的项目中。
第四章，《使用 WebAR 和增强课堂进行培训的 AR》，在共同的项目中探索两种不同的工具。使用 WebAR，您将学习如何开发一个简单的 Web 应用，该应用包含<model-viewer> Web 组件，该组件将用于从支持 ARCore 的移动设备启动 AR。增强课堂！是一个用于 Android 的作者工具，用于轻松创建交互式教育 AR 项目。
第五章，《使用 EasyAR 进行营销的 AR》，为您介绍如何使用 Unity 结合 EasyAR 框架开发 AR 项目。您将学习如何基于图像跟踪开发增强型目录，以及如何在 Unity 中创建界面并将它们链接到场景中的脚本和对象。
第六章，《使用 Vuforia 进行零售的 AR》，教您如何在 Unity 中使用 Vuforia 的地形检测功能将 3D 对象放置在平坦表面上，并对其进行移动/旋转/缩放，同时还有在 Vuforia 之上添加 ARCore 的可能性。在此过程中，您将继续使用 Unity 及其组件来巩固之前的概念。
第七章，《使用 Vuforia 和 AR 眼镜进行自动化 AR》，继续使用 Vuforia 框架进行开发，但在此案例中侧重于 AR 眼镜。在创建自动化过程的增强型指南时，您将了解移动和眼镜导向型应用之间的相似之处和不同之处。
第八章，《使用 ARKit 进行旅游的 AR》，在 Xcode 上开发，针对 iOS 设备。在本章中，您将创建一个锚定在现实世界中的增强型门户，将用户带到隐藏的虚拟世界。为此，您还将学习如何使用 SceneKit 框架创建 3D 场景并显示 3D 模型。
为了充分利用本书
为了充分利用本书，不需要任何先前的 AR 或 Unity 经验，因为它们将在本书中详细讲解。同样，对 Android Studio 和 Xcode 的先了解会有所帮助，但不是必需的。面向对象编程技能会有所帮助，因为我们将使用 Java、C# 和 Swift 来进行我们的项目。然而，如果您遵循书中的步骤并复制粘贴代码，您将能够从头开始构建所有项目。
每一章都将包含安装说明和您实现每个项目所需的信息。
VS: 虽然 VS2019 已经发布，但我们使用 2017 版本，因为它与 Unity 集成，这将确保它可以直接工作而无需进一步配置。
JDK: 任何版本高于 JDK 8 的新 OpenJDK 都应该能够正常工作，但为了避免错误，建议使用版本 8。
下载示例代码文件
您可以从 www.packt.com 的账户下载本书的示例代码文件。如果您在其他地方购买了本书，您可以访问 www.packtpub.com/support 并注册，以便将文件直接通过电子邮件发送给您。
您可以通过以下步骤下载代码文件：
-
在 www.packt.com 上登录或注册。
-
选择支持选项卡。
-
点击代码下载。
-
在搜索框中输入书籍名称，并按照屏幕上的说明操作。
文件下载完成后，请确保使用最新版本解压或提取文件夹：
-
WinRAR/7-Zip for Windows
-
Zipeg/iZip/UnRarX for Mac
-
7-Zip/PeaZip for Linux
本书代码包也托管在 GitHub 上，地址为 github.com/PacktPublishing/Enterprise-Augmented-Reality-Projects。如果代码有更新，它将在现有的 GitHub 仓库中更新。
我们还有来自我们丰富的图书和视频目录的其他代码包，可在 github.com/PacktPublishing/ 上找到。查看它们吧！
下载彩色图像
我们还提供了一份包含本书中使用的截图/图表彩色图像的 PDF 文件。您可以从这里下载：static.packt-cdn.com/downloads/9781789807400_ColorImages.pdf。
使用的约定
本书使用了多种文本约定。
CodeInText: 表示文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 账号。以下是一个示例：“从它中删除文本，并将按钮名称更改为 Home_button。”
代码块设置如下：
h1 {
text-align: center;
color: #000000;
font-style: bold;
}
粗体: 表示新术语、重要词汇或您在屏幕上看到的词汇。例如，菜单或对话框中的文字会像这样显示。以下是一个示例：“选择 ARCamera，然后在检查器窗口中点击打开 Vuforia 引擎配置。”
警告或重要提示看起来像这样。
小贴士和技巧看起来像这样。
联系我们
我们欢迎读者的反馈。
一般反馈: 如果你对此书任何方面有疑问，请在邮件主题中提及书名，并通过customercare@packtpub.com给我们发送邮件。
勘误: 尽管我们已经尽一切努力确保内容的准确性，但错误仍然可能发生。如果您在这本书中发现了错误，我们将不胜感激，如果您能向我们报告这一点。请访问 www.packtpub.com/support/errata，选择您的书籍，点击勘误提交表单链接，并输入详细信息。
盗版: 如果你在互联网上以任何形式遇到我们作品的非法副本，如果你能提供位置地址或网站名称，我们将不胜感激。请通过copyright@packt.com与我们联系，并附上材料的链接。
如果您有兴趣成为作者: 如果您在某个领域有专业知识，并且您有兴趣撰写或为书籍做出贡献，请访问 authors.packtpub.com.
评论
请留下评论。一旦您阅读并使用过这本书，为什么不在此购买它的网站上留下评论呢？潜在读者可以看到并使用您的客观意见来做出购买决定，Packt 公司可以了解您对我们产品的看法，我们的作者也可以看到他们对书籍的反馈。谢谢！
如需了解 Packt 的更多信息，请访问 packt.com.
第一章：AR 简介及其在企业中的应用
本书是为对新兴和交互式技术感兴趣的爱好者所写，他们从一开始就希望为任何市场领域构建 AR 应用，并了解开发它们的最新工具。不需要先前的 AR 经验。
本书的主旨是通过在不同企业环境中完成一系列项目，向您介绍不同的 AR 框架。虽然不需要特定的编程技能，但希望您具备一定的知识，以便理解每个示例中的代码。一些面向对象的编程技能会有所帮助，但不是必需的。本书是从零开始编写的，因此您将能够逐步跟随任何编码需求。
在本章中，我们将学习什么是增强现实（AR），并简要介绍其历史、类型以及工作原理。我们还将介绍本书中将使用的软件开发工具包（SDKs）。最后，我们将探讨 AR 的应用实例，特别是其在企业内部的应用。本章的主要目标是理解 AR 当前的应用情况，包括市场、技术、设备以及具有多种 AR 识别模式（如目标图像、云标记、基于 GPS、物体或人脸追踪和空间映射）的开发工具。你还将了解本书中将使用的主要 AR 工具及其主要功能的简要介绍。
到本章结束时，您将基本了解 AR 的工作原理及其不同的用途，以便更容易地跟随后续的技术章节。
本章将涵盖以下主题：
-
理解 AR
-
与 AR 协作
-
在企业中使用 AR
理解 AR
AR 是用来描述允许用户通过技术设备（智能手机、平板电脑或 AR 眼镜）的摄像头，通过该设备添加的虚拟图形信息来可视化部分真实世界的技术术语。该设备将虚拟信息添加到现有的物理信息中。通过这种方式，有形的物理元素与虚拟元素相结合，从而在实时中创建增强现实。以下图像显示了 AR 的工作原理：
一个用户在平板电脑上看到 AR 中的 3D 苹果
现在，我们将探讨 AR 的起点，并了解 AR 可以根据其功能如何划分。
简短历史——新现实的起点
AR 不是一项新技术。AR 的起点可以追溯到哲学家、愿景家和电影制作人 Morton Heilig 发明的机器，他在 1957 年开始构建一个原型，其外观类似于 90 年代非常流行的街机视频游戏机。以下图像显示了该原型的示意图：
发明工作原理的图示（此图像由 Morton Heilig 创作）
Morton 将他的发明命名为Sensorama，这是一种投影 3D 图像、添加环绕声、使座椅振动并创造向观众投掷空气的体验。我们今天可以感受到的最相似的经验是在 4D 电影院看电影，但这些体验是在 60 多年前创造的。
1968 年，哈佛电气工程教授 Ivan Sutherland 创造了一种将成为 AR 技术未来关键设备的装置，称为人机载显示（HMD）。与今天我们所知的 AR 眼镜截然不同，这个被称为达摩克利斯之剑的 HMD 是一个巨大的机器，悬挂在实验室的天花板上，当用户被放置在正确的位置时才会工作。在下面的图像中，你可以看到这个发明的外观：
达摩克利斯之剑（此图像由 OyundariZorigtbaatar 创作）
1992 年，波音研究员 Tom Caudell 发明了 AR 这个术语，同时，AR 技术从另外两个作品中得到了推动。第一个 AR 系统来自美国空军工作的 L.B. Rosenberg，这是一个为用户提供如何执行某些任务的建议的设备，类似于虚拟向导。这可以在下面的图像中看到：
左侧的虚拟设备 AR 系统和其右侧的视图（此图像由 AR Trends 创作）
在这个领域的其他研究由哥伦比亚大学领导，那里的一组科学家发明了一种与打印机交互的 HMD。这个设备被命名为Karma（基于知识的维护辅助 AR），它投射一个 3D 图像来告诉用户如何为打印机充电，而不是查阅用户手册。
下面的图表是基于 Milgram 和 Kishino（1994 年）的连续高级计算机界面表示，其中我们可以看到从现实环境到虚拟现实的混合现实（MR）的不同子类别。位于现实环境附近的 AR 分为空间 AR 和透视 AR。然而，21 世纪移动设备的出现允许了一种不同的 AR 版本，我们可以通过设备屏幕和摄像头来显示它：
混合现实及其子类别
现在我们已经介绍了增强现实（AR）的初步概念，接下来让我们学习如何根据用于在现实世界中显示虚拟元素所使用的触发器来对这项技术进行分类。
AR 背后的魔法
AR 可以通过多种方式创建；主要挑战是如何使现实世界与虚拟世界的结合尽可能无缝。根据用于触发虚拟元素在现实世界中出现的触发器，AR 可以分为以下几种：
-
GPS 坐标：我们使用 GPS 坐标、指南针和加速度计来确定用户的精确位置，包括他们正在看的方位点。根据用户指向的位置，他们将看到一些虚拟对象或从同一位置看到的其他对象。
-
黑白标记器：我们使用非常简单的图像，类似于黑白二维码，以在上面投影虚拟对象。这是最早的 AR 示例之一，尽管如今由于有更真实的方式来创建 AR 体验，它们的使用频率较低。
-
图像标记器：我们使用移动设备的摄像头定位预定义的图像（也称为目标或标记），然后在它们上方投影虚拟对象。这种类型的 AR 已经取代了黑白标记。
-
实时标记器：用户使用移动摄像头创建并定义自己的图像，以在其中投影任何虚拟对象。
-
面部识别：通过摄像头，我们捕捉面部运动以执行请求中的某些动作，例如，向虚拟头像做出面部表情。
-
SLAM：即同时定位与地图构建，这项技术通过特征点理解物理世界，从而使 AR 应用能够识别 3D 对象和场景，并即时跟踪世界，叠加数字交互增强。
-
信标：eBeacons、RFID 和 NFC 是使用无线电频率或蓝牙的识别系统，类似于 GPS 坐标，以触发 AR 元素。
现在，你对 AR 是什么以及它的来源有了更好的理解。我们通过查看第一代原型来介绍 AR 的基础知识，并根据触发虚拟图像的元素对不同的 AR 类型进行分类，以便它们出现在屏幕上。下一步是了解与之合作所需的内容。
与 AR 合作
AR 项目需要一些基本元素来履行其功能：
-
数字支持，主要是平板电脑、手机或眼镜。这些将是我们将用来识别我们所看到的内容并将信息融入 AR 的设备。
-
传感器，如摄像头、GPS、3D 扫描仪等，以感知现实。它们通常集成到移动设备中。
-
一种算法或应用程序，用于理解正在观察的现实，并使用相关信息进行解释和显示。
-
数字内容以丰富现实。这是你融入 AR 的所有信息。
结果是一个界面，其中现实通过位于所需空间中的附加信息进行观察。以下小节将介绍不同的 AR 库和 SDK，以及它们的工作原理。
ARToolKit – 第一个 AR 库
ARToolKit 是世界上第一个开源软件库，它允许创建增强现实（AR）应用，在这些应用中，虚拟图像会与现实世界中的物体重叠。它利用视频跟踪功能来实时计算摄像机的位置以及相对于物理标记的朝向。一旦确定了真实摄像机的位置，虚拟摄像机就被放置在相同的位置，并在真实标记上叠加一个虚拟信息层，例如一个 3D 对象。ARToolKit 最初由加藤宏和华盛顿大学 HIT 实验室开发，并于 1999 年首次发布。它目前作为一个开源项目托管在 SourceForge 上，同时 ARToolworks 提供商业许可证：www.artoolkitx.org/。
AR SDK 简介
现在，我们将介绍本书中将使用的 AR SDK。从 ARToolKit 的首次出现以来，AR SDK 已经发生了很大的变化。让我们介绍并描述本书中将使用的不同 SDK，以创建我们自己的 AR 体验：
-
Vuforia
-
EasyAR
-
ARCore
-
ARKit
让我们简要介绍一下它们。
Vuforia
最初由高通开发，目前由 PTC 运营，Vuforia 是最古老且最知名的 AR SDK 之一，也是市场上最稳定和性能最好的软件之一。Vuforia 提供了各种功能，包括 2D 和 3D 跟踪、无标记 AR 以及称为 Vumarks 的标记。它提供了多个示例和额外功能，例如虚拟按钮、运行时图像目标创建和背景视频纹理操作。
EasyAR
一个 AR 引擎，使我们能够以简单的方式创建 AR 解决方案，并提供多种 AR 功能，包括识别和跟踪在现实世界中先前选定的图像（如封面、照片或名片）的位置、旋转和缩放的技术。它允许我们映射真实地点并跟踪其中的物体，并包含定位和跟踪真实 3D 物体的位置和朝向的技术，而不是平面图像和功能，这允许我们在播放 AR 场景时拍摄视频。
ARCore
第一个版本于 2018 年 2 月发布，是 Google 为 Android 和 iOS 创建 AR 应用的平台。它利用不同的功能，如运动跟踪，来估计移动设备相对于真实世界的位置和朝向；环境定位，以找到和跟踪水平表面，如地面、平板电脑或墙壁；以及光估计，将 3D 元素以逼真的方式放置到真实世界中。针对 Android 7.0 及以上版本，市场上并非所有设备都支持这项技术，尽管自第一个 SDK 版本以来，支持该技术的设备数量已大幅增加。
ARKit
苹果公司在 2017 年发布了 ARKit 的第一个版本，与 Xcode 9 和 iOS 11 一起推出，将 AR 引入 iOS 设备。该框架包含在 Xcode 中，使用户能够在现实世界中放置虚拟内容。在官方发布几个月后，它增加了新的功能，如 2D 图像检测和面部检测。2018 年，随着 iOS 12 的发布，ARKit 2 推出，新增了 3D 对象跟踪、为场景添加逼真纹理以及创建多用户 AR 体验等功能。在撰写本书时，最新版本是 iOS 13，ARKit 3 承诺在当前状态下实现巨大改进，因为它将添加一种与虚拟元素交互的新方式，例如在检测到人站在虚拟对象前面时隐藏虚拟对象。它还允许用户通过手势与 3D 对象交互，并不仅捕捉面部表情，还能捕捉人的身体动作。
既然我们已经熟悉了本书中将使用的 AR 工具，让我们看看我们将如何将这些软件应用于不同的企业领域。
在企业中使用 AR
AR 可以在多个领域成为有价值的资产和技术。在本节中，我们将学习它在工业、营销、零售和旅游等领域的应用。在第一种情况下，我们将了解工业 4.0 如何将 AR 置于聚光灯下，因为它是生产、维护、培训等领域人机交互的自然界面。
本节的主要目标是让您在开始编码之前更好地了解如何在自己的项目中应用 AR。这样，您将能够根据自身需求调整本书中的示例。
让我们开始介绍 AR 在工业领域的应用。
在工业 4.0 中使用 AR
这种技术在工业领域的应用正在增长。其应用重点之一是能够为机器的故障做好准备，从而知道哪个部件已经损坏以及如何进行维修。这种 AR 的应用可以显著降低成本，因为它有利于在故障发生之前迅速采取行动。您还可以使用 AR 在实施之前可视化工厂或产品。这意味着您可以在将其变为实体之前完善要构建的内容。AR 在工业领域的应用有利于工业 4.0 的使能技术之一的应用，这些技术有助于提高公司的竞争力和生产力。
以下是一些示例：
-
智能助手
-
虚拟原型
-
物流与仓储管理
-
数字孪生
让我们更详细地看看这些示例。
智能助手
使用 AR 与维护过程管理平台结合，可以为工业机器的操作提供直接支持，从而缩短操作或维修任务的时间并提高准确性。以下是一些在这种情况下可以执行的任务：
-
跟随指导说明和工作流程
-
实时分配活动
-
检查清单和分配任务列表
-
创建干预的数字报告
-
自动检测 3D 对象
-
实时查看 3D 手册和工作单
-
通过视频通话拥有专家远程协作者
-
从机器中提取和显示实时数据
在这种情况下，使用增强现实（AR）技术通过降低成本和错误的可能性来提高商业生产力。
虚拟原型
AR 可以应用于实时可视化和配置 3D 工业工厂和设备。3D 模型可以在进行验证的工业环境中显示，也可以在展览会和活动等展览空间中展示。通过 AR，您可以在设备安装的位置可视化工业机械的全息图，以评估其尺寸、逃生空间和安全边缘。通过这样做，您可以优化生产流程。此外，将重型工业机械从世界的一个部分运送到另一个部分以在展览会上展示，成本非常高。使用 AR，您可以在展位中心看到您的产品就像它是真实的一样。
物流和仓库管理
通过连接到仓库管理系统的 3D 查看器或眼镜，仓库操作员可以直接在设备上接收商品存储的信息，这使得他们能够提高工作效率和质量，最终提高生产率。
数字孪生
多亏了 AR 技术，您可以为真实系统、产品或服务创建一个虚拟和动态的复制品，通过从传感器或自动化中获得的信息，模拟其行为。这样，它允许智能监控和分析，以及在复制品中实现模拟和实验，没有风险或成本，目的是提高真实系统的性能和有效性。
在这本书中，我们将学习如何通过创建一个带有 AR 引导和培训的原型自动化来使用 AR 进行制造。
在其他企业领域使用 AR
行业并不是 AR 技术唯一有价值的领域。这种技术的多功能性使其成为用户与最终产品或过程之间完美的沟通工具，并为它们添加了一个视觉和交互层，以吸引他们的注意力。无论是用来使产品更具吸引力，还是帮助用户通过附加信息理解一个过程，AR 在许多领域都可以成为一项宝贵的资产。让我们看看本书后面将要涵盖的其他企业领域，在这些领域中 AR 增加了价值。
制造业中的 AR
在这个领域，AR 有许多用途，如原型设计、生产和培训。在这些领域，AR 可以通过在现实世界之上可视化设计来帮助加快原型设计并降低成本，允许设计师、工人和潜在客户在模型周围和内部走动，并操纵其三维结构。
AR 用于培训
AR 已成为教育和培训中的一个宝贵资产。它使我们能够在图像上或直接在房间内以三维形式可视化概念，这样我们可以更快、更动态地获取信息（只需用摄像头指向而不是翻阅书籍或在网上搜索信息），或者创建更深入的个人项目（使画作栩栩如生、在手工艺品上添加说明或额外信息、创建动画演示等）。
AR 在营销中的应用
使用 AR，用户负责他们的体验并可以与之互动。现在，品牌已经超越了“哇”的效果，创造了功能性的体验来推广和销售他们的产品。这包括增强型目录，它在其平面图像上以 3D 形式展示产品；虚拟镜子，你可以在 AR 中试戴眼镜或配件；包装变得生动起来，解释制造过程中的元素；等等。
AR 在零售中的应用
零售是 AR（增强现实）提供更广泛可能性之一的领域，从满足和吸引消费者以减少退货产品，到将产品与社交媒体或个性化购物体验相连接。这方面的例子包括在购买前尝试产品，以便用户可以在实际购买产品之前，将衣服、鞋子、眼镜甚至化妆品可视化到自己身上。通过这样做，他们可以借助 AR 看到家具、艺术品甚至墙面涂料在自己家中呈现的效果。
其他例子包括在购买产品之前查看有关产品的额外信息，如评论和评价，从商店接收地理位置信息及折扣，以及在超市或大型商店中，通过区域引导顾客到他们想要的产品。
AR 在自动化中的应用
AR 是自然的人机界面和连接到**物联网（IoT）**和大数据的桥梁。它允许工人以简单和吸引人的方式可视化并交互工厂机器和传感器的数据，无论是使用移动设备还是 AR 头戴设备。
AR 在自动化中的应用可以从员工的面部识别到访问具体机器，到通过 AR 眼镜进行现场生产过程的实时监控或远程访问和控制。
AR 在旅游中的应用
增强现实吸引人的地方在于它在现实世界之上显示的视觉内容。这使得这项技术非常适合增强旅行体验，从展示天际线信息到让博物馆中的动物栩栩如生，甚至实时翻译标志和指南。在旅游业中，AR 的一些最常见用途包括在陌生城市的街道上充当现场导游，用户可以在 AR 应用显示他们最感兴趣的景点的同时在城市中四处走动；当用户用摄像头指向地图时，在地图上显示景点和兴趣点（POIs）；在画作、雕塑或纪念碑上提供各种额外信息，以便当用户指向一幅画时，它可以显示关于作者、画作创作地点和时间或甚至通过 3D 模拟使其栩栩如生的视频。除了所有这些体验之外，当 AR 与其他沉浸式技术（如虚拟世界或 360 度视频）结合时，体验又向前迈出一步，使用户能够同时访问多个地方（例如，在博物馆网络中，在访问其中一个的同时，能够虚拟访问其他地方）。
在本节中，我们探讨了如何在不同领域使用增强现实（AR）的几个示例，从在建造之前可视化原型，到吸引客户或为艺术品增值。现在，你对 AR 在商业世界中的可能性以及如何根据每个行业的需要应用它有了更好的理解。
摘要
在本章中，我们通过学习什么是 AR、它的起源以及我们需要哪些软件和元素来创建它，首次了解了 AR。我们了解了本书中将使用的 SDK 的名称和主要功能，现在我们准备开始创建自己的 AR 项目。
在下一章中，我们将介绍 Unity 3D，这是一个 3D 工具，可以作为几乎所有 AR 项目的基础，因为大多数 AR SDK 都与它兼容。你将了解它是如何工作的，并创建一个简单的示例，这将是后续 AR 项目的基础。
第二章：Unity AR 开发入门
本章将向您介绍 Unity，这是一个实时 3D 开发平台，已成为多平台增强现实（AR）开发的主要工具之一。其多功能性、广泛的文档和活跃的论坛使得学习曲线快速，并且其 Asset Store 中已创建的场景、示例和多样化的资源将帮助您以快速简单的方式创建令人惊叹的 AR 体验。
本章的主要目标是让您在使用 AR 项目之前对 Unity 感到舒适。您将学习如何安装和使用 Unity，了解用户界面的分布，以及主要组件的名称和用途。然后，您将创建一个简单的 C#脚本，以了解脚本编写的强大功能，以便能够自定义 3D 场景。到本章结束时，您将掌握基本知识，以便可以通过集成和与以下章节中将要介绍的 AR软件开发工具包（SDKs）一起工作来进一步探索 Unity。
Unity 是 AR 开发中最强大的工具之一；它是跨平台的，大多数 AR SDKs 都有与 Unity 兼容的特定包。在本书中，第五章，使用 EasyAR 进行营销的 AR，第六章，使用 Vuforia 进行零售的 AR，和第七章，使用 Vuforia 和 Epson 眼镜进行自动化的 AR，将使用 Unity 开发，尽管它们的示例项目是在 Android 设备上实现的，但它们也可以构建（Epson 眼镜除外，它只能在 Android 操作系统上运行）为 iOS 设备，几乎不需要代码更改。此外，第三章，使用 ARCore 进行制造的 AR，和第八章，使用 ARKit 进行旅游的 AR，也可以在 Unity 中实现。
因此，本章的重要性在于，您将学习如何创建 Unity 3D 项目并为特定平台构建它，这将为更复杂的项目奠定基础。
在本章中，我们将涵盖以下主题：
-
介绍 Unity
-
为 Unity 准备您的系统
-
理解 Unity 界面
-
Unity 主要组件
-
脚本编写 – 第一个 C#示例
技术要求
本章的技术要求如下：
硬件（从docs.unity3d.com/2019.1/Documentation/Manual/system-requirements.html）：
-
CPU：支持 SSE2 指令集
-
GPU：具有 DX10（着色器模型 4.0）功能的显卡
操作系统：
-
Windows: 7 SP1+，8，10，仅限 64 位版本
-
macOS: 10.12+
-
Linux: 固定在 Ubuntu 16.04，18.04 和 CentOS 7
Android 开发软件：
-
Java 开发工具包（本书中为 1.8.0）
-
Unity 3D（本书中为 2019.1.2f1）
-
Android SDK（包含在 Unity 安装中）
-
Microsoft Visual Studio Community 2017（包含在 Unity 安装中）
本章的资源和相关代码文件可以在以下链接找到：github.com/PacktPublishing/Enterprise-Augmented-Reality-Projects/tree/master/Chapter02。
虽然我们将为 Android 设备开发 Unity 项目，但你也可以为 iOS 构建它们。在这种情况下，要求是 macOS 和 Xcode 9.4 或更高版本。
介绍 Unity
当我们想到近年来对游戏开发产生重大影响的工具时，一个名字脱颖而出：Unity。Unity 是一个图形引擎，帮助我们开发视频游戏、交互式项目、可视化以及在不同平台上进行实时 2D 和 3D 动画。Unity 提供了一个完整的可视化编辑器和脚本，使我们能够创建具有专业完成度的应用程序。
为了这个目的，Unity 由一系列旨在简化设计游戏的不同方面的任务（包括图形、物理、动画和人工智能）的工具包组成。Unity 是一个独特的开发系统，它专注于资产而不是像其他类似的 3D 建模应用程序那样关注代码。游戏内容是从编辑器构建的，游戏则是使用 C# 脚本语言编写的。
Unity 还包括一个地形编辑器，你可以在这里使用可视化工具、绘画或纹理创建地形（例如空白纸张），还可以添加从 3D 应用程序（如 Blender、3ds Max 和 Maya）导入的其他元素。
Unity 在市场上迅速增长，并因其某些特性而被公司和专业人士采用，这些特性使 Unity 在其他游戏引擎中脱颖而出：
-
Unity 是一个多平台工具，允许我们为多个平台发布 2D 和 3D 内容，例如 Windows、OS X、GNU/Linux、Flash、Xbox One、PS4、Nintendo Switch、Android 和 iOS，包括基于 Web 图形库（WebGL）技术的网络游戏（这是一个在任何网络浏览器中渲染 3D 图形的标准规范）。
-
Unity 为学习和独立开发者提供了一套完整的免费许可证，以及根据开发者公司业务量不同而具有不同可扩展定价计划的许可证。
-
Unity 是最受欢迎的 AR 和 虚拟现实（VR）开发引擎之一，从早期就支持行业发展。市场上三分之二以上的 AR 和 VR 应用都是使用 Unity 开发的。
-
Unity 是一个可扩展的环境，可以通过我们自己的或第三方插件进行扩展，并且以可扩展的方式随着新元素和功能的发展而增长，这些元素和功能并非它最初创建时设计的。
-
Unity 提供了一个门户，我们可以用它来购买和销售各种免费和付费的扩展和资源，称为 Asset Store。这个门户不仅对开发者有用，还让商业市场能够创建特定的公司，这些公司的商业模式是创建工具和内容，以便他们可以在这个在线商店中销售自己的资源。
-
Unity 集成了额外的服务，其中大部分是免费的，使我们能够在不同的视频游戏世界的商业模式中产生利润。例如，这些服务包括 Unity Ads，允许您添加广告；Unity Analytics，提供有关用户互动的信息；以及 Unity Networking，为在线游戏开发提供基础设施。
现在我们已经了解了 Unity 是什么以及它的众多特性，我们可以开始准备我们的系统，以便安装必要的软件。
为 Unity 准备您的系统
在这本书中，我们将使用 Unity 来开发 Android 移动应用程序。为了创建 Android 应用程序，我们需要安装Java 开发工具包（JDK）和 Android软件开发工具包（SDK）。
正如我们在技术要求部分提到的，如果我们在一个运行 macOS 计算机上的 Xcode 上运行 Unity，我们可以轻松地运行相同的项目用于 iOS。
由于 Unity 直接提供 Android SDK 安装，我们将首先安装 JDK，然后继续在我们的计算机上安装 Unity。
安装 Java 开发工具包（JDK）
要安装 JDK，请按照以下步骤操作：
-
确保您接受 Java SE 的二进制代码许可协议。
-
选择最新的 Java SE 开发工具包（在我们的例子中，这是 Java SE 开发工具包 8u201）。
-
下载后，运行安装文件，并让它将 JDK 和 JRE 安装到默认文件夹中。
从 Unity 2019.2 版本开始，Unity 安装允许您在 Android 构建支持选项中安装 OpenJDK（请参阅安装 Unity部分）。
现在您已经安装了 JDK，让我们安装 Unity。
安装 Unity
我们将使用 Unity Hub 安装 Unity，这是一个允许我们在计算机上安装和管理不同版本的 Unity 的工具。您可以从unity3d.com/get-unity/download下载 Unity Hub。
按照以下步骤安装 Unity：
-
下载并安装 Unity Hub。
-
运行 Unity Hub。第一次运行时，它会通知您缺少许可证，如下面的截图所示。点击管理许可证：
无有效许可证信息
- 在许可窗口中，将出现另一条消息，要求你登录以添加许可。点击登录：
许可窗口中的登录消息
- 将会出现一个弹出窗口，要求你输入电子邮件和密码。如果你没有账户，你可以通过点击创建一个账户来创建一个账户。你也可以使用谷歌或 Facebook 登录：
登录 Unity
- 现在，选择一个许可选项，然后点击完成。(如果你符合要求，可以使用个人许可免费使用 Unity。如果不满足条件，你必须在他们的网页上购买 Unity Plus 或 Pro (
store.unity.com)。)
选择产品的许可
- 现在，返回，点击安装选项卡，然后点击添加以添加新的 Unity 安装：
添加新的 Unity 版本
- 在出现的弹出窗口中，选择你想要安装的 Unity 版本和要添加的模块。在我们的例子中，我们使用的是 2019.1.2f1 版本，我们将安装 Microsoft Visual Studio Community 2017 进行编码和 Android 构建支持，以及 Android SDK & NDK Tools 进行 Android 开发，如下面的截图所示：
选择 Unity 版本和模块
Unity Hub 总是显示每个版本的最新编译版本。如果你想安装特定版本，例如我们在这里使用的版本，你可以在 Unity 存档中找到它并通过 Hub 安装：unity3d.com/es/get-unity/download/archive。
从 Unity 2019.2 版本开始，在 Android 构建支持下出现了一个新选项，可以直接安装 OpenJDK。
- 如果你计划使用 Vuforia 进行开发，正如我们在第六章 AR for Retail with Vuforia 和第七章 AR for Automation with Vuforia and Epson Glasses 中将要做的，请检查以下截图中的 Vuforia 增强现实支持选项。然后，点击下一步并完成安装：
选择 Vuforia 增强现实支持
Unity 的最新版本可能并不总是支持 Vuforia。如果你在列表中没有看到 Vuforia，不要慌张！这是因为最新的 Unity 版本还没有支持它，你应该安装一个支持 Vuforia 的旧版本。
- 安装完成后，你将被送回到安装窗口，在那里你会看到新版本和已安装的模块，如下面的截图所示：
新 Unity 版本的安装窗口
- 如果在安装过程中你忘记添加一个模块或者你想稍后添加，你只需点击右上角的三点按钮，然后选择添加模块，如下所示：
安装完成后添加新模块
- 现在，点击“项目”标签页。在这里，我们将通过点击 NEW 按钮来创建一个新的项目，如下所示：
创建新项目
- 我们将创建一个 3D 项目（已经选中）。在设置面板中，给项目命名并设置位置，如下面的截图所示。然后，点击 CREATE：
设置新的 Unity 项目
- 现在，Unity 将打开新项目，你可以开始使用它。如果你关闭 Unity 窗口，你可以通过从 Unity Hub 的项目窗口中选择它来重新打开项目，如下面的截图所示：
新项目出现在项目窗口中
就这样。现在，你已经将 Unity 安装到你的电脑上，你的第一个项目已经打开，你可以开始使用它了。在下一节中，我们将提供 Unity 界面的导游，以便了解 Unity 提供的可能性以及如何使用每个工具。
理解 Unity 界面
第一次打开 Unity 编辑器时，你会看到一个带有不同栏和窗口的布局，类似于以下截图所示：
初始 Unity 布局
初看之下，Unity 的配置略带 3D 建模工具的感觉，中间是 3D 场景，尽管它比建模工具多了几个面板。如果你不熟悉 3D 工具，可能会觉得理解所有内容有些令人畏惧，但 Unity 的界面相当直观，并且在 Unity 各个版本中保持得很一致。前一个截图中所看到的主要组件如下（从左上角到右下角）：
-
工具栏：在这里，我们有主要的按钮，以便我们可以在场景视图中操作对象以测试场景。
-
层次结构窗口：层次结构窗口按层次顺序显示场景视图中的元素。
-
场景视图、游戏视图和资产商店窗口：这三个标签页有不同的用途。场景视图显示 3D 场景中的所有元素。游戏视图从摄像机的视角显示场景构建后的样子。资产商店窗口可以用来从 Unity 商店下载包和资产，以便我们可以将它们包含在我们的项目中。
-
检查器窗口：当在层次结构窗口或场景视图中选择一个元素时，其特性和组件将显示在这个窗口中。
-
项目窗口和控制台窗口：前者显示项目中所有目录和文件，我们可以（或不能）在场景中使用，而后者显示日志消息。
现在，我们将详细探讨每个组件，并学习如何根据我们的需求和喜好更改此布局。
工具栏
此工具栏固定在屏幕上，使我们能够访问 Unity 的主要功能。它分为三个部分：用于操作场景中对象的工具、游戏视图控件以及一组按钮，用于访问 Unity 服务和管理图层和 UI 布局：
在左侧，我们可以看到我们可以用来操作场景视图及其上对象的工具。以下是这些工具：
-
手动工具
-
移动工具
-
旋转工具
-
缩放工具
-
矩形工具
-
组合工具
-
中心/旋转点按钮
-
本地/全局按钮：
工具栏左侧的按钮
让我们逐一查看这些工具：
-
手动工具：这是场景的导航工具。它有三个用途：
-
移动：左键点击 + 拖动以在场景中移动而不会更改其任何对象。工具栏和场景视图中出现一个手形图标。https://github.com/OpenDocCN/freelearn-csharp-zh/raw/master/docs/entp-ar-proj-/img/04bbc9fc-8c03-4e57-a647-6926062082bc.png
-
环绕：Alt + 左键点击 + 拖动以在场景中环绕。工具栏和场景视图中出现一个眼睛图标。https://github.com/OpenDocCN/freelearn-csharp-zh/raw/master/docs/entp-ar-proj-/img/09480e16-40c5-446c-9267-8992227b2343.png
-
缩放：Alt + 右键点击 + 拖动以在场景中缩放和缩小。工具栏和场景视图中出现一个放大镜图标。https://github.com/OpenDocCN/freelearn-csharp-zh/raw/master/docs/entp-ar-proj-/img/263a77fc-52ef-4dff-9899-6fdc257e944b.png
-
您可以通过按鼠标滚轮并拖动来随时使用移动功能。您还可以使用鼠标滚轮进行缩放和缩小。
- 移动工具：当选择此按钮时，您可以通过拖动相应的箭头将场景中的对象移动到三个轴上。您还可以拖动出现在箭头交点上的小正方形，将对象移动到平面（两个轴）而不是单个轴上：
移动 3D 元素
- 旋转工具：当选择此按钮时，您可以通过拖动相应的圆圈在三个轴上旋转场景中的对象：
旋转 3D 元素
- 缩放工具：当选择此按钮时，您可以通过拖动相应的箭头（以小立方体结束）在三个轴上缩放场景中的对象。您还可以拖动中心立方体以在三个轴上均匀缩放对象：
缩放 3D 元素
-
矩形工具：我们之前看到的工具被认为是用来操作 3D 模型的。然而，矩形工具专门用于场景中的用户界面（UI）元素，并且它在二维空间中工作。在以下屏幕截图中，我们正在操作一个按钮：
- 您可以通过拖动来移动 UI 元素：
移动 UI 元素
-
- 要旋转一个元素，将鼠标悬停在角落直到出现旋转图标。然后，点击并拖动：
旋转 UI 元素
-
- 您可以通过从角落拖动来缩放元素：
缩放 UI 元素
- 组合移动、旋转和缩放工具：此按钮组合了移动、旋转和缩放选项：
所有引导线一起出现以操纵对象
- 中心/轴点按钮：当选择中心时，平移、旋转和缩放操作将从对象的中心点执行。在以下截图中，相机和方向光被选中，引导线出现在结果组的中心点。在这种情况下，相机和灯光将围绕该中心点旋转：
中心选项已激活
当选择轴点时，操作将从每个轴点执行。在这种情况下，相机和灯光将围绕各自的轴点旋转：
轴点选项已激活
- 本地/全局按钮：当选择本地时，平移、旋转和缩放操作将相对于所选对象的起点执行。在以下截图中，灯光被旋转，其坐标系也相应旋转：
本地选项已选择
当选择全局时，操作将相对于世界原点执行：
全局选项已选择
在工具栏的中心，我们有播放、暂停和步进按钮，我们可以使用它们来控制游戏视图：
中心位置的按钮
在右侧，我们有几个按钮，我们可以使用它们来访问 Unity 协作服务、Unity 云服务（云图标）、我们的 Unity 账户、图层可见性菜单和布局菜单。我们将在本节后面使用布局菜单来为我们的项目创建自定义布局：
右侧的按钮
现在我们已经看到了工具栏的功能，让我们看看场景视图。
场景视图
场景视图是您将与当前场景以及您在上面创建的 3D 世界交互的窗口。在这里，您将拥有构成场景的所有内容，您将能够使用工具栏上的命令直观地操纵它们。使用此视图，我们可以导航整个场景，从所有角度查看它，以便我们可以放置 3D 对象并确保它们处于正确的位置。在此视图中，我们还可以操纵 UI 元素。在这个窗口中，我们想要讨论的主要元素是 Gizmo，它位于窗口的右上角。
Gizmo：您可以使用 Gizmo 快速更改视图（顶部、底部、右侧、左侧、前视图、后视图）并在透视和等距（正交）模式之间切换。在更改视图时，Gizmo 中的x、y和z箭头将指向每个轴的方向：
前视图、顶视图和右视图上具有不同箭头的 Gizmo
视图名称左侧的小图标显示它是一个透视或等距（正交）视图，如下面的屏幕截图所示。您可以通过单击小图标在它们之间切换：
透视和等距（正交）视图允许我们调整场景中的对象
现在，让我们来看看层级窗口以及它是如何工作的。
层级窗口
这个窗口是场景视图中元素的分层视图，这些元素通过它们的名称来表示。在顶部，我们始终会有场景，并且我们添加到场景中的所有对象都将悬挂在它上面。在下面的屏幕截图中，我们有不同的元素，其中一些元素（立方体、画布）包含更多的元素。
分层视图使我们能够轻松找到元素及其之间的关系（父子关系），这些关系会影响它们的行为方式。例如，如果我们移动立方体元素，它的子对象 ChildOfCube 将随之一同移动。然而，如果我们只想移动 ChildOfCube 元素，我们会在层级窗口中选择它并移动它，而不会影响其父对象立方体。在上一节中我们解释的局部/全局定位方面，子对象的局部位置、旋转和缩放将相对于父对象：
在层级窗口和场景视图中选中的立方体对象
我们还将使用此窗口通过右键单击并选择我们想要添加到场景中的元素来快速添加新元素。
另一方面，可以通过在场景视图中或层级窗口中单击对象来选择场景中的对象。当对象有多个子对象时，后者非常有用，因为我们可以确保我们选择了正确的元素。在场景视图中，它们可能会重叠。
一个小技巧：在层级窗口中双击对象的名称可以使场景缩放到该对象。
场景视图和层级窗口是我们可以使用来操作场景中元素的两个窗口，即我们将构建到我们的设备中的元素。现在，我们将学习当场景中的一个元素被选中时，检查器窗口是如何工作的。
检查器窗口
此窗口显示当前选中对象的属性和组件。从这里，你可以编辑、删除和向对象添加新组件。由于场景中的不同对象将具有不同的属性，检查器窗口将相应地改变，以在每个时刻显示对应的信息。此窗口可以在以下屏幕截图中看到：
主摄像机和立方体的两个不同的检查器窗口
如前一个屏幕截图所示，场景中的每个元素都将有一个变换组件，以便它可以移动、旋转和缩放场景中的该元素。然而，除了这个之外，图像中的主摄像机和立方体元素没有更多共同的组件。对于摄像机来说，它有一个预期的摄像机组件，而立方体有一个网格、一个渲染器（用于可视化对象）和一个标记该对象物理边界的碰撞器。
检查器窗口中的组件可以被最大化或最小化，这样我们就可以组织视图。这样，如果我们有一个 GameObject 中有许多组件，我们只看到在每一时刻所需的那些。为此，我们可以使用每个组件旁边的小箭头，如以下屏幕截图所示，其中相同的 Main Camera 已将其组件折叠：
主摄像机及其组件已折叠
现在，让我们看看项目窗口是如何工作的。
项目窗口
此窗口显示了项目中所有可用的资产。当你将新资产导入到项目中时，它将出现在此窗口上，从这里，你可以将其拖动到你的场景中。这是一个层次视图，文件按文件夹组织：
显示资产文件夹中主要文件夹的项目窗口
重要！ 在构建应用程序时，并非项目窗口中出现的每个资产都会被构建进去。除了一些特殊文件夹，可以在以下位置找到：docs.unity3d.com/Manual/SpecialFolders.html。只有当资产与场景连接时（直接出现在场景上、通过脚本调用等），它们才会被包含在最终的包中。
现在，我们将看看游戏视图，正如我们在本节开头提到的，它位于场景视图旁边的标签中。
游戏视图
此窗口显示了场景是如何由你世界中的摄像机（们）渲染的。你可以使用工具栏中的播放、暂停和步进按钮来播放你的场景，并查看发布后的外观：
从主摄像机对象的视角看，按钮和立方体对象
**重要！**在播放模式下所做的任何更改都是临时的，并且将在您再次点击播放按钮退出此模式时消失。当您想尝试不同的方法（例如，对象旋转或颜色）以选择适合您的方法时，这很有用，但请确保您没有丢失重要的工作，因为您忘记关闭播放模式了！
此窗口旁边的标签是资产商店窗口。让我们看看。
资产商店窗口
此窗口连接到 Unity 资产商店，这是开发者和设计师上传他们的资产的地方。您可以从此窗口下载并导入资产商店中的任何资产到您的项目中：
Unity 中的资产商店窗口
资产商店提供免费和付费内容，如 2D 和 3D 模型和场景、音频文件、模板、完整项目等，您可以直接将这些资产下载并导入到您的项目中。所有这些资产都使创建项目的过程更加容易和快速。
最后但同样重要的是，让我们学习控制台窗口的工作原理及其用途。
控制台窗口
在这里，您可以找到您项目的日志。此窗口显示有关项目的警告、错误和信息日志，如下面的截图所示。如果您在调试错误代码时遇到困难，Unity 论坛（[forum.unity.com/](https://forum.unity.com/））是一个非常有用的工具，您可以搜索类似案例并寻求帮助：
显示不同类型信息、警告消息和错误的控制台窗口
本窗口的主要元素及其功能如下：
-
清除按钮移除所有消息（除了编译错误）。您必须在更改当前场景或播放它之前纠正这些错误。
-
您可以使用折叠功能将相同的消息合并成一条消息行。
-
使用“在播放时清除”来删除您在工具栏上点击播放按钮时产生的所有消息。
-
错误暂停允许在发生错误时暂停场景的执行。
-
使用右侧的三个按钮来显示/隐藏不同类型的消息（信息、警告和错误）。
到目前为止，你应该已经对 Unity 界面的工作方式有了相当的了解。然而，在继续之前，我们将学习如何更改布局配置。根据我们的需求和喜好自定义各种窗口既简单又实用。
更改布局
现在我们已经了解了主要窗口及其功能，我们将首先做的是调整这些窗口在屏幕上的布局，以便它们符合我们项目的需求。对于这本书，我们将使用 2 比 3 布局的修改版，这将允许我们同时看到 AR 场景和游戏。然而，一旦你熟悉了 Unity 的使用，你可以自由选择最适合你的布局。
对于修改后的版本，请按照以下步骤操作：
- 首先，在工具栏右上角的下拉菜单中选择 2 比 3 布局，就在检查器窗口上方：
在布局下拉菜单中选择 2 比 3
- 然后，拖动项目窗口，使其位于层次窗口下方：
将项目窗口拖动到层次窗口下方
- 通过将底部的滚动条拖到最左边来选择项目窗口上的列表视图：
将水平滚动条移到左边
- 创建一个名为
1280 x 720的新游戏视图纵横比，并插入以下值：宽度：1280，高度：720：
创建新的纵横比
- 打开控制台窗口，按 Ctrl + Shift + C 或 Window|General|Console，并将其拖动到游戏视图旁边的标签页：
将控制台窗口拖到游戏视图旁边
- 最后，为了确保每次打开 Unity 时此布局都可用，请转到布局，选择保存布局…，并给它命名：
保存创建的布局
现在，我们已经准备好了布局，可以在我们的 AR 项目中使用。到目前为止，你应该已经熟悉了 Unity 提供的不同窗口和工具以及它们的工作方式。在下一节中，我们将查看在 Unity 项目中可以找到的主要元素。
Unity 的主要元素
在 Unity 中构建的应用程序将由一个项目组成。该项目将包含我们开发应用程序所需的所有必要元素，例如模型、脚本、计划、菜单等等。当你启动 Unity 时，你可以通过指向其根文件夹来打开一个项目。
每个项目包含一个或多个文档，称为场景。在 Unity 中创建的项目被组织成场景，其中场景可以是项目的任何部分。当我们谈论应用程序时，场景可以是开始菜单到任何级别或区域。单个场景将包含许多元素，例如用户界面、3D 对象、脚本等。
你可以在 Unity 项目中找到的一些主要元素如下：
-
资产
-
游戏对象
-
组件
-
脚本
-
预制体
首先，我们将查看资产。
资产
Unity 将用于创建项目的文件称为资产。它们是 Unity 项目中的构建块，可以是图像文件、3D 模型、声音文件、代码文件等形式。Unity 中的资产，如材质、纹理、动画或脚本，可以通过在顶部菜单栏中点击 Assets|Create，或者在项目窗口中的文件夹上右键单击并选择 Create 来在项目中创建。
当我们处理外部资产时，例如从互联网下载的图像或我们设计的 3D 模型，我们可以通过将它们从外部文件夹（例如，从 Windows 资源管理器中的一个文件夹）拖动到项目窗口中的一个文件夹，或者在项目窗口中的文件夹上右键单击并选择 Import New Asset…，将它们添加到项目中。
使用以下方法之一将来自您计算机相册的两个图像添加到项目的Assets文件夹中（我们现在将使用一个，稍后使用另一个），如图所示：
向项目中添加图像
另一种导入资产的方法是通过 Import-Package 导入包含多个资产的整个包。这个选项可以在菜单栏的 Assets 菜单中找到，或者在项目视图中右键单击。
要从项目中删除资产，右键单击它并按 Delete。重要的是要注意，一旦从项目中删除了资产，就无法再恢复它。
现在，让我们看看什么是 GameObject。
GameObjects
当一个资产在场景中使用时，它就变成了一个 GameObject。可以通过在顶部菜单栏中点击 GameObject，或者在场景视图或层次结构窗口中右键单击来将 GameObject 添加到场景中。
使用以下方法之一将 3D Object|Cube 添加到场景中，并将其移动到主摄像机前面，在游戏视图中可见：
在层次结构窗口中创建一个立方体
现在，让我们谈谈组件。
组件
组件有不同的形式，它们负责为 GameObject 添加功能。它们可以用来创建行为（例如，脚本），定义 GameObject 的外观（例如，渲染器），并影响项目中对象功能的其他方面。
所有的 GameObject 都至少包含一个组件。我们从 Transform 组件开始。这个组件负责告诉 Unity 引擎一个对象的位置、旋转和缩放。其他常见的组件元素包括 Renderer 和 Collider。我们将在本书接下来的章节中探讨它们的使用。
通过选择对象然后点击菜单栏上的 Component 菜单，或者在检查器窗口上点击 Add Component 按钮，将组件添加到 GameObject 中。
组件也可以从项目窗口拖动到游戏对象（例如，您可以从项目窗口将脚本拖动到场景视图中的立方体上，脚本将自动出现在检查器窗口中）。
将之前添加到项目窗口中的其中一个图像拖动到场景视图的立方体中，将其转换为纹理：
以图像作为纹理的场景中的立方体
现在我们已经了解了项目中的可见元素，让我们来谈谈不可见的元素：脚本。
预制体
预制体是具有自定义属性和组件的游戏对象（例如，添加了脚本来使其闪烁的光源），您可以将它们存储在项目窗口中，以便在不同的场景/时刻中重复使用。它们可以在任何时间（包括运行时）创建或复制，并且每当您更改原始预制体的属性时，除非另有定义，否则所有实例都将自动更新。
脚本
脚本，实际上是一种组件，是 Unity 不可或缺的一部分，因为它们定义了项目中不同元素的行为。您可以像操作其他组件一样操作（添加/编辑/删除）脚本。
右键单击项目窗口，然后按 Create|C# Script 创建一个新的脚本并给它命名（例如，CubeHandler.cs）：
创建一个新的脚本
在检查器窗口中，您会看到新创建的脚本中包含一些默认代码。我们将在下一节中讨论此代码。现在我们已经了解了 Unity 的不同元素，让我们在下一节学习如何编写脚本。
脚本编写 – C#中的第一个示例
为了了解 Unity 中脚本的所有潜力，我们将查看上一节中创建的脚本CubeHandler.cs。正如其名称所暗示的，我们将向其中添加一些代码来操作场景中的立方体。
双击项目窗口中脚本的名称，在 Visual Studio 中打开它。
如果您在安装 Unity 之前已经在计算机上安装了 Visual Studio，那么在双击脚本时，Unity 可能不会自动检测它。如果是这样，您将不得不转到 Edit|Preferences 并转到外部工具。从那里，选择 Visual Studio .exe 文件的路径：
已将 Visual Studio 分配为外部脚本编辑器的首选项窗口
打开脚本后，您将看到以下自动生成的代码：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class CubeHandler : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
}
}
前三行是调用三个引用。前两个是常用集合，而第三个是我们需要的工作与 Unity 引擎的引用。
然后，你有类声明。类的名称必须与.cs脚本相同。默认情况下，通过 Unity 生成的类将继承自MonoBehaviour，这允许我们使用以下两个方法：
-
Start方法会在 Unity 场景生成后立即自动调用，并在第一帧更新之前。因此，当初始化变量时，这个方法很有用。 -
Update方法在每个帧上被调用一次，这意味着该方法内的代码将被重复执行。
让我们尝试添加一些代码来控制场景中的立方体：
- 首先，我们将在类声明之后、
Start方法之前声明一个名为speed的变量：
private float speed;
- 然后，我们将在
Start方法中初始化speed的值：
void Start()
{
speed = 0.5f;
}
- 最后，我们将在
Update方法中使用这个变量来告诉立方体以一定的速度旋转：
void Update()
{
transform.Rotate(Vector3.up * speed);
}
这最后一行访问当前 GameObject 元素的transform组件，该组件负责其位置、旋转和缩放。我们告诉transform组件，我们想要以我们之前设置的速度在垂直轴（Vector3.up）上旋转对象。
- 仅凭脚本本身不会做任何事情，因为它不知道我们指的是哪个对象的
transform。为了告诉脚本我们想要操作场景中的哪些对象，请回到 Unity 编辑器并将脚本拖放到立方体上。确保它在检查器窗口中作为其组件之一出现。这样，我们就告诉脚本我们想要旋转的是立方体。完整的代码应该如下所示：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class CubeHandler : MonoBehaviour
{
private float speed;
public Texture2D texture;
// Start is called before the first frame update
void Start()
{
speed = 0.5f;
}
// Update is called once per frame
void Update()
{
transform.Rotate(Vector3.up * speed);
}
}
- 现在，如果你在工具栏上按下播放按钮，游戏视图将显示立方体旋转：
当播放场景时，立方体将开始旋转
- 再次按播放按钮以停止模拟。尝试更改
speed的值，看看它如何影响立方体的旋转速度。
transform组件有点特殊，因为它有自己的名称。要访问任何其他组件，我们需要使用GetComponent<ComponentName>()函数。例如，如果我们想更改立方体的纹理（我们之前拖入的图像），我们可以使用这个函数。负责材质和纹理的组件是Renderer。让我们将以下代码包含到我们的脚本中：
- 首先，在速度定义下方添加以下代码行，它声明了一个
Texture2D类型的变量：
public Texture2D texture;
- 现在，将以下两行代码添加到
Update方法中，该方法位于转换行下方：
if (Input.GetKeyDown(KeyCode.A))
GetComponent<Renderer>().material.mainTexture = texture;
在这里，我们说的是，如果系统检测到A键被按下，对象的Renderer组件的纹理将更改为新的纹理。正如你所见，在这种情况下，我们并没有在Start方法中初始化纹理。相反，我们将其设置为public，并将在 Unity 内部对其进行赋值。
- 返回 Unity 编辑器。你将看到在检查器窗口中脚本组件中已添加了一条新行。要将其他图像分配给它，你可以从项目窗口拖动它，或者点击右侧的圆圈并从项目中选择它：
立方体的最后一个组件是带有新行以选择纹理的脚本
- 现在，再次按下播放。当立方体旋转时，按下A键。你将看到立方体的纹理如何变化：
按下键盘上的 A 键以查看立方体的纹理变化
现在，你已经了解了 Unity 项目背后的所有逻辑，并具备了创建更复杂脚本的基礎。在接下来的章节中，我们将使用脚本来实现诸如在 AR 中显示元素或通过用户界面与用户交互等目的。
摘要
在本章中，我们学习了如何安装 Unity 以及使其工作的必要模块，以便我们可以构建移动应用程序。我们还介绍了 Unity 界面的设计，其主要窗口，以及如何根据我们的需求自定义它们的组成。我们查看了一些主要窗口、它们的工具以及如何使用它们。然后，我们学习了在 Unity 项目中可以找到的主要元素以及如何创建/导入它们。最后，我们通过几行代码创建了我们第一个脚本，以了解我们如何轻松地控制和更改场景中的对象。
在下一章及随后的章节中，我们将使用本章所学的所有元素来生成功能齐全的 AR 项目。
第三章：使用 ARCore 进行 AR 制造
在本章中，我们将使用 Google 的 ARCore 工具创建我们的第一个 AR 项目。本章的主要目标是向您介绍最新且增长最快的 AR 工具之一，ARCore。到本章结束时，您将掌握在 Android Studio 中轻松创建自己的 ARCore 项目的必要技能。同时，我们展示了 AR 在制造中的一个应用，即原型设计。
到本章结束时，您将创建一个原型查看器应用程序，用户可以在平面上放置工业部件、机器等 3D 设计，在它们周围和内部导航，并使用手指进行操作（移动、旋转和缩放）。有了这些知识，您还将能够改进当前项目，并适应该领域的需求。
本章将涵盖以下主题：
-
使用 AR 进行制造
-
探索 ARCore
-
创建原型 AR 查看器
技术要求
本章的技术要求如下：
-
Android Studio（本书中为 Windows 的 3.5.2 版本）。
-
Java 开发工具包（本书中为 1.8.0 版本）。
-
Sceneform 插件（从 Android Studio 内部安装。本书中为 1.13.0 版本）。
-
支持 ARCore 的移动设备（请参阅此处列表：
developers.google.com/ar/discover/supported-devices）。该项目已在三星 Galaxy A5（2017）和 Pocophone F1 上进行了测试。
要安装 Android Studio，Windows 的系统要求如下：
-
最小 RAM 4 GB，建议 8 GB
-
最小可用磁盘空间 2 GB，建议 4 GB
-
最小屏幕分辨率 1280x800
关于其他操作系统的更多详细信息，您可以在本页末尾找到官方要求：developer.android.com/studio。
本章的代码文件可以在此处找到：github.com/PacktPublishing/Enterprise-Augmented-Reality-Projects/tree/master/Chapter03。
使用 AR 进行制造
工业 4.0，也称为第四次工业革命，指的是在工厂内包含数字化和互联工具，涵盖生产过程到维护和培训。尽管这个术语已经存在多年，但在过去几年里，由于增强现实（AR）、虚拟现实（VR）、物联网（IoT）、大数据分析（BDA）、增材制造（AM）、网络物理系统（CPS）和人工智能（AI）等技术的指数级增长（在质量和数量上），这个工业 4.0 概念已经获得了新的维度。
AR 的视觉组件使其成为用户自然的接口，用户可以通过移动设备或智能眼镜接收有关流程的实时信息，访问远程系统以获取额外数据，并控制流程和机器。
在制造业中，AR 有许多用途，例如原型设计、生产和培训。在本章中，我们将介绍原型设计，特别是 AR 如何通过在真实世界中可视化设计来帮助减少原型设计成本。这允许设计师、工人和潜在客户在三维空间中操纵模型，对其进行缩放，与单个部件交互，甚至一起穿越它们。ARCore 是我们可以用作该目的的 AR 工具之一。
探索 ARCore
自 2017 年开始预览，ARCore 的第一个版本于 2018 年 2 月发布，它是谷歌为 Android 和 iOS 创建增强现实应用程序的平台。它利用不同的功能，如运动跟踪，来估计移动设备相对于真实世界的位置和方向，以及环境定位，以找到和跟踪水平表面，如地面、平板电脑或墙壁，以及光估计，以将 3D 元素真实地放置到真实世界中。这些功能的更详细解释可以在developers.google.com/ar/discover/concepts找到。针对 Android 7.0 及以上版本，市场上并非所有设备都支持这项技术，尽管自第一个 SDK 版本以来，支持的数量已经大幅增加。您可以通过此处查看当前支持的设备列表：developers.google.com/ar/discover/supported-devices。
ARCore 应用程序可以在不同的平台上开发，例如 Android Studio、iOS 的 Xcode、Unity3D 和 Unreal Engine。当使用 Android Studio 时，开发者可以将 Sceneform 集成，这是一个 3D 引擎，它可以帮助以比 OpenGL 库更简单的方式集成 3D 环境和模型。我们将在项目中使用这个插件来显示 3D 模型。
当使用 ARCore 开发应用程序时，请确保在您的应用程序中披露：developers.google.com/ar/distribute/privacy-requirements。
对于这个项目，我们将开发一个原型查看应用程序，该应用程序将展示三种不同的引擎模型。我们将在项目中使用的引擎模型是从sketchfab.com/3d-models/rocket-engines-6fba4dbbb9444e99ba68425bcb3a7f70获取的。
既然我们已经了解了 ARCore 的基础知识，让我们开始开发应用程序。
创建原型 AR 查看器
在本节中，我们将开发我们的 AR 查看器以进行原型设计。首先，我们将安装所有必需的软件工具——JDK 和 Android Studio——然后我们将创建我们的 Android 应用程序，学习如何在其中启用和使用 ARCore，以及如何使用 Sceneform 插件来显示 3D 元素。
安装 Java 开发工具包 (JDK)
Android Studio 需要我们安装 JDK。它通常位于 C:\Program Files\Java\jdk_version。如果您还没有安装，请按照以下步骤操作：
-
访问 www.oracle.com 并下载最新的 Java SE 开发工具包。
-
下载完成后，运行安装文件，并让它在其默认文件夹中安装 JDK 和 JRE。
如果在 Android Studio 安装过程中它抱怨找不到 JDK，您可以通过转到开始菜单|计算机|系统属性|高级系统属性，打开高级|环境变量选项卡，并创建一个指向 JDK 文件的 JAVA_HOME 系统变量来解决此问题。
安装 Android Studio
一旦 JDK 安装完成，我们也将对 Android Studio 进行相同的操作，因为它是我们开发 AR 应用的主要平台：
-
从 Android 开发者页面下载 Android Studio：
developer.android.com/studio。 -
使用默认值安装工作室，完成后运行它：
安装完成后启动 Android Studio
- 安装后首次打开它时，Android Studio 设置向导将启动，以帮助您配置工作室的最后几步并下载 Android SDK 组件：
安装 Android Studio 首次运行时会出现设置向导
- 一旦完成，欢迎窗口将会启动：
Android Studio 欢迎窗口
现在我们已经准备好了软件，我们可以开始开发我们的应用程序。
创建应用程序
现在我们已经安装了软件，我们将开始创建我们的 AR 应用。我们首先要做的是启动一个新的 Android Studio 项目，并向其中添加所需的库。按照以下步骤操作：
-
点击“开始一个新的 Android Studio 项目”。
-
选择创建一个空活动：
选择活动类型
- 给项目命名、包名和位置。将最小 API 级别设置为至少 API 24：Android 7.0 (Nougat)，因为它是第一个支持 ARCore 的版本。点击完成按钮以启动项目：
新项目的配置参数
下一步我们需要做的是在我们的项目中启用 ARCore。
启用 ARCore
在 AR 项目中，ARCore 可以设置为可选或必需。前者可以在不支持 ARCore 的设备上作为普通应用运行，而后者将只出现在支持 ARCore 的设备的 Google Play 商店中。我们的应用是一个完整的 AR 应用，因此我们将选择第二个选项。为了实现这一点，我们需要修改一些项目文件。让我们开始吧：
- 在项目窗口中，展开
app，然后在manifests文件夹内部打开AndroidManifest.xml文件，如下面的截图所示。如果你想在外部打开清单文件，你可以在app/src/main文件夹中找到该文件：
项目中的 AndroidManifest.xml
- 在
<application>标签之前添加以下行：
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.ar" />
在这两种情况下（ARCore 可选和必需）第一行都是必要的，因为它提供了打开摄像头的权限。第二行指示了 ARCore 的使用，并确保只有支持 ARCore 的设备才能访问应用。
- 现在，在
<application>内部添加以下行：
<application
...
<meta-data android:name="com.google.ar.core" android:value="required" />
</application>
这行代码将 ARCore 设置为必需，并在应用安装时（如果尚未安装）从 Google Play 商店下载和安装 ARCore。
- 打开你的项目
build.gradle文件：
在项目窗口中，找到项目的 build.gradle 文件
- 确保它包括 Google 的 Maven 仓库（它应该在那里；如果不是，请添加它）：
allprojects {
repositories {
google()
- 打开你的应用
build.gradle文件：
在项目窗口中，找到应用的 build.gradle 文件
- 现在，将最新的 ARCore 库作为依赖项添加（本书中为 1.13.0）：
dependencies {
...
implementation 'com.google.ar:core:1.13.0'
...
}
- 通过点击屏幕右上角的“立即同步”来同步 Gradle，以便使这些更改生效：
同步项目选项以同步项目
如果你打算创建一个既支持又不需要 AR 的应用，启用 ARCore 的步骤将与这里展示的不同。请参阅 developers.google.com/ar/develop/java/enable-arcore 了解你需要做出哪些更改。此外，请注意，你将需要检查运行应用的移动设备是否支持 ARCore。你可以通过查看你的代码来完成这项工作。
现在我们已经启用了 ARCore，让我们介绍 Sceneform。
将 Sceneform 添加到项目
如本章开头所述，Sceneform 是一个 Android Studio 插件，它将帮助我们以比 OpenGL 更简单、更快捷的方式显示 3D 模型。
Sceneform 还提供了 ARFragment 和其他 UX 资源，这些资源在请求摄像头权限并检查 ARCore 是否已安装和更新后，将自动处理 AR 会话，而无需我们在代码中包含这些验证。
在撰写这本书的时候，Sceneform 工具仍然处于测试版阶段。如果您在按照这些步骤操作时遇到任何问题，请访问他们的 GitHub 页面（github.com/google-ar/sceneform-android-sdk）获取更多信息。
要将 Sceneform 导入到您的项目中，请按照以下步骤操作：
-
打开文件|设置。
-
在插件选项卡中，搜索
Google Sceneform Tools (Beta)。在撰写这本书的时候，当前版本是 v1.13.0：
Google Sceneform Tools 插件
- 安装它，然后点击右上角的“重启 IDE”以激活更改：
重启 IDE 按钮
- 安装完成后，打开您的应用程序的
build.gradle文件，并在android部分内添加以下编译选项。如果我们不这样做，当构建我们的ModelRenderable时，将出现错误。这仅在minSdkVersion < 26且我们在创建项目时将最小值设置为24（Android 7.0）时才是必要的：
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
- 在同一文件中，在
dependencies括号内，我们将添加以下implementation行以将 Sceneform 包含到我们的项目中：
dependencies {
...
implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.13.0'
...
}
- 您的应用程序的
build.gradle文件现在应该看起来像这样：
添加了新行的应用程序的 build.gradle 文件
- 现在，为了在您的应用程序中使用 ARFragment，请打开
res/layout文件夹中的activity_main.xml文件，并在视图底部的选项卡中选择文本模式。通过这样做，您可以修改文本中的元素：
activity_main.xml 文件中的文本视图和视觉预览
- 删除
TextView块并添加以下内容：
<fragment android:name="com.google.ar.sceneform.ux.ArFragment"
android:id="@+id/ux_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Sceneform 现在已准备好使用。让我们将我们的 3D 模型导入到项目中。
将 3D 模型添加到项目中
3D 模型，也称为可渲染对象，可以通过不同的方式添加：
-
通过基本形状（球体、立方体等）和材料创建，并通过编程组合以生成更复杂的对象。
-
通过标准 Android 小部件（ViewRenderable）创建。它们在场景中以交互式平面卡片的形式渲染。
-
从其他程序作为 3D 资产导入。支持的格式包括 OBJ、FBX 和 glTF（以及 glb）。动画仅在 FBX 中受支持。
我们将使用第一个选项，并使用 Sceneform 导入一个 .obj 文件。
要将模型导入到我们的项目中，我们必须创建一个外部文件夹来包含模型（这个文件夹不会被编译到最终应用程序中），然后使用 Sceneform 将模型导入到项目中。按照以下步骤操作：
- 通过在项目的
app文件夹上右键单击并选择 New|Sample Data Directory 创建一个sampledata文件夹。
将样本数据目录添加到项目中
如果sampledata文件夹没有自动出现在您的项目中，您也可以从文件资源管理器中手动创建它，在项目的app文件夹内。命名为sampledata，它将在 Android Studio 中显示。
- 从为该项目提供的资源包中，将
engine文件夹复制到sampledata文件夹中：
包含模型及其资源的新的引擎文件夹
现在，我们将通过 Sceneform 导入.obj 文件，将 3D 模型作为资产包含进来。
- 右键点击
engine.obj文件并选择导入 Sceneform 资产：
为我们的.obj 文件选择导入 Sceneform 资产
- 保持默认值不变。这将创建一个位于
sampledata中的 Sceneform 资产（.sfa）文件和一个位于assets文件夹中的 Sceneform 二进制资产（.sfb）：
模型的默认导入值
在导入过程中，以下行将自动添加到您的应用build.gradle文件的末尾，由 Sceneform 完成：
sceneform.asset('sampledata/engine/engine.obj',
'default',
'sampledata/engine/engine.sfa',
'src/main/assets/engine')
- 保持 Gradle 同步。当它完成后，将打开两个窗口：一个包含模型描述和 3D 预览的文本文件：
我们新导入的模型的文本视图和预览
最后一步是将所有元素合并到 AR 场景中。
构建 AR 场景
现在我们已经启用了 ARCore 和 Sceneform，并将 3D 模型包含在项目中，让我们添加代码，当检测到平面表面并且用户点击屏幕时，模型将出现在屏幕上。让我们开始吧：
- 从
app/java/com.banana.arprototype打开您的MainActivity.java文件并添加以下导入：
import android.net.Uri;
import android.view.Gravity;
import android.view.MotionEvent;
import android.widget.Toast;
import com.google.ar.core.Anchor;
import com.google.ar.core.HitResult;
import com.google.ar.core.Plane;
import com.google.ar.sceneform.AnchorNode;
import com.google.ar.sceneform.rendering.ModelRenderable;
import com.google.ar.sceneform.ux.ArFragment;
import com.google.ar.sceneform.ux.TransformableNode;
- 在我们的类中，创建以下变量以控制 AR 场景和 3D 模型：
private ArFragment arFragment;
private ModelRenderable modelRenderable;
- 现在，在
OnCreate()方法中，添加ARFragment的初始化：
protected void onCreate(Bundle savedInstanceState) {
...
arFragment = (ArFragment) getSupportFragmentManager().findFragmentById(R.id.ux_fragment);
- 仍然在
OnCreate()方法中，使用ModelRenderable在场景中构建模型，如下代码所示：
ModelRenderable.builder()
.setSource(this, Uri.parse("engine.sfb"))
.build()
.thenAccept(renderable -> modelRenderable = renderable)
.exceptionally(
throwable -> {
Toast toast = Toast.makeText(this, "Unable to
load the model", Toast.LENGTH_LONG);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.show();
return null;
});
在这里，我们使用Uri.parse从assets文件夹中调用模型。如果无法加载它，将会显示错误信息。
- 最后，仍然在
OnCreate()方法中，当检测到平面表面后用户点击屏幕时，我们将放置模型：
arFragment.setOnTapArPlaneListener(
(HitResult hitResult, Plane plane, MotionEvent motionEvent) -> {
if (modelRenderable == null)
return;
Anchor anchor = hitResult.createAnchor();
AnchorNode anchorNode = new AnchorNode(anchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
TransformableNode model = new TransformableNode(arFragment.getTransformationSystem());
model.setParent(anchorNode);
model.setRenderable(modelRenderable);
model.select();
});
在这里，当用户点击一个平面并且模型可渲染已成功加载时，将创建一个锚点以保持模型的位置。然后，创建一个新的模型节点并将其附加到它上。
- 现在，您可以在 Android 模拟器或实际设备上运行该应用。要在模拟器中运行它，设备必须满足一些要求，并且您必须手动从 Play Store 在该设备上下载 ARCore（请参阅
developers.google.com/ar/develop/java/quickstart中的“准备您的设备或模拟器”部分）。在这里，我们将通过点击播放图标并选择我们的连接设备来直接在我们的设备上运行该应用：
在物理设备上运行应用
- 这样，应用就会安装在移动设备上。正如我们之前提到的，第一次运行应用时，它会检查是否已安装最新的 ARCore 版本：
ARCore 正在检查 ARCore 的最新版本
- 您必须通过 Google Play 安装它：
安装 ARCore 应用
- 一旦完成这个初始步骤，您将能够完成应用的启动。移动手机/平板电脑，直到检测到平坦表面：
白色圆点形成我们可以放置 3D 对象的平面表面
- 在屏幕上轻触以锚定您的模型：
引擎将出现在相机前方
- 您还可以在移动模型的同时用手指调整模型的大小、旋转和移动，以便从不同的角度观察它。如果您再次点击，将出现一个新的引擎：
多次点击会导致多个实例
在应用中玩耍并熟悉使用它。您会看到，根据设备的容量，平面表面的识别速度会更快或更慢。您还会看到，如果您旋转设备（纵向/横向），模型将消失，因为锚点丢失。因此，现在我们已经有了基本设置，我们将对应用进行一些更改以改进整体性能，并给用户添加更多模型到当前场景的选项。
改进基本应用
一旦我们准备好了基本应用，我们可以做一些事情来改进应用的整体工作：
-
将屏幕方向设置为固定。如果我们将其留在自动旋转模式下，旋转屏幕将导致手机丢失锚点，模型将从屏幕上消失。
-
到目前为止，我们已经看到，对于每一次屏幕点击，都会出现一个新的模型。由于我们使用该应用进行原型设计，我们的想法是只显示一个模型。
-
我们还将更改模型的旋转和大小，以便它在场景中显示得更好。
让我们修改代码以添加这些功能。为此，请按照以下步骤操作：
- 通过在
AndroidManifest.xml中的<application>和<activity>内添加代码来强制屏幕方向为纵向模式：
<activity android:name=".MainActivity" android:screenOrientation="portrait">
这样，屏幕将始终保持在纵向模式，不会自动旋转并丢失锚点，即使用户不小心旋转了手机。
- 如果你使用平板电脑或更喜欢在横幅模式下查看场景，将其更改为以下内容：
<activity android:name=".MainActivity" android:screenOrientation="landscape">
- 为了在屏幕上每次点击只显示一个模型，打开
MainActivity.java并在ArFragment和ModelRenderable变量之后创建以下变量：
private Anchor anchor;
private AnchorNode anchorNode;
private TransformableNode model;
- 然后，在
setOnTapArPlaneListener()内部，在modelRenderable = null检查之后和创建新锚点之前添加以下行，以便释放上一个锚点：
protected void onCreate(Bundle savedInstanceState) {
...
arFragment.setOnTapArPlaneListener(
(HitResult hitResult, Plane plane, MotionEvent motionEvent) -> {
if (modelRenderable == null)
return;
//Remove previous anchor
if (anchor != null)
{
arFragment.getArSceneView().getScene().removeChild(anchorNode);
anchor.detach();
anchorNode.setParent(null);
anchorNode = null;
}
这样，当用户在屏幕的不同位置点击时，模型将 移动 到下一个位置，而不是在每个位置都重复出现。
- 现在，从下面的行中删除
Anchor、AnchorNode和TransformableNode的定义部分，以便它们引用全局变量：
anchor = hitResult.createAnchor();
anchorNode = new AnchorNode(anchor);
...
model = new TransformableNode(arFragment.getTransformationSystem());
- 最后，为了旋转和缩放模型，首先将以下导入添加到
MainActivity.java文件中：
import com.google.ar.sceneform.math.Quaternion;
import com.google.ar.sceneform.math.Vector3;
- 在
arFragment.setOnTapArPlaneListener()方法内部，在setParent()之前添加以下代码：
model.setLocalScale(new Vector3(0.55f, 0.55f, 0.55f));
model.setLocalRotation(Quaternion.eulerAngles(new Vector3(-90,45,0)));
这样，模型将出现在一侧，以便我们可以看到其内部。这可以在以下图片中看到：
旋转状态的引擎
现在我们已经改进了基础知识，让我们添加两个更多原型和一个简单的用户界面，这样我们就可以在它们之间切换。按照以下步骤操作：
-
从本项目的
resources文件夹中，将engine2和engine3文件夹复制到sampledata文件夹中。 -
右键单击每个
.obj文件，并选择导入 Sceneform 资产以创建.sfa和.sfb文件。现在，你的sampledata文件夹应该看起来像这样：
包含新模型的 sampledata 文件夹
你的 assets 文件夹应该包含模型的三个二进制文件：
包含三个二进制文件的资源文件夹
- 从本项目的
resources文件夹中，将每个引擎对应的三个图像复制到res|drawable文件夹中：
包含新图像的 res|drawable 文件夹
- 以文本模式打开位于 res|layout 的
activity_main.xml文件，并添加以下代码：
<LinearLayout
android:orientation="horizontal"
android:paddingLeft="4dp"
android:paddingTop="15dp"
android:paddingRight="4dp"
android:paddingBottom="1dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/ux_fragment">
在这里，我们使用 layout_constraintBottom_toBottomOf 将其锚定到屏幕底部。
- 如果你处于横幅模式，你可能希望将按钮定位在屏幕的右侧，以便有更多空间进行操作。对前面的代码进行以下更改：
<LinearLayout
android:orientation="vertical"
...
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintRight_toRightOf="@+id/ux_fragment">
- 现在，添加三个按钮：
<ImageButton
android:id="@+id/engine1_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="img/engine1"
android:background="#7cc53a"
android:layout_weight="1.0"/>
<ImageButton
android:id="@+id/engine2_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="img/engine2"
android:background="#40000000"
android:layout_weight="1.0" />
<ImageButton
android:id="@+id/engine3_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="img/engine3"
android:background="#40000000"
android:layout_weight="1.0" />
第一个按钮有绿色背景（选中），而其他两个有半透明背景。每个按钮都有其对应的 res|drawable 中的图片。
- 最后，添加
LinearLayout的关闭标签：
</LinearLayout>
- 预览应该看起来类似于以下：
竖屏模式下，左侧是 activity_main.xml 文件的代码，右侧是预览
- 默认情况下，预览处于竖屏模式。要将其更改为横屏，请点击旋转的手机图标并选择横屏：
竖屏模式下，左侧是 activity_main.xml 文件的代码，右侧是预览
- 再次打开
MainActivity.java文件并添加以下库：
import android.widget.ImageButton;
import android.view.View;
- 在前面的代码下方添加三个新的
modelRenderables：
private ModelRenderable modelRenderable2;
private ModelRenderable modelRenderable3;
private ModelRenderable currentRenderable;
我们将使用currentRenderable来找出每一刻哪个可渲染对象是活动的。
- 现在，在变量的末尾添加三个新的图像按钮：
private ImageButton button1;
private ImageButton button2;
private ImageButton button3;
-
将
ModelRenderable.builder()复制并粘贴两次以构建两个新的模型。 -
将它们的
Uri.parse调用分别更改为engine2.sfb和engine3.sfb。 -
在
.thenAccept调用中，将renderables的名称更改为相应的名称。生成的代码应如下所示：
ModelRenderable.builder()
.setSource(this, Uri.parse("engine2.sfb"))
.build()
.thenAccept(renderable -> modelRenderable2 = renderable)
.exceptionally(
throwable -> {
Toast toast = Toast.makeText(this, "Unable to load andy renderable", Toast.LENGTH_LONG);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.show();
return null;
});
ModelRenderable.builder()
.setSource(this, Uri.parse("engine3.sfb"))
.build()
.thenAccept(renderable -> modelRenderable3 = renderable)
.exceptionally(
throwable -> {
Toast toast = Toast.makeText(this, "Unable to load andy renderable", Toast.LENGTH_LONG);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.show();
return null;
});
- 在第一个
ModelRenderable.builder()中，修改.thenAccept调用：
.thenAccept(renderable -> currentRenderable = modelRenderable = renderable)
在这里，我们将currentRenderable赋值给第一个renderable。这样，屏幕上最初出现的模型将是第一个引擎（记住我们已将第一个按钮突出显示为选中的按钮）。
- 最后，在
setOnTapArListener()方法中，将modelRenderable更改为currentRenderable：
if (currentRenderable == null)
return;
...
model.setRenderable(currentRenderable);
- 要添加按钮的活动，我们将使我们的
MainActivity实现OnClickListener：
public class MainActivity extends AppCompatActivity implements View.OnClickListener
- 这样，我们可以在
onCreate()方法的底部简化按钮的初始化，如下所示：
button1 = findViewById(R.id.engine1_button);
button2 = findViewById(R.id.engine2_button);
button3 = findViewById(R.id.engine3_button);
button1.setOnClickListener(this);
button2.setOnClickListener(this);
button3.setOnClickListener(this);
前三条线初始化我们的按钮，接下来的三条线在用户点击时进行调用（所有三个情况下的调用相同）。
- 要接收这些点击，创建
onClick()方法：
@Override
public void onClick(View view)
{
switch (view.getId()) {
case R.id.engine1_button:
currentRenderable = modelRenderable;
button1.setBackgroundColor(0xFFA4FF50);
button2.setBackgroundColor(0x40000000);
button3.setBackgroundColor(0x40000000);
break;
case R.id.engine2_button:
currentRenderable = modelRenderable2;
button1.setBackgroundColor(0x40000000);
button2.setBackgroundColor(0xFFA4FF50);
button3.setBackgroundColor(0x40000000);
break;
case R.id.engine3_button:
currentRenderable = modelRenderable3;
button1.setBackgroundColor(0x40000000);
button2.setBackgroundColor(0x40000000);
button3.setBackgroundColor(0xFFA4FF50);
break;
}
model.setRenderable(currentRenderable);
}
此方法将在onCreate()之后根据哪个按钮被按下，将不同的modelRenderable分配给currentRenderable并突出显示其对应的按钮。最后一行将当前可见的模型切换到新选中的模型。
- 运行应用并尝试三个不同的引擎。只需选择一个引擎并将其放置在地板或桌子上。以下图片显示了地板上的黄色引擎：
场景中显示引擎 2
- 要更改引擎，只需按下另一个按钮，当前模型将更改。您还可以找到另一个位置并点击它以使其出现：
引擎 3 出现在表面
在本节中，您已经学习了如何创建一个简单的界面来更改 AR 中出现的模型。有了这个，您现在有了进一步发展并构建更复杂应用的基本技能，以便您可以展示和操作自己的原型。
摘要
在本章中，我们介绍了如何使用 Google 的 ARCore 创建原型查看器应用程序来使用 AR。我们学习了如何集成 ARCore 和 Sceneform 库的功能，使生成 AR 场景的任务变得更容易，并且我们包含了我们自己的外部 3D 模型。我们还创建了一个基本的用户界面，使我们能够在不同模型之间切换。
现在，您已经拥有了使用 ARCore 创建自己应用程序的技能。您可以通过添加自己的原型或原型部件来改进当前项目，例如，当用户按下按钮时使模型分解成更小的部件，或者通过另一个按钮改变模型的颜色。这一章节为您探索在平坦表面上显示的 AR 可能性奠定了基础。
您还更了解 AR 在制造领域的应用，并且可以探索它提供的进一步可能性，而不仅仅是这里提供的示例。
在接下来的章节中，我们将探索其他 AR 工具和技术。其中一些将与 ARCore 相关，如 WebAR，而其他则完全不同，如 Augmented Class!、EasyAR 和 Vuforia。
进一步阅读
如果您想进一步探索本章中完成的项目，我们建议您探索以下选项：
-
AR 图像：您不必将物体放置在表面上，而是可以将它们附加到物理图像（图片、平面等）上。您可以在
developers.google.com/ar/develop/java/augmented-images/找到有关如何实现这一功能的起点。 -
使用 Sceneform 探索可用的示例，您只需下载并使用 Android Studio 打开它们：
developers.google.com/ar/develop/java/sceneform/samples。 -
在第二章，Unity AR 开发入门中，我们介绍了 Unity 3D。ARCore 可以在 Unity 平台内部使用，这也使得添加 3D 模型的过程变得更简单。它还接受更多的扩展。您可以在
developers.google.com/ar/develop/unity/quickstart-android找到有关如何开始的更多信息。
第四章：使用 WebAR 和增强类！进行 AR 培训
在本章中，我们将探讨两种适用于 Android 设备的工具，这些工具可以应用于培训领域。第一个工具将基于 WebAR，具体来说，是 Google Web 组件<model-viewer>，它将允许我们通过网页使用 ARCore 在真实环境中可视化 3D 模型。我们将能够在网页上从一系列模型中选择一个，将其放置在现实世界中，并对其进行操作（移动、旋转和缩放）。
第二个工具将是增强类！，这是一个以教育为导向的创建工具，它将允许我们创建 AR 培训项目，在图像或真实生活中的图片上展示不同的元素（图像、音频文件、视频和 3D 模型等），为我们的项目添加交互性，并在用户之间交换它们。
本章的主要目标是介绍两种 AR 工具，其应用场景与本书其他章节略有不同。本章的主要思想是让你发现与我们已覆盖或将要覆盖的其他 SDK 不同的 AR 形式，以及它们在如此跨领域的培训领域中的价值。到本章结束时，你将能够通过 Web 使用 ARCore 创建自己的 AR 查看器，但你也将发现使用增强类！工具丰富 AR 应用程序用户体验的交互性可能性。
在撰写本书时，这两个工具都在持续开发和改进中，不断添加新的功能和集成。目前，它们仅适用于 Android 设备，但预计它们很快也将支持 iOS。
在本章中，我们将涵盖以下主题：
-
使用 AR 进行培训
-
探索使用 Google 组件
<model-viewer>的 WebAR -
探索增强类！
技术要求
本章的技术要求如下。
对于<model-viewer>项目，你需要以下内容：
- 支持 ARCore 的 Android 设备（请参阅以下列表：
developers.google.com/ar/discover/supported-devices）。该项目已在 Pocophone F1 上进行了测试。
对于增强类！项目，你需要以下内容：
- 安装有 Android 5.0 或更高版本的 Android 设备
本章的资源和相关代码文件可以在这里找到：github.com/PacktPublishing/Enterprise-Augmented-Reality-Projects/tree/master/Chapter04。
使用 AR 进行培训
增强现实在教育领域已经存在了 20 多年，尤其是在大学范围内，尽管其增长速度比在更商业化的领域如市场营销或旅游要慢得多，也较少受到关注。
随着支持硬件（如手机、平板电脑和数字白板）的演变，AR 已经成为教育和培训中的一个宝贵资产。它允许学生通过图像或直接在房间内以三维形式可视化概念，以便他们能够更快、更动态地获取信息（只需用摄像头指向而不是在书本或互联网上搜索信息），或者创建更深入的个人项目（使一幅画栩栩如生，在手工项目上添加说明或额外信息，创建动画演示等）。
一个重要的考虑因素是，在教育/培训中，AR 技术适用于所有年龄段和学科：一个孩子可以在课堂上用它来学习形状和颜色，而一家公司可以用它来培训员工关于其职业风险预防计划——这完全取决于工具和 AR 内容的目标。
在本章中，我们将学习如何使用两种不同且易于使用的工具，这些工具将帮助我们快速创建两个不同的教育项目。为此，我们将使用以下 3D 模型：
-
sketchfab.com/3d-models/gearbox-planetary-2bee7992d266456aaef1f1394b0ebb98 -
sketchfab.com/3d-models/warm-gearbox-e7fedd86a90b4c46a53fe88882e66aa3 -
sketchfab.com/3d-models/gearbox-conical-60f023924ee0456daa758eb590b6064b
让我们从学习 Google Web Component <model-viewer>是什么以及它是如何工作的开始，来了解 WebAR。
使用 Google Web Component <model-viewer> 探索 WebAR
在智能手机进入市场之前，增强现实（AR）技术仅在计算机上开发。后来，出现了网络应用程序，最初是用 Flash 编写的，然后是 HTML5，但始终需要计算机的摄像头。自从 ARCore（谷歌）和 ARKit（苹果）工具包出现以来，AR 技术也通过网络进入了智能手机。
WebXR 设备 API 是当前正在努力提供从网络访问 VR 和 AR 的规范之一，包括使用设备的传感器或头戴式显示器（HMDs）。这个标准规范是由万维网联盟（W3C）编写的，目前正处于开发中。在撰写本文时，AR 在 WebXR 规范中的集成仍然不稳定，因此没有在本章中介绍。预计在接下来的几个月里，这一功能将得到进一步开发。有关标准和其进展的更多信息，您可以查看他们的网站（www.w3.org/TR/webxr）和 GitHub（github.com/immersive-web/webxr/）。
在本节中，为了开发 WebAR 应用程序，我们将使用 Google 的<model-viewer>网络组件，它允许我们轻松地将 3D 模型嵌入到网页中，并使用智能手机或平板电脑在 AR 中可视化它们。
Web 组件是一个基于现有网络标准的自定义 HTML 元素，它可以在现代浏览器中工作。
Google 的<model-viewer>组件首次于 2019 年 2 月推出，允许用户在网页中显示 3D 模型。2019 年 5 月，他们宣布通过ar属性实现 AR 兼容性。它基于 ARCore 功能场景查看器，目前仅适用于支持此技术的 Android 设备。我们将看到它的使用非常简单，并且可以在任何浏览器上工作。在第三章，“使用 ARCore 的 AR 制造”，我们学习了如何实现一个完整的 AR 移动项目。在这种情况下，我们只需使用提到的<model-viewer>组件来使用其网络功能。我们将看到我们可以使用哪种类型的模型，如何创建一个包含组件的网页，以及如何实际上添加组件并在移动设备上使其工作。
现在我们已经了解了我们将要使用的工具，在下一节中，我们将介绍此组件接受的 3D 模型（截至编写时）。
与 3D 模型一起工作
由于我们在浏览器中显示模型，支持的格式是GL 传输格式（glTF）2.0/glb，这是一种旨在最小化大小和运行时处理的格式，使其成为网络传输的最佳选择。如今，许多 3D 设计程序，如 Blender、3ds Max 和 Maya，以及一些 3D 模型平台，如 Sketchfab，都提供了导出此格式的工具。
你可以在www.khronos.org/gltf/和github.com/KhronosGroup/glTF/blob/master/README.md上找到有关 glTF 功能及其可能性的更多信息。
3D 模型的纹理可以是.jpg或.png格式，该工具支持动画，并且由于模型将通过网络浏览器显示，它们不应太重，以保持 AR 体验流畅。
更多关于这些要求的信息可以在developers.google.com/ar/develop/java/scene-viewer找到。
对于这个项目，我们将使用三个静态模型，分别是gearbox_conical.glb、gearbox_planetary.glb和gearbox_worm.glb。这些模型提供了良好的细节，以实现更真实的 AR 体验，我们将在下一节中使用增强类来使用它们！
现在我们已经了解了<model-viewer>组件的基本工作原理，让我们开始创建一个网页。
创建简单的网页
我们将要做的第一件事是创建一个网页，其中将显示 3D 模型，并准备好在 AR 中启动。为此，我们也将使用 Glitch，这是一个在线工具，将帮助我们创建此项目。
首先，我们将学习如何在编写样式表和 HTML 页面之前如何准备 Glitch 项目。
使用 Glitch 进行编码
Glitch 是一个用于创建具有强大协作组件的 Web 应用的简单工具。它允许我们混搭现有应用或从 GitHub 或 GitLab 等服务克隆项目。在我们的情况下，因为我们只想创建一个简单的演示网页，我们将使用 Glitch 来存储 HTML 页面和 3D 模型。要创建一个新的 Glitch 项目，请按照以下步骤操作：
-
首先，前往
glitch.com并点击登录按钮。它将自动创建一个账户。 -
在页面右上角，点击新建项目以开始新项目。然后，点击第一个选项，
hello-webpage：
选择我们的项目模板
- 你将被导向一个看起来类似的板：
Gitch 板
查看 README 文件，因为它解释了页面的主要功能。
- 下一步将是更改 Glitch 为我们提供的项目名称。点击页面左上角的名称并提供名称和描述：
修改项目的默认名称
- 现在，从下拉按钮“显示”中选择“紧邻代码”：
选择如何查看最终网页
- 这将把我们的窗口分割，以显示我们正在编写的代码的结果：
窗口显示左侧的代码和右侧的结果
- 让我们上传我们的模型。点击左侧栏上的资产，并将此项目的三个模型（即
gearbox_planetary.glb、gearbox_worm.glb和gearbox_conical.glb）拖放到方块上：
资产窗口
- 一旦模型已上传，它们将出现在仪表板上：
资产窗口中列出的资产
- 选择每个模型将允许你复制资产的链接或
删除它：
链接到资产和删除按钮
Glitch 保存我们按下的每个键，因此我们不需要手动保存代码。
在准备好基本元素后，让我们编写网页代码，从样式表开始，然后是 HTML 页面。
编写样式表
在样式表中，我们将决定我们网页的外观。由于我们的主要目标是展示 AR，所以我们现在会保持简单。Glitch 的style.css文件中已经有一些代码。让我们修改这个文件并适应我们的需求。按照以下步骤进行操作：
- 我们将保持
body括号不变：
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
}
在这里，我们指定了网页将使用的字体和body元素的边距。
- 接下来，我们将修改
h1标题元素：
h1 {
text-align: center;
color: #000000;
font-style: bold;
}
现在，标题将居中、黑色和粗体。
- 让我们添加一些类元素：
.box{
max-width: 600px;
margin: 4em auto;
border-radius: 8px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
text-align: center;
overflow: hidden;
}
这个类将封装在网页上显示的 3D 模型（不在 AR 中）。它们将出现在一个盒子里，带有圆角边框和柔和的阴影。我们将添加的文本将居中在盒子内，并且overflow: hidden参数将防止内容从盒子溢出。
- 现在，我们将为模型的 CC BY 信息添加另一个类，这对于这些类型的模型是必需的：
.cc{
display: flex;
justify-content: flex-start;
margin: 0.5em;
font-style: italic;
}
在这里，我们将内容定位在左侧，并使用斜体文本。
- 我们还将更改
cc类图像的外观：
.cc img{
height: 1em;
opacity: 0.6;
}
这两条线将选择这个类中图像的height并使它们略微透明。
- 最后，我们将修改
<model-viewer>组件的样式：
model-viewer {
width: 100%;
height: 580px;
}
通过这种方式，我们将使模型查看器占据容器盒子的width并设置其height。
现在样式表已经准备好了，我们可以创建我们的页面。
编码 index.html 页面
现在，打开index.html文件，在文档的开头将网页标题从Hello!改为AR Training Web App。你可以保留<head> <head>标签之间的其余代码不变。现在，删除<body> <body>标签之间的所有内容（如果你愿意，可以保留带有 Glitch 按钮的最后两行）。
现在，让我们在<body>标签内添加标题和三个模型盒子：
- 在
<h1>标签之间添加标题，使其使用我们的.css文件中的样式：
<h1>Select a gearbox to display in AR</h1>
- 现在，在标题之后，添加第一个带有顶部标题和底部 CC BY 信息的盒子：
<div class="box">
<h2>Planetary Gearbox</h2>
<div class="cc">
<a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
<img src="img/cc.svg">
<img src="img/by.svg">
</a>
<a href="https://sketchfab.com/3d-models/gearbox-planetary-2bee7992d266456aaef1f1394b0ebb98" target="_blank">T-FLEX CAD ST (Free)</a>
</div>
</div>
主要组件是box类。在里面，我们有<h2>格式的标题和带有指向许可证的cc类，以及两个来自creativecommons的图像来标识 CC BY 许可证类型，还有指向模型来源的 Sketchfab 页面的作者链接。
- 对其他两个模型也做同样的处理：
<div class="box">
<h2>Worm Gearbox</h2>
<div class="cc">
<a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
<img src="img/cc.svg">
<img src="img/by.svg">
</a>
<a href="https://sketchfab.com/3d-models/warm-gearbox-e7fedd86a90b4c46a53fe88882e66aa3" target="_blank">T-FLEX CAD ST (Free)</a>
</div>
</div>
<div class="box">
<h2>Conical Gearbox</h2>
<div class="cc">
<a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
<img src="img/cc.svg">
<img src="img/by.svg">
</a>
<a href="https://sketchfab.com/3d-models/gearbox-conical-60f023924ee0456daa758eb590b6064b" target="_blank">T-FLEX CAD ST (Free)</a>
</div>
</div>
目前，你的项目应该看起来像这样：
带有三个盒子的网页
现在，我们必须包含<model-viewer>组件的 3D 模型。
将组件添加到我们的页面
添加<model-viewer>组件相当简单。按照以下步骤进行操作：
- 首先，我们不得不在
<body>元素末尾添加以下两行：
<script type="module" src="img/model-viewer.js"></script>
<script nomodule src="img/model-viewer-legacy.js"></script>
通过这些行，我们将模块添加到我们的页面，并使其在新旧浏览器中工作。
如果您想使用模块的特定版本，请在 model-viewer 后的 URL 中添加版本号，例如：/model-viewer@0.3.1/.
- 然后，我们可以在
box类内部调用它，在h2标题之后和cc类之前，引用模型的 URL（在src属性中放入您自己的模型 URL）：
<model-viewer src="img/6f8eb042-0e74-4182-9d39-4f877746edb1%2Fgerabox_planetary.glb?v=1566506940560" alt="Planetary Gearbox" background-color="#42697b" auto-rotate camera-controls ar></model-viewer>
以下截图显示了代码界面：
<model-viewer> 的最终代码
如您所见，<model-viewer> 标签支持多个属性：
-
src、background-color和alt属性分别定义了源 URL、背景颜色和描述。 -
auto-rotate属性将使模型在网页上默认旋转（平面视图，不是 AR 视图）。 -
使用
camera-controls，我们可以在模型处于平面视图时旋转/缩放模型。 -
对于我们来说，这里最重要的属性是
ar；没有它，查看模型在 AR 中的选项将不可用。
- 对其他两个模型做同样的操作：
...
<model-viewer src="img/6f8eb042-0e74-4182-9d39-4f877746edb1%2Fgearbox_worm.glb?v=1566506941410" alt="Worm Gearbox" background-color="#42697b" auto-rotate camera-controls ar></model-viewer>
...
<model-viewer src="img/6f8eb042-0e74-4182-9d39-4f877746edb1%2Fgearbox_conical.glb?v=1566506963689" alt="Conical Gearbox" background-color="#42697b" auto-rotate camera-controls ar></model-viewer>
- 这样，您应该会看到网页上加载并旋转的三个模型：
显示 3D 模型的网页
我们已经完成了编码。现在，让我们拿出我们的手机或平板电脑，查看 AR 中的模型。
在 AR 中可视化 3D 模型
要在 AR 中查看模型，您需要使用支持 ARCore 的设备打开网页。一旦您有了这样的设备，可视化模型的步骤如下：
-
通过点击 Glitch 网页左上角的分享按钮并选择 Live App 来获取您最终页面的 URL。
-
现在，复制 URL 并将其粘贴到您的移动设备上。您应该看到 3D 模型正在加载（由于它们是详细的模型，可能需要比在电脑上更多的时间）：
显示在手机上的网页
-
在每个模型的右下角，您会看到一个在电脑浏览器中不会出现的方块。点击它。
-
第一次这样做时，会出现一条消息，询问页面是否可以打开 Google Play 服务 AR，如果您还没有安装，它会要求您安装它：
Google Play 商店中的 AR Google Play 服务
- 现在，您将看到全屏的 3D 模型，底部有一个按钮可以查看您的空间中的 AR 版本。点击它以启动相机并将其指向一个平坦的表面：
全屏显示的模型，下面有按钮可以查看 AR 版本
- 一旦模型被固定到表面上，我们就可以在它周围移动。通过触摸屏幕，您可以移动、旋转和缩放它：
在真实地板上方的 AR 模型
- 现在，您可以调整模型的大小和位置，从不同的角度查看它，并在其中移动。
重要！3D 模型必须通过 HTTPS 连接访问。否则，当点击右下角的小方块时，模型中的“在您的空间中查看”按钮将不会出现。如果您在未来应用程序中使用自己的服务器而不是 Glitch，请记住这一点。
就这样。现在，您知道了如何使用 Web 组件<model-viewer>和 ARCore 在 AR 中显示模型。
如我们之前提到的，组件相当新，并且一直在不断变化。要查看最新功能和接受属性，您可以查看googlewebcomponents.github.io/model-viewer/和github.com/GoogleWebComponents/model-viewer。
在下一节中，我们将使用相同的 3D 模型创建另一个培训项目，但使用 Augmented Class!工具。我们将使用图像标记并向我们的最终项目添加交互。
探索 Augmented Class!
Augmented Class!是一个由一群开发者和教师/教授的动机产生的教育内容创作工具，它提供了一个完整的解决方案，允许教育社区的全体成员（教师、学生和家长）无需技术知识，无需这些工具通常的约束（如内容有限和功能有限），创建和共享交互式 AR 项目。
目前，在 3.0.30 版本中，它可以在 Google Play Store 中免费获取，并且为 PC 提供私人测试版。该应用程序使用图像标记，在其他工具中称为目标。这意味着它会在真实图像上显示虚拟内容，例如图片、书封面等，而不是像 ARCore 那样在平坦表面上显示。Augmented Class!允许广泛的内容（图像、音频文件、视频、3D 模型和文本），我们还可以添加交互（触摸屏幕、与相机和标记之间的距离互动，以及两个标记之间的距离互动），并在用户之间共享我们的项目。在这个版本中它是免费的，预计他们将在接下来的几个月内推出更多免费和专业的功能。更多信息，请访问www.augmentedclass.com。
在这一章中，我们将使用 Android 应用程序创建一个简单的项目来显示变速箱的 3D 模型。然后，我们将添加用户交互以显示更多信息。最后，我们将创建另一个标记并在它们之间创建交互。为此，我们将在移动设备上准备我们的材料（图像和 3D 模型），创建一个简单的项目，向其中添加一些用户交互，并创建两个不同标记之间的交互。
要做到这一点，我们需要为我们的移动设备准备所有材料。
准备材料
在开始项目之前，我们必须在我们的移动设备上准备材料，以便我们可以快速访问它：
-
我们首先需要做的是在他们网页上注册（[
creativitic.es/augmentedclass/beta/](http://creativitic.es/augmentedclass/beta/））并下载 Android 应用（https://play.google.com/store/apps/details?id=com.AugmentedClass.AClass&hl=es_419）。该应用允许我们进行演示访问，而无需登录，但对于项目来说，它比注册访问有更多的限制。 -
现在，在您的手机或平板电脑上，在
root文件夹中创建一个名为AClass的文件夹，并将模型文件gearbox_worm.glb以及标记gearbox_worm.jpg和component_desc.jpg复制到其中。创建文件夹不是必需的，但它会使使用和搜索应用中的内容更容易。
现在，我们已经准备好开始使用应用了。
创建一个简单项目
我们将首先创建一个简单项目，看看如何使用基于图像的标记在培训项目中使用 AR。让我们开始吧：
- 打开应用，授予所需的权限，并在登录页面输入您之前提供的电子邮件地址收到的用户名和密码：
Augmented Class! 应用登录窗口
- 第一次打开应用时，您将需要完成一个简单的教程，其中您需要遵循一些基本步骤来使用一些给定资源创建一个非常简单的项目：
初始教程
-
完成教程后，从主菜单中，按“进入发明者”。
-
在发明者窗口中，点击创建的新项目以选择它，然后通过按删除图标来删除它：
创建了项目并删除了教程的发明者窗口
-
现在，点击创建新项目以进入黑板窗口。
-
在做任何事情之前，给项目命名，这样您以后就可以识别它了。
-
在这里，我们可以选择我们的标记类型。它们如下所示：
-
简单标记：在所选图像上显示 AR 内容
-
摄像头交互：当摄像头远离标记时显示一些 AR 内容，当摄像头靠近标记时显示另一种不同的 AR 内容
-
标记交互：当标记分离时在每个标记上显示 AR 内容，当它们靠近时在每个标记上显示其他内容
选择 简单标记：
从顶部栏给项目命名
- 我们首先需要做的是选择一个标记。我们可以选择一个之前的标记，用我们的相机拍摄一个图像，或者上传一个标记。将“加载标记”的方形拖动到中间的白色方形上，并从您的移动设备中选择
gearbox_worm.jpg图像：
将“加载标记”方形从左侧滚动视图拖动到中间
- 现在，我们可以将我们的 3D 模型添加到标记中。点击左侧的 3D 按钮，并将“加载模型”拖到屏幕中间的标记上：
将“加载模型”方块拖到中间的标记上
- 导航到我们之前创建的
AClass文件夹并选择gearbox_worm.glb。如你所见，接受许多文件类型：
选择我们的 3D 模型
- 等待模型加载完毕。你会看到模型默认被选中，并且顶部栏上显示着新的按钮。选择手形图标来操纵模型。使用移动/旋转/缩放按钮，操纵齿轮箱，直到它看起来如下：
3D 模型旋转并缩小
多手势选项允许你用更少的按钮来操纵模型。
- 现在，在层次结构面板下按场景保存图标。我们的当前标记将被保存，并在底部栏上出现缩略图：
当前标记作为缩略图出现在底部栏
- 在左上角点击“项目”按钮退出黑板。然后，从左上角点击“主页”按钮进入主菜单。在那里，按“转到查看器”。在这里，我们可以看到我们的项目在网格上：
带有我们项目的查看者窗口
- 由于我们只有一个项目并且它已经被选中，请按眼睛图标来加载 AR。然后，用摄像头指向标记，以在图像上看到 3D 模型出现。移动和旋转图像，靠近或远离它，从所有角度查看模型：
齿轮箱出现在图像标记上
发明者和查看者窗口都有一个打印按钮，这样你就可以在没有它们的情况下打印带有标记的 PDF。
就这样。我们已经准备好了基本项目。现在，让我们给它添加一些交互功能。
添加用户交互
让我们通过让用户触摸屏幕来添加一些交互性，这样他们就可以在悬停在标记上时查看更多的 AR 信息。按照以下步骤操作：
- 返回到发明者窗口并选择我们的项目。按铅笔图标来编辑它：
编辑一个项目
- 按下缩略图然后按铅笔图标来编辑标记的场景：
选择和编辑场景
- 让我们添加一些信息。在左侧栏中，按文本按钮并将其中一个字体拖到标记上：
将文本元素拖到标记上
- 输入文本
Worm gear，并使用操作按钮将其移动到金色齿轮（蜗轮齿轮）旁边我们的 3D 模型：
将文本定位在它所引用的对象旁边
- 为了更容易放置，你可以通过按相机图标然后按带有眼睛的相机来更改相机视角：
将相机视图切换到俯视图
- 现在，选择文本后，按时钟图标以添加交互并选择手形图标。这样，当模型可见时，用户触摸屏幕，文本将出现：
选择文本的交互
你可以通过按它们或在层次结构面板中按它们的名称来选择场景中的不同元素。
- 保存场景并返回到观众窗口以启动 AR。现在，当模型出现在图像上时，按它。文本将出现：
当触摸屏幕上的元素时出现的文本
在本节中，我们学习了如何为我们的标记添加基本交互。在下一节中，我们将创建一个标记交互。
在标记之间创建交互
现在，我们将创建一个标记交互。我们将有两个标记：模型，如前几节所述，以及一些简单的文本，“组件描述”。
在本例中，我们将保持简单，当我们用相机聚焦于模型的标记时，它将显示 3D 模型。然而，当我们把两个标记放在一起时，描述文本将出现。
因为我们将重用我们的 3D 模型的标记，我们将创建另一个项目。在一个项目中，单个标记不能重复，因为观众不知道它应该在标记上显示哪个内容。因此，我们将启动一个新的项目并创建必要的交互。让我们开始吧：
- 在项目窗口中创建一个新的项目，在黑板窗口中将其命名为
交互式变速箱。对于此项目，选择两个标记交互：
带有两个标记的新项目
如你所见，右上角将出现一个新的按钮：分离/一起。此按钮将在两种模式之间切换（当标记分离和在一起时），允许我们在每种情况下在标记上放置不同的内容。
- 现在，从标记列表中，将
gearbox_worm作为第一个标记：
将之前上传的 gearbox_womr1 图像拖动到第一个标记上
- 现在，将加载标记方框拖动到第二个标记上以加载
component_desc.png图片：
拖动负载标记方框从移动设备加载图像
- 按下 3D 按钮，并将
gearbox_worm模型从滚动视图的末端拖动并放到第一个标记上。这将是我们标记分离时的内容：
拖动之前上传的模型
- 现在，点击“一起”按钮，切换到我们将它们放在一起时将出现的内容。你会看到之前的内容将从场景中消失：
场景变为“一起”模式
-
重复步骤 4，将模型放置在第一个标记上方。
-
选择文本按钮，并将其中一个字体拖放到第一个标记的两个单独实例中，以创建两组不同的文本。选择并放置如下：
包含模型和信息文本的场景
- 你可以利用相机的按钮来缩小场景，从顶部查看，以便正确放置文本：
改变相机视图后的相同场景
- 就这样。现在，按保存按钮并返回到查看器窗口以启动 AR。在网格中选择当前项目并按眼睛图标：
选择在 AR 中显示的当前项目
- 现在，你会看到，当它们分离时，变速箱显示 3D 模型：
当标记分离时，只显示模型
- 现在，当它们放在一起时，我们展示了之前添加的 3D 模型和文本：
当标记与模型结合并显示信息时
除此之外，这种交互对于复杂的解释非常有用，例如化学反应（当它们分离时，不同的成分以某种方式表现，当它们在一起时以另一种方式表现），对于构词，对于指令（我们可以有如组件描述、组装或基本维护等标记，并且根据我们将哪个标记靠近模型，将显示不同的信息），等等。
分享项目
在设备上创建的所有项目都存储在本地。然而，你可能希望与你的学生或同事分享其中之一或多个。为此，请按照以下步骤操作：
-
前往项目窗口。
-
选择项目并按分享图标：
分享所选项目
- 对于多选，长按项目直到出现复选框，然后选择你想要的任意多个：
分享多个项目
- 将打开一个窗口，你可以通过电子邮件、社交媒体等方式分享你的项目文件：
选择如何分享项目（们）
要导入另一个人的项目（或你在另一台设备上创建的项目），请按照以下步骤操作：
-
从你的电子邮件或驱动器下载项目文件，或你分享它的地方（记住你下载它的文件夹）：
-
前往项目窗口。
-
点击下载图标（当未选择项目时唯一的激活图标）：
-
选择导入项目文件
- 浏览到下载文件的文件夹并选择它：
选择项目文件
项目（s）将自动导入。
一旦新的项目被导入到你的项目窗口中，你可以像编辑和删除其他任何你创建的项目一样编辑和删除它们。
接下来是什么？
到目前为止，你已经学会了如何创建一个简单的标记和两个标记交互，并为触摸屏添加了交互功能。为此，我们使用了 3D 模型和一些文本，但你也可以尝试用视频文件或音频解释来丰富当前的项目。
另一方面，增强类！提供了更多选项，包括与摄像头的交互（当摄像头远离标记时内容改变，当摄像头靠近标记时内容改变），延迟显示内容（元素在一段时间后出现，它们可以再次消失或不消失），以及内容编辑（视频和音频循环，文本颜色和样式等）。一旦你尝试了所有这些选项并且熟悉了它们，就可以设计并创建一个使用所有可能交互的完全交互式项目。
摘要
在本章中，你学习了两种不同的训练项目工具。第一个是基于 ARCore 的 Web 功能，它允许我们无需编写太多代码，就可以将 AR 可视化添加到任何在网页上显示的 3D 模型。第二个工具增强类！使我们能够轻松创建可以服务于不同目的的交互式教育项目，例如学习某个作品的基础知识，培训维护工程师等。
现在，你对 AR 的通用性有了更好的理解，它可以在移动设备和 Web 应用程序上使用，以及交互如何帮助创建更深入和更有价值的体验。凭借你在本章中获得的技术，你可以尝试将你的项目迁移到其他领域和需求，以及进一步探索这两个工具，以便你可以改进当前的项目。
在下一章中，我们将开始使用 Unity 3D 环境和一些可以集成到其中的其他 AR 工具。在这里，你将学习如何使用 EasyAR 工具的图像识别过程来创建一个 AR 目录。
797
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
