[Cordova/Phonegap] 利用 MagicaVoxel 、Wikitude 和 PhoneGap 在手机上实现AR增强现实

PhoneGap 加速器模型！

让我提出一个想法：在手机上实现一个增强的现实应用程序，展示酷炫的3D像素模型。“什么，怎么做到的！”你 你问？那么让我来做给你看。但首先，也许你应该看看这个视频：

视频地址(mp4)

我们先安装一些软件！

首先，您将需要一些软件。哦，别担心，这里列出的所有内容都可以免费使用（直到你真的需要发布一个应用程序，稍后我会解释一下）。但是您应该首先下载的是 MagicaVoxel 。

MagicaVoxel 是一款精彩的程序，让您可以快速创建真正有趣的3D像素模型，无需担心3D编辑器的复杂性。它由@ephtracy开发，许可证免费，可用于个人和商业用途。谢谢@ephtracy！

你需要的第二个程序是 Blender。如果你真的想要的话，你可以把你所有的资源都放在 Blender 里，但是我发现我的 Blender 的3D技术是相当无聊平庸。你其实只需要用 Blender 它来执行一些中间步骤，即将 MagicaVoxel 制作的模型导出为 Wikitude 格式。

然后，您将需要安装 PhoneGap 开发者应用程序，版本至少为1.7.9，Android 和 iOS。下载它！在 PhoneGap 开发者应用程序中，有一个插件，由 Wikitude 提供的专为AR体验的。这样，您可以在移动设备上预览您在开发机器上创建的 PhoneGap 项目。

最后， Wikitude 编码器 需要将最终版本的像素模型转换成 Wikitude.wt3 文件格式。您可以在这里下载编码器。

好的，万事俱备，现在是把它们整理在一起的时候了。大致步骤是：

1. 在 MagicaVoxel 中做一些很酷的模型
2. 将其导出到 Blender，设置模型的照明和比例
3. 然后将其导出到 Wikitude 编码器中，最终在您的 PhoneGap 项目中使用。

总结一下，所需的软件是这些：
- MagicaVoxel
- Blender
- PhoneGap 开发者应用程序 1.7.9或更高版本（iOS 或 Android）
- Wikitude 编码器

在 MagicaVoxel 中制作并导出模型

用不同的颜色堆叠这些立方体是像素模型艺术的精髓。想像，利用8位像素艺术，但却是制作3D模型！来看看我在 MagicaVoxel 做的一些事情：

我在 MagicaVoxel 做的一些很酷的东西。欲了解更多信息，请参阅https://www.instagram.com/timkimtimkim/

如果您不熟悉 MagicaVoxel，您可能需要在 YouTube 上查看一些关于制作模型的教程。

为了本文的目的，让我们假设你的模型已经准备好了。以下是导出模型的步骤：
1. 切换到 Render(渲染) 模式
2. 在 Export(导出) 选项卡下，点击 bake(烘焙)，并将该模型导出为一个 ply 文件。烘焙一个模型基本上是在渲染模型时保存模型的照明和阴影。因此，请确保调整模型的照明和阴影，直到您对结果满意为止。
3. 现在，您已经拥有了烘焙模型，现在该在 Blender 中打开它了。
4.

绿色矩形表示在哪里点击渲染和烘烤。

在 Blender 中导入并调整模型

是时候在 Blender 中调整模型了。这是一个烦人但必要的步骤，因为 MagicaVoxel 并没有干净地导出为 Wikitude 支持的格式。所以要导入 MagicaVoxel 模型:
1. 在 Blender 中新建一个文件，删除初始的方块和照明。这样我们就有了一个干净的项目。
2. 文件 > 导入 > Stanform(.ply)，导入我们从上一步所做的烘焙过的模型。
3. 我倾向于认为模型太大，所以使用比例工具将模型缩小。另外，您可能希望将几何图形设置为原点，因此模型是3D视图的中心。
4. 切换到Material mode(材质模式)并选择您的模型。然后在对象的“Materials tab”选项卡下，创建一个新的“材质”。确认 Shadeless 和 Vertex Color Paint 已勾选。这样，您的模型应该看起来就像已渲染那样。
5. 现在我们将其导出为 Wikitude 编码器可以读取的格式。转到文件 > 导出 > FBX（.fbx）。如果您需要，您可以选择将其导出为obj文件，用在其他3D环境（例如WebGL）中。

