HMS Core電商解決方案之商品3D商品展示

傳統電商商品展示採用圖文結合的形式，文案介紹產品的相關參數，搭配精美圖片去吸引客戶眼球。但圖文商品展示由於色差、尺寸不符等原因，會讓消費者產生圖片和實物不一致的疑慮，且消費者需要消耗大量精力閱讀和比較後才能做出購買決定。隨著互聯網電商平臺的不斷完善，短視頻逐漸成為商品展示的主流形式。通過拍短視頻的 ...

傳統電商商品展示採用圖文結合的形式，文案介紹產品的相關參數，搭配精美圖片去吸引客戶眼球。但圖文商品展示由於色差、尺寸不符等原因，會讓消費者產生圖片和實物不一致的疑慮，且消費者需要消耗大量精力閱讀和比較後才能做出購買決定。

隨著互聯網電商平臺的不斷完善，短視頻逐漸成為商品展示的主流形式。通過拍短視頻的形式可以多方位展示產品，讓消費者在短時間內可以瞭解產品的參數和優勢，極大提高了消費者的購物速度。但短視頻展示的劣勢在於，展示時間短且很難和消費者進行互動。

3D技術的發展賦予了電商行業最新的商品展示方式，3D模型可以360°全方位細節展示商品，讓消費者更直觀瞭解商品，增強他們對產品的信心。消費者還能隔著屏幕與商品產生互動，通過單指拖動來實現360度查看商品、自由放大查看高清細節，從而提高下單機率。

然而，目前效果佳的3D建模技術因其較高的成本而使得讓廣大開發者望而卻步。

1.技術門檻高：專業人員加上深度相機等專業設備。

2.時間成本高：專業人員手動完成模型的製作渲染和調整。完成一個簡單物體的低精度模型，工作量以小時起步，而高精度模型耗時更長。

3.耗費高：單個商品的專業建模成本高，平均價格達到上千元，複雜模型則更貴。

HMS Core的3D建模服務，助力輕鬆建模。用戶只需使用普通的RGB相機，通過拍攝物體的不同角度圖像，便可實現物體的3D幾何模型和紋理的自動化生成，如在電商實物展示的場景，您可以通過此能力自動生成想展示商品模型，用於3D展示，用戶可360°隨心放大或縮小商品，查看商品細節，為用戶提供差異化的購買體驗。

3D物體建模能力由端雲協同完成，端側負責採集RGB圖像，通過環繞物體拍攝多張圖像，從而獲取物體的不同角度圖像，拍攝完畢後上傳至雲端實現3D物體建模。雲端建模的流程及關鍵技術包括目標檢測分割、特征檢測與匹配、稀疏點雲計算、稠密點雲計算以及紋理重建等模塊。

效果展示

以麵包為例，只需環繞麵包拍攝多張圖像，即可得到一個逼真的麵包3D模型。那這個功能是如何實現的呢？以下是詳細的開發步驟。

開發前準備

配置集成的SDK包

在應用的build.gradle文件中，dependencies內添加3D建模服務的SDK依賴

// 3D Modeling Kit SDK
implementation 'com.huawei.hms:modeling3d-object-reconstruct:1.0.0.300'

配置AndroidManifest.xml

打開main文件夾中的AndroidManifest.xml文件，可以根據場景和使用需要，配置讀取和寫入手機存儲以及相機許可權，在前添加

<!-- 往sdcard中寫入數據的許可權 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 使用相機的許可權 -->
<uses-permission android:name="android.permission.CAMERA" />

開發步驟

使用雲側服務的能力，需要使用“agconnect-services.json”里的api_key值，在應用初始化時通過api_key或者AccessToken來設置應用鑒權信息，AccessToken的優先順序較高。兩種方式均在應用啟動時初始化設置一次即可，無需多次設置。

（1）通過setAccessToken方法設置AccessToken。

ReconstructApplication.getInstance().setAccessToken("your AccessToken");

（2）通過setApiKey方法設置api_key。當您在AppGallery Connect上註冊應用時，會給您的應用分配api_key。


ReconstructApplication.getInstance().setApiKey("your api_key");

新建3D物體建模引擎並初始化，新建3D物體建模配置器。

// 新建3D物體建模引擎。
Modeling3dReconstructEngine modeling3dReconstructEngine = Modeling3dReconstructEngine.getInstance(context);
// 新建3D物體建模配置器。
Modeling3dReconstructSetting setting = new Modeling3dReconstructSetting.Factory()
    // 設置工作模式為圖片模式。
    .setReconstructMode(Modeling3dReconstructConstants.ReconstructMode.PICTURE)
    // 設置貼圖模式為普通模式或PBR模式。
    .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)
    .create();

新建上傳監聽器回調，用於處理拍攝的物體圖片上傳結果。

private Modeling3dReconstructUploadListener uploadListener = new Modeling3dReconstructUploadListener() {
    @Override
    public void onUploadProgress(String taskId, double progress, Object ext) {
         // 上傳進度。
    }
    @Override
    public void onResult(String taskId, Modeling3dReconstructUploadResult result, Object ext) {
         // 上傳成功處理。
    }
    @Override
    public void onError(String taskId, int errorCode, String message) {
        // 上傳失敗處理。
    }
};

使用3D物體建模配置器初始化任務，並且給新建的3D物體建模引擎設置上傳監聽器，上傳採集的圖片數據。

// 使用3D物體建模配置器初始化任務（該介面需要在子線程中調用）。
Modeling3dReconstructInitResult modeling3dReconstructInitResult = modeling3dReconstructEngine.initTask(setting);
String taskId = modeling3dReconstructInitResult.getTaskId();
// 設置上傳監聽器。
modeling3dReconstructEngine.setReconstructUploadListener(uploadListener);
// 調用3D建模引擎的上傳介面，上傳採集的圖片數據。
modeling3dReconstructEngine.uploadFile(taskId, filePath);

查詢3D物體建模任務狀態。

// 查詢3D物體建模任務狀態需要初始化任務處理類。
Modeling3dReconstructTaskUtils modeling3dReconstructTaskUtils = Modeling3dReconstructTaskUtils.getInstance(context);
// 調用查詢介面獲取3D物體建模任務狀態（該介面需要在子線程中調用）。
Modeling3dReconstructQueryResult queryResult = modeling3dReconstructTaskUtils.queryTask(taskId);
// 獲取建模任務狀態。
int status = queryResult.getStatus();

新建偵聽器回調，調用預覽函數，預覽3D模型

Modeling3dReconstructPreviewListener previewListener = new Modeling3dReconstructPreviewListener() {
    @Override
    public void onResult(String taskId, Object ext) {
        // 3D物體建模預覽結果。
    }
    @Override
    public void onError(String taskId, int errorCode, String message) {
        // 預覽錯誤回調函數。
    }
};
// 預覽模型配置。
Modeling3dReconstructPreviewConfig config = new Modeling3dReconstructPreviewConfig.Factory().setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR).create();
// 預覽模型。
modeling3dReconstructEngine.previewModelWithConfig(taskId, context,config, previewListener);

新建下載監聽器回調，用於處理3D物體建模模型文件的下載結果。

private Modeling3dReconstructDownloadListener modeling3dReconstructDownloadListener = new Modeling3dReconstructDownloadListener() {
    @Override
    public void onDownloadProgress(String taskId, double progress, Object ext) {
        // 下載進度。
    }    
    @Override
    public void onResult(String taskId, Modeling3dReconstructDownloadResult result, Object ext) {
        // 下載成功處理。
    }
    @Override
    public void onError(String taskId, int errorCode, String message) {
        // 下載失敗處理。
    }
};

新建的下載配置項並將新建的下載監聽器傳入新建的3D物體建模引擎，下載重建成功的模型文件。

// 設置下載配置項。
Modeling3dReconstructDownloadConfig downloadConfig = new Modeling3dReconstructDownloadConfig.Factory()
    // 配置OBJ或glTF格式。
    .setModelFormat(Modeling3dReconstructConstants.ModelFormat.OBJ)
    // 配置普通或PBR模式。
    .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)
    .create();
// 設置下載監聽器。
modeling3dReconstructEngine.setReconstructDownloadListener(modeling3dReconstructDownloadListener);
// 調用3D物體建模引擎的下載介面，傳入任務id，下載地址和下載配置項，下載模型文件。
modeling3dReconstructEngine.downloadModelWithConfig(taskId, savePath, downloadConfig);

完成以上步驟就可以在電商應用中實現3D建模能力，用手機就能快速給商品建立3D模型，感興趣的開發者們可以馬上動手體驗！

除了商品3D建模和展示，HMS Core電商解決方案還提供了AR互動式購物能力，可實現商品試穿功能，為消費者創造虛擬與現實融合的購物體驗，相關內容會在下一期進行詳細講解，敬請期待。

瞭解更多詳情>>

訪問華為開發者聯盟官網
獲取開髮指導文檔
華為移動服務開源倉庫地址：GitHub、Gitee

關註我們，第一時間瞭解 HMS Core 最新技術資訊~