HarmonyOS鸿蒙Next多服务场景化解决方案：AR虚拟技术助力智能家装

HarmonyOS鸿蒙Next多服务场景化解决方案：AR虚拟技术助力智能家装 1、介绍

总览
本应用采用了华为图形引擎服务的AR虚拟技术，您可以在手机相机里摆放想要购置的家具家电，交互式体验让您可以轻松操控它们的3D图例，以此来确定这些家具家电是否适合摆放在您的家里。

您将建立什么
在本次codelab中，您将建立一个集成华为帐号服务以及图形引擎服务的装修应用程序。您的应用将包含：

• 华为帐号登录功能。
• 物品种类选择功能。
• 在AR相机中放置和移动选择的3D物品、放大、缩小等操作。

您将会学到什么
在本次codelab中，您将学习到：

• 如何在AppGallery Connect中配置项目信息。
• 如果集成华为帐号服务以及图形引擎服务。
• 如何使用华为帐号服务进行登录。
• 如何使用图形引擎服务在虚拟房屋中展示3D物品。

2、您需要什么
已通过验证的华为帐号。

硬件需求
提前准备如下硬件：

• 一台Windows 10台式或笔记本电脑。
• 一部集成HMS Core (APK) 5.0.0.300或以上版本及EMUI 9.1或以上版本的华为手机。

软件需求
提前准备如下软件：

• Android Studio 3.6.X
• JDK 1.8或以上版本
• 安卓SDK平台（API 23或以上版本）
• Gradle 5.4.1或以上版本

3、能力接入准备
参考如下：

• 准备工作
• 集成帐户服务
• 集成图形引擎服务

4、开通服务
点击“项目设置”中“API管理”页签，开通如下服务的API：

• 帐号服务
• 认证服务

5、设计界面
登录界面支持华为帐号登录，获取用户名和头像图片地址，并展示在头像区域中。

主页按类别展示物品。您可以按需选择物品装扮房屋。

Product Details页面展示产品详情。您可以添加物品到购物车或者获取该物品的3D视图。

3D视图打开支持ARView的相机。相机检测平面，以点状图片显示该平面，您可以点击平面摆放物品。此外，还可以在3D视图中放大、缩小、移动、旋转物品。

6、集成帐号服务
华为账号服务登录后，应用可以访问帐号信息，例如邮箱地址、用户名、头像等。一旦使用可信赖的华为帐号服务登录，无需再验证用户邮箱或电话号码。

应用集成帐号服务验证用户的华为帐号并登录用户。

Java
使用认证服务登录。

AccountAuthParams authParams =
    new AccountAuthParamsHelper(AccountAuthParams.DEFAULT_AUTH_REQUEST_PARAM)
        .setAccessToken()
        .createParams();
AccountAuthService accountAuthService = AccountAuthManager.getService(this, authParams);
startActivityForResult(accountAuthService.getSignInIntent(), 1111);

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == 1111) {
        Task<AuthAccount> authAccountTask = AccountAuthManager.parseAuthResultFromIntent(data);
        if (authAccountTask.isSuccessful()) {
            AuthAccount authAccount = authAccountTask.getResult();
            sharedPreferenceUtilClass = SharedPreferenceUtilClass.getInstance(LoginAuthenticationActivity.this);
            sharedPreferenceUtilClass.saveData(Constants.USER_EMAIL, authAccount.getEmail());
            sharedPreferenceUtilClass.saveData(Constants.USER_NAME, authAccount.getDisplayName());
            sharedPreferenceUtilClass.saveData(Constants.USER_PROFILE_IMAGE, authAccount.getAvatarUri().toString());
            Log.i("TAG", "accessToken:" + authAccount.getAccessToken());
            useTokenToAuthorize(authAccount.getAccessToken());
        }
    }
}

结果

7、集成图形引擎服务
华为图形引擎服务是一个高性能、低功耗、轻量级渲染引擎，提供高级描述性API，便于编辑、操作和渲染3D资源。

应用集成图形引擎服务，使用ARView渲染普通AR场景。

Xml
在布局中添加图形引擎服务的ARView。

<com.huawei.hms.scene.sdk.ARView
    android:id="@+id/ar_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.huawei.hms.scene.sdk.ARView>

Java
检查ARPermission，按需请求权限。并初始化图形引擎服务。

if (!PermissionUtil.checkARPermissions(ViewProduct.this)) {
    PermissionUtil.requestARPermissions(ViewProduct.this);
}

if (!InitializeHelper.getInstance().isInitialized()) {
    Toast.makeText(ViewProduct.this, "SceneKit initializing", Toast.LENGTH_SHORT).show();
    InitializeHelper.getInstance().initialize(ViewProduct.this);
    return;
}

开通ARView平面展示。

arView.enablePlaneDisplay(true);

加载素材。

if (testModel != null) {
    return;
}
Model.builder()
    .setUri(Uri.parse("Furniture/" + threeDFileName))
    .load(getApplicationContext(), new Resource.OnLoadEventListener<Model>() {
        @Override
        public void onLoaded(Model model) {
            Toast.makeText(TryProduct.this, "load success.", Toast.LENGTH_SHORT).show();
            testModel = model;
        }

        @Override
        public void onException(Exception exception) {
            Toast.makeText(TryProduct.this, exception.getMessage(), Toast.LENGTH_SHORT).show();
        }
    });

添加相机和灯光组件。

Node lightNode = arView.getScene().createNode();
lightNode.addComponent(Light.descriptor())
    .setType(Light.Type.DIRECTIONAL)
    .setIntensity(30.f);

依次在ARView调用onResume()、onPause()、onDestroy()方法。

@Override
protected void onResume() {
    super.onResume();
    arView.resume();
}

@Override
protected void onPause() {
    super.onPause();
    arView.pause();
}

@Override
protected void onDestroy() {
    super.onDestroy();
    arView.destroy();
}

结果

华为图形引擎服务的ARView检测到点状平面后，您可以在该平面摆放、放大、缩小、移动、或旋转3D物品来确认效果。下图展示空调和长凳添加到视图上的效果。

您可以使用本codelab和图形引擎服务的ARView来装扮您家。

8、恭喜您
祝贺您，您已经成功构建了一个HMSHomeDecor安卓应用并学到了：

• 如何调用帐号服务、认证服务以及图形引擎服务的接口。
• 如何实现图形引擎服务的ARView服务。
• 如何在ARView中加载素材（3D文件或者纹路）。

9、参考文件
参考如下文件获取更多信息：

• 帐号服务开发指导
• 图形引擎服务开发指导

点击如下链接下载源码：

• 源码下载

声明：本codelab实现多个HMS Core服务在单个项目中的集成，供您参考。您需要验证确保相关开源代码的安全合法合规。