Spark AR ——动态实例化（三）【脚本】

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

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

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

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

克隆材质

材质可以被克隆，从而更容易创建它们，并提供跨多个实例重用模板材质（template material）的能力。

正如你可以通过 MaterialModule.create() 创建一个给定的材质一样，MaterialModule API也公开了一个 clone() 方法，该方法接受一个现有材质的实例，以及一个可选的初始状态。

在克隆材质时，有几个重要的考虑因素:

• 新材质被分配一个全局唯一的名称，除非在初始状态中另有规定。

• clone() 方法的第二个参数 initialState 完全是可选的，但是强烈建议使用它来设置材质的初始状态。

• 所有 Signal 类型属性都被赋给一个 ConstSignal ，其中包含先前绑定的信号的最后一个值。要重新绑定任何属性，可以在initialState 参数中提供一个信号。

下面的例子查询一个现有的材质，克隆它，然后将它设置为场景中一个现有物体的材质。

// Load in the required modules
const Scene = require('Scene');
const Materials = require('Materials');
const Textures = require('Textures');
const Reactive = require('Reactive');
              
// Enable the Touch Gestures > Tap Gesture capability 
// in the project's properties
const TouchGestures = require('TouchGestures');

// Enables async/await in JS [part 1]
(async function() {

    // Locate our objects in the Scene and Assets panels
    // This includes the texture which we will apply to our cloned material
    const [focalDistance, existingMaterial, newTexture] = await Promise.all([
        Scene.root.findFirst('Focal Distance'),
        Materials.findFirst('material0'),
        Textures.findFirst('texture0'),
    ]);

    // Dynamically create a plane and clone a material
    const [dynamicPlane, clonedMaterial] = await Promise.all([

        Scene.create("Plane", {
            "name": "Plane",
            "width": 0.1,
            "height": 0.1,
            "y": -0.2,
            "hidden": false,
        }),

        // Clone the existing material from the Assets panel and alter its initiation state, including specifying a new diffuse texture.
        Materials.clone(existingMaterial, {
            "name": "Cloned Material",
            "blendMode": "ALPHA",
            "opacity": 0.8,
            "diffuse": newTexture,
            "diffuseColorFactor": Reactive.RGBA(255,0,0,1),
        }),
    ]);

    // Assign the existing material to the dynamic plane
    dynamicPlane.material = existingMaterial;

    // Add the Dynamic Plane as a child object of the Focal Distance object in the Scene panel so that it is rendered in the effect
    focalDistance.addChild(dynamicPlane);

    // Switch the plane's material between the existing material and the cloned material when the plane is tapped
    let isUsingExistingMaterial = true;

    TouchGestures.onTap(dynamicPlane).subscribe(() => {
        if(isUsingExistingMaterial){
            dynamicPlane.material = clonedMaterial;
            isUsingExistingMaterial = false;
        } else {
            dynamicPlane.material = existingMaterial;
            isUsingExistingMaterial = true;
        }
    });
              
// Enables async/await in JS [part 2]
})();