HMS Core电商解决方案之商品3D商品展示

传统电商商品展示采用图文结合的形式，文案介绍产品的相关参数，搭配精美图片去吸引客户眼球。但图文商品展示由于色差、尺寸不符等原因，会让消费者产生图片和实物不一致的疑虑，且消费者需要消耗大量精力阅读和比较后才能做出购买决定。

随着互联网电商平台的不断完善，短视频逐渐成为商品展示的主流形式。通过拍短视频的形式可以多方位展示产品，让消费者在短时间内可以了解产品的参数和优势，极大提高了消费者的购物速度。但短视频展示的劣势在于，展示时间短且很难和消费者进行互动。

3D技术的发展赋予了电商行业最新的商品展示方式，3D模型可以360°全方位细节展示商品，让消费者更直观了解商品，增强他们对产品的信心。消费者还能隔着屏幕与商品产生互动，通过单指拖动来实现360度查看商品、自由放大查看高清细节，从而提高下单机率。

然而，目前效果佳的3D建模技术因其较高的成本而使得让广大开发者望而却步。

1.技术门槛高：专业人员加上深度相机等专业设备。

2.时间成本高：专业人员手动完成模型的制作渲染和调整。完成一个简单物体的低精度模型，工作量以小时起步，而高精度模型耗时更长。

3.耗费高：单个商品的专业建模成本高，平均价格达到上千元，复杂模型则更贵。

HMS Core的3D建模服务，助力轻松建模。用户只需使用普通的RGB相机，通过拍摄物体的不同角度图像，便可实现物体的3D几何模型和纹理的自动化生成，如在电商实物展示的场景，您可以通过此能力自动生成想展示商品模型，用于3D展示，用户可360°随心放大或缩小商品，查看商品细节，为用户提供差异化的购买体验。

3D物体建模能力由端云协同完成，端侧负责采集RGB图像，通过环绕物体拍摄多张图像，从而获取物体的不同角度图像，拍摄完毕后上传至云端实现3D物体建模。云端建模的流程及关键技术包括目标检测分割、特征检测与匹配、稀疏点云计算、稠密点云计算以及纹理重建等模块。

效果展示

以面包为例，只需环绕面包拍摄多张图像，即可得到一个逼真的面包3D模型。那这个功能是如何实现的呢？以下是详细的开发步骤。

开发前准备

1. 配置集成的SDK包

在应用的build.gradle文件中，dependencies内添加3D建模服务的SDK依赖

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

1. 配置AndroidManifest.xml

打开main文件夹中的AndroidManifest.xml文件，可以根据场景和使用需要，配置读取和写入手机存储以及相机权限，在<application>前添加

<!-- 往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" />

开发步骤

1. 使用云侧服务的能力，需要使用“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");

1. 新建3D物体建模引擎并初始化，新建3D物体建模配置器。

// 新建3D物体建模引擎。
Modeling3dReconstructEngine modeling3dReconstructEngine = Modeling3dReconstructEngine.getInstance(context);
// 新建3D物体建模配置器。
Modeling3dReconstructSetting setting = new Modeling3dReconstructSetting.Factory()
    // 设置工作模式为图片模式。
    .setReconstructMode(Modeling3dReconstructConstants.ReconstructMode.PICTURE)
    // 设置贴图模式为普通模式或PBR模式。
    .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)
    .create();
		
		```
		
3.	新建上传监听器回调，用于处理拍摄的物体图片上传结果。

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) { // 上传失败处理。 } };

4.	使用3D物体建模配置器初始化任务，并且给新建的3D物体建模引擎设置上传监听器，上传采集的图片数据。

// 使用3D物体建模配置器初始化任务（该接口需要在子线程中调用）。 Modeling3dReconstructInitResult modeling3dReconstructInitResult = modeling3dReconstructEngine.initTask(setting); String taskId = modeling3dReconstructInitResult.getTaskId(); // 设置上传监听器。 modeling3dReconstructEngine.setReconstructUploadListener(uploadListener); // 调用3D建模引擎的上传接口，上传采集的图片数据。 modeling3dReconstructEngine.uploadFile(taskId, filePath);

5.	查询3D物体建模任务状态。

// 查询3D物体建模任务状态需要初始化任务处理类。 Modeling3dReconstructTaskUtils modeling3dReconstructTaskUtils = Modeling3dReconstructTaskUtils.getInstance(context); // 调用查询接口获取3D物体建模任务状态（该接口需要在子线程中调用）。 Modeling3dReconstructQueryResult queryResult = modeling3dReconstructTaskUtils.queryTask(taskId); // 获取建模任务状态。 int status = queryResult.getStatus();

6.	新建侦听器回调，调用预览函数，预览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);

7.	新建下载监听器回调，用于处理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) { // 下载失败处理。 } };

8.	新建的下载配置项并将新建的下载监听器传入新建的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交互式购物能力，可实现商品试穿功能，为消费者创造虚拟与现实融合的购物体验，相关内容会在下一期进行详细讲解，敬请期待。

**了解更多详情>>**

访问[华为开发者联盟官网](http://developer.huawei.com/consumer/cn/hms?ha_source=hms1)  
获取[开发指导文档](http://developer.huawei.com/consumer/cn/doc/development?ha_source=hms1)  
华为移动服务开源仓库地址：[GitHub](http://github.com/HMS-Core)、[Gitee](http://gitee.com/hms-core)

**关注我们，第一时间了解 HMS Core 最新技术资讯~**