Spark AR —— Visual Studio 代码的 Spark AR 扩展（二）【脚本】

本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

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

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

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

添加监视器

用下面的代码片段替换前面脚本中的代码:

const FaceTracking = require('FaceTracking');
const Diagnostics = require('Diagnostics');

Diagnostics.watch("Mouth openness value: ", FaceTracking.face(0).mouth.openness);
         

如果你使用的是 TypeScript，将前两行替换为:

import FaceTracking from 'FaceTracking';
import Diagnostics from 'Diagnostics'; 

激活了扩展的前提下，你会在 Visual Studio Code 的观察者面板看到映射的观察者:

响应图可视化

响应式图形可视化器显示脚本中的对象和属性及其依赖关系。该图是动态更新的，允许您查看脚本执行如何实时影响对象之间的连接。

这有助于验证关系是否已正确设置，并在与调试器配对时，识别可能导致对象依赖关系问题的代码行。

向项目中添加一个新的 JavaScript 文件，复制并粘贴下面的代码:

// Load in the required modules
const Scene = require('Scene');
const FaceTracking = require('FaceTracking');

(async function() { // Enable async/await in JS [part 1]
    
    // Locate the plane in the scene
    const plane = await Scene.root.findFirst('plane0');
    
    // Create a reference to a detected face
    const face = FaceTracking.face(0);
    
    // Bind the plane's position to the detected face's position
    plane.transform.position = face.cameraTransform.position;

})(); // Enable async/await in JS [part 2]

如果你使用的是 TypeScript ，将前两行替换为:

import Scene from 'Scene';
import FaceTracking from 'FaceTracking';

通过上面的代码，响应式图将显示以下节点和依赖关系:

SparkSL 支持

在 Visual Studio Code 中用激活的扩展打开 SparkSL 脚本文件将启用语法高亮显示。

还支持代码自动完成。例如，输入 std:: 将显示 SparkSL API 提供的函数列表。