使用 React 原生 ViroReact 像面部过滤器一样进行 Snap Chat

Question

我想制作理发应用，用户可以在其中使用增强现实技术尝试发型。我想使用 react native 构建应用程序，我发现在 react native 中只有 ViroReact 提供了 AR 功能。那么我们可以使用 ViroReact 来实现这个东西吗？如果不是那我应该用什么？？

Answer 1

您可以利用 AR 平台提供的人脸追踪功能，协助应用实现用户与虚拟物体之间的自然交互。

这里是 ViroReact 的documentation。

华为提供React Native插件，让您集成AR Engine，通过人脸识别、图形渲染、AR显示等能力接入产品（发型）AR试衣。

主要程序如下：

1. 创建一个继承自Activity的FaceViewActivity，并创建对应的layout文件。
2. 重写FaceViewActivity中的onCreate方法获取FaceView。
3. 为 Switch 创建一个监听器。当Switch开启时，调用loadAsset方法加载产品的3D模型。在LandmarkType中设置人脸识别的位置。

mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        mFaceView.clearResource();
        if (isChecked) {
            // Load materials.
         int index = mFaceView.loadAsset("FaceView/sunglasses.glb", LandmarkType.TIP_OF_NOSE);
        }
    }
});

4. 在 MainActivity 中创建一个 onBtnTryProductOn。当用户点击onBtnTryProductOn按钮时，会调用FaceViewActivity，让用户可以查看AR试衣效果。

您可以在Github下载插件。

更多详情请见docs。