1 、介紹

總覽

本應用採用了華為圖形引擎服務的AR虛擬技術，您可以在手機相機裡擺放想要購置的傢俱家電，互動式體驗讓您可以輕鬆操控它們的3D圖例，以此來確定這些傢俱家電是否適合擺放在您的家裡。

特性	HMS Core Kits
統一登入帳號：華為帳號	帳號服務
擺放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：

帳號服務
認證服務

說明：以上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.addOnTapPlaneEventListener(tapPlaneResult -> {
            node = arView.getScene().createNodeFromModel(testModel);
            node.getComponent(Transform.descriptor())
                    .scale(new Vector3(0.01f, 0.01f, 0.01f));
            node.traverseDescendants(des -> {
                Renderable renderableComponent = des.getComponent(Renderable.descriptor());
                if (renderableComponent != null) {
                    renderableComponent.setCastShadow(true).setReceiveShadow(true);
                }
            });
            Animator animator = node.getComponent(Animator.descriptor());
            if (animator != null) {
                animator.play(animator.getAnimations().get(0));
            }
            ARNode arNode = tapPlaneResult.createARNode(node);
            arView.recordARNode(arNode);
        });

依次在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();
    }

結果