A-Frame实战AR开发
本教程将帮助你使用A-Frame开发一个简单的增强现实集成到你的移动或网络应用程序。
你可以在 A-Frame 官方文档中找到使用 A-Frame 的综合指南，但我想分享我的经验和一些技巧，我遵循这些技巧以最少的步骤完成此操作。 那么，让我逐步介绍一下完成上述预期输出的过程。
1、查找 glTF 模型
你需要做的第一件事是找到适合你要求的 glTF 模型。 有几个网站可以免费下载 glTF 模型，但具有挑战性的部分是找到一个更好的、有效的模型。 因为就我而言，我必须付出很多努力才能找到这样一个扩展名为 .gltf的可用 3D 模型。
以下是我可以推荐你寻找 3D 模型的一些网站：
可以单击其中一个可以免费下载的 3D 模型，并且必须下载扩展名为 .gltf 的文件，如下所示。
如果你手头的3D模型格式不是 .gltf ，那么可以使用NSDT 3DConvert这个强大的3D文件在线转换工具，支持将FBX、OBJ、DAE等数十种3D文件格式转换成GLTF模型，无需本地下载任何软件：
2、将 3D 模型应用到你的项目中
在这里，我试图解释我们需要使用 a-frame 来完成此操作的代码。 作为基本步骤，首先你需要包含相关库并定义页面主体。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- this line calls aframe -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- this line calls the AR.js component to be used for aframe and finds the source of different assets like the description of 3D objects, the camera calibration-->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<!-- include the body content here -->
</body>
</html>如果你对以上内容不熟悉，可以参考我之前写的文章（教程：使用 AR.js 开发简单 AR 功能的示例代码）来了解一下基本概念。
现在，你需要包含页面的正文内容才能应用此 3D 模型。 这可以分为两种不同的方式。
3.1 将模型添加到本地的项目路径中
第一个是你可以简单地将模型添加到项目路径中，并将模型的路径设置为代码，如下所示：
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker-camera preset='hiro'>
<a-entity gltf-model="assets/images/Mosque.gltf" scale="0.2 0.2 0.2"></a-entity>
</a-marker-camera>
</a-scene>
</body>但这有时会因为一些局部变化而导致加载模型的一些问题。
就我而言，我尝试过这个，但它对我不起作用。 所以，我选择了第二种选择。
3.2 将模型上传到Glitch
根据我的理解，将 gltf 模型应用到应用程序的最佳和最简单的方法就是这样。
在这里你需要执行一些步骤。 我将一一介绍它们。
- 创建Glitch 帐户并创建一个新项目。
访问 glitch.com 官方网站并在那里创建一个帐户。 然后创建一个新的 Glitch 项目：
- 将 glTF 模型上传到你的 Glitch 项目
创建新项目后，你将看到项目结构下包含一个名为“assets”的文件夹， 选择它并上传你的 glTF 模型。 然后它看起来像这样：
- 获取模型的cdn url
单击你上传的 gltf 模型，然后可以看到以下弹出窗口。现在可以复制 glTF 模型的 cdn url。
4、将 URL 添加到你的代码中
现在，你可以简单地包含 glTF 模型的 cdn url，而不是将其添加到本地项目路径中。 这将向你显示快速加载的 glTF 模型。
所以，最终的代码将如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- this line calls aframe -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- this line calls the AR.js component to be used for aframe and finds the source of different assets like the description of 3D objects, the camera calibration-->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker-camera preset='hiro'>
<a-entity position="0 0 0" scale="0.2 0.2 0.2" gltf-model="https://cdn.glitch.com/0f662680-b46a-4a86-bc3e-660c29752c5a%2FMosque.gltf?v=1611234341037"></a-entity>
</a-marker-camera>
</a-scene>
</body>
</html>现在已经完成了封面图片中的预期输出......😉！干杯，伙计们……！
原文链接：Simple Augmented Reality(AR) Integration with A-FRAME
BimAnt翻译整理，转载请标明出处