下面是第1-4步的视频教程：
视频地址(mp4)

将模型编码为 Wikitude 的格式

如果一切顺利，这一步应该很简单。启动 Wikitude 3d Encoder 并执行以下操作：
1. 文件 > 打开该FBX我们从 Blender 中导出的文件。
2. 在查看器中检查您的模型，以确保它看起来一切ok。您可以在编码器程序中执行许多操作，例如设置和查看动画。要了解更多信息，请访问 Wikitude 的开发者文档。
3. 然后，File > Export to wt3 应该会生成你的 .wt3 文件，用于你的 PhoneGap 项目。

将模型导入到您的 PhoneGap 项目中

如果您没有现成的可以用于 Wikitude 的 PhoneGap 项目，您可以使用我创建的模板项目来入门。模板项目就是在本文开头的视频中演示的那个加速模型。你可以用你自己的模型来代替加速模型。

要使用 Wikitude 模板创建 PhoneGap 项目:

$ PhoneGap create myApp --template  PhoneGap - Wikitude -speeder-template

一旦这些都已经下载并准备好了，我们来添加您创建的模型。浏览新创建的项目，然后访问 www > pgday > assets > models。在该目录中，您可以看到已有的 landspeeder.wt3 文件。这里放你自己的新模型文件。

项目结构和 landspeeder.wt3 模型所在的地方

然后在 www > pgday > js > 3dmodelsinstanttracking.js中，我们将添加对新模型的引用。

项目中的 3dmodelsinstanttracking.js

如果您在 3dmodelsinstanttracking.js 中搜索assets/models/landspeeder.wt3，那么您应该可以看到使用 Wikitude 的 api 添加模型引用的地方。只需将 landspeeder.wt3 替换为您的模型文件的名字即可。接下来看看你的模型是否正常工作。

addModel：function（xpos，ypos）{ 
        if（World.isTracking（））{ 
            //将landspeeder.wt3替换为模型的文件路径
            var model = new AR.Model（“assets / models / landspeeder.wt3”，{ 
                onLoaded：this.loadSpeeder，
                scale：{ 
                    x：0.005，
                    y：0.005，
                    z：0.005 
                }，
                translate：{ 
                    x：xpos，
                    y： ypos，
                    z：4 
                }，
                旋转：{ 
                    z：Math.random（）* 360 
                }，
            }）

现在可以在 PhoneGap 开发者应用程序中预览您的更改。在手机上打开应用程序，然后在您的终端上运行 PhoneGap 服务命令：

$ phonegap serve
[phonegap] executing 'cordova prepare' ...
[phonegap] completed 'cordova prepare'
[phonegap] starting app server...
[phonegap] listening on 10.58.133.107:3000
[phonegap] listening on 169.254.253.181:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]

在手机上输入上面显示的IP地址，然后应该会启动演示了。如果一切顺利，演示中的加速模型应该变成了您自己的模型！

结论

我希望通过这篇文章，你会学到一些很酷的3D相关的东西，并能够导入模型资源到你的手机应用中。即使你不做 Wikitude 或者 PhoneGap 的东西，我认为能够将资源从 MagicaVoxel 导出到 Blender, 也是一个很好的基础。

展望未来，应该有更多关于使用 3D 和 PhoneGap 的文章。现在有很多很酷的事情发生，我认为这个大坝已经准备好让人大开眼界了！

如果您决定继续 Wikitude 路线， Wikitude 的 API 提供各种方法来添加不同的动画，模型和效果。我建议您转到Wikitude SDK API 参考文档。另外，如果您终于确定了要使用 Wikitude 技术制作需要购买和下载的商业应用程序，您应该注册许可证。