Spark AR —— 使用脚本创建效果(一)【脚本】

504 阅读5分钟

Spark AR 是 Facebook 免费创作 AR 作品的平台,使用户能够为 Facebook 和 Instagram 创建交互式增强现实体验,超过 40 万名创作者,190个国家/地区,使用 Spark AR 来创作自己的AR作品

由于该软件无需任何编码知识即可使用,因此任何人现在都可以在 AR 世界中几乎没有经验地制作下一个疯狂式传播的 Instagram AR 特效,引领世界潮流。

专门的 AR 滤镜设计师单价甚至可达到 1000 美元到 3 万美元不等。

image.png

在本教程中,将学习如何在 Spark AR Studio 中使用脚本创建交互式世界效果。

我们将映射带有音频示例效果的 Boombox,使用脚本添加交互性而不是使用贴片编辑器。

这个效果展示了如何在现实世界中动画并放置 3D 模型,而且可以通过触摸手势进行操作。同时它还包括了循环播放音频。

69528694_1079588018903892_8484091505311481856_n.gif

如果这是你第一次在 Spark AR Studio 中使用脚本,请参阅脚本基础响应式编程指南

下载实例项目

要遵循本教程:

  1. 下载示例内容

链接:pan.baidu.com/s/19Ha0Dz6z… 提取码:fouc

  1. 在 Spark AR Studio v67 及以上版本中打开未完成的效果

我们已经导入了帮助您入门所需的资源文件。

设置场景

在我们专注于脚本之前,我们需要设置场景。对象不能在脚本中创建,所以我们需要在访问它们之前将它们添加到场景中。

一、理解资源文件

在资产面板中,你会发现两个文件夹:

  • boombox_animated —— 这个文件夹包含 boombox 的 3D 模型 (boombox_animated),以及一个动画 (Beats),一些材质(dropShadow_matboombox_mat) 和纹理 (Texture 0Texture 1) 应用到模型。

  • Audio —— 此文件夹包含 boombox_loop.m4a 格式音频文件。

image.png

二、添加平面跟踪器

我们将通过添加一个平面跟踪器(Plane Tracker)来开始构建这个效果。

当摄像机检测到一个平面时,像桌子或地板这样的平面跟踪器的子对象就会出现。我们会用平面跟踪器来定位 boombox 的位置。

添加一个平面跟踪器到你的场景:

  1. 点击场景面板(Scene Panel)底部的添加对象(Add Object)。
  2. 在菜单中选择平面跟踪器(Plane Tracker)。
  3. 单击插入(Insert)。

image.png

在添加了平面跟踪器后,一个 planeTracker0 对象将出现在场景面板(Scene Panel)中,模拟器将提示你查看(替换了面部视频的)新网格视图。

image.png

三、添加一个空对象

空对象(Null Object)充当空组,是将对象分组在一起的一种很好的方式,我们将在下面的步骤中进行这些操作。

添加一个空对象作为平面跟踪器的子对象:

  1. 右键单击 planeTracker0 对象。
  2. 选择Add > Null Object

添加空对象后,Scene Panel 中会出现一个 nullObject0 对象。

我们将把空对象重命名为更具描述性的对象,因为我们稍后将在脚本中引用它。我们称它为 placer,因为我们要用它来把 boombox 放在世界中。

重命名对象:

  1. 右键单击 nullObject0 对象。
  2. 点击 Rename

image.png

  1. 将名称更改为 placer

你的 Scene Panel 将看起来是如下的样子

image.png

四、添加录音机

点击并拖动 boombox_animated 文件夹到 placer 中,将其添加为子文件夹。

69528694_1079588018903892_8484091505311481856_n.gif

它将出现在视口和模拟器,虽然它还不是动画,但我们将在脚本稍后对其进行修改。

我们还将更新录音机的位置,使它以平面跟踪器为中心。 要这么做:

  1. 在场景面板中选择 boombox_animated 对象。
  2. 在检查面板中将 z 轴位置更改为 0.3 。

image.png

五、添加音频文件

在 Spark AR Studio 中添加音频效果有几个步骤。为了控制音频的播放方式,我们需要创建音频回放控制器,并且需要在场景中添加扬声器来发射音频。

1) 创建一个音频回放控制器:

  • 单击资产面板底部的 Add Assets
  • 选择音频回放控制器(Audio Playback Controller)。

image.png

2) 将音频文件添加到回放控制器:

  • 在资产面板中选择 audioPlaybackController0
  • 从音频下拉框中选择 boombox_loop.m4a ,并勾选检查器中的 Loop 框。

image.png

3) 创建和配置扬声器:

  • 右键单击场景面板中的 placer 对象,选择Add > Speaker
  • 在场景面板中选择speaker0对象。
  • 从检查器的音频下拉菜单中选择audioPlaybackController0

image.png

至此,你的场景面板和资源面板现在分别看起来如下所示:

image.png

image.png

六、添加脚本

为了创建脚本

  1. 单击资产面板底部的Add Asset
  2. 选择Script

image.png

script0 对象将出现在资产面板中。

七、打开脚本

要打开脚本,双击资产面板中的 script0 文件。

脚本文件将在与计算机上的 JavaScript 文件相关联的默认编辑器中打开。

八、删除已经存在的脚本代码

新的脚本预先填充了代码,以帮助您理解脚本的一些基础知识。 因为本教程将涵盖我们需要了解的关于这个项目的脚本编写的所有方面:

  1. 删除所有现有代码,使脚本为空。
  2. 保存您的空脚本。

现在场景已经设置好了,我们已经创建了脚本,我们可以开始编写脚本了。