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模型,无需本地下载任何软件:

https://3dconvert.nsdt.cloud

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翻译整理,转载请标明出处