隨著3D技術的不斷革新，為了讓更多的使用者領略歷史之美，越來越多的博物館開始舉辦線上展覽。透過模擬不同的環境、燈光投影、360°無死角放大縮小展品，觀眾可以享受到身臨其境的沉浸體驗。不僅如此，給展品加上BGM或者語音解說，幫助觀眾更加了解展品的詳細背景，讓演示場景更有代入感。

# 效果示意

![](https://oscimg.oschina.net/oscnet/up-5c7789e952da86ba471a1b70aaf6003bb77.gif)

看完如此逼真的效果展示，是不是想知道究竟是怎麼實現的呢？

透過Android Studio的Kotlin工程實現 3D場景構建、物品展示以及聲音播放功能，就可以做到。

# 一、準備3D模型

華為移動服務最新開放的[3D物體建模服務](https://developer.huawei.com/consumer/cn/hms/huawei-3d-modeling?ha_source=hms1)（3D Modeling Kit），助力輕鬆建模。我們只需使用手機相機，透過拍攝物體的不同角度影像，便可實現物體的3D幾何模型和紋理的自動化生成，為應用提供3D模型構建、預覽等能力。具體操作指導可參考《[5分鐘給商品建立3D模型，我是如何做到的？](https://hmscore.blog.csdn.net/article/details/118761233)》

![](https://oscimg.oschina.net/oscnet/up-bc904aae0fc2ab12f3a99b0097f58c7297f.JPEG)

# 二、製作3D物體檢視
接下來我們將準備好的展品3D模型，透過華為圖形引擎服務建立一個可互動的3D物體檢視，如圖所示：
![](https://oscimg.oschina.net/oscnet/up-0062262cf3016003766b036d505db8ee159.png)

**↓↓↓**

![](https://oscimg.oschina.net/oscnet/up-df6912a3734f27cb43cbf6fe2c266e4ca9f.gif)

![](https://oscimg.oschina.net/oscnet/up-3a18815f198e72e5ef49b731203f94fd395.png)

**↓↓↓**

![](https://oscimg.oschina.net/oscnet/up-f026453316b30c1e56c1c4a447fc02600d5.gif)

## 整合華為圖形引擎服務
**軟體要求**：JDK1.7及以上版本

•	minSdkVersion ：設定為19或以上

•	targetSdkVersion：設定為19或以上

•	compileSdkVersion：設定為19或以上

•	Gradle 3.5及以上版本

在build.gradle檔案中配置以下內容：
```
buildscript {
    repositories {
        ...
        maven { url 'https://developer.huawei.com/repo/' }
    }
    ...
}

allprojects {
 repositories {
  ...
  maven { url 'https://developer.huawei.com/repo/' }
 }
}
```

在應用級build.gradle檔案中配置以下內容：

```
dependencies {
    ...
    implementation 'com.huawei.scenekit:full-sdk:5.1.0.300'
}
示例工程使用了Kotlin的viewBinding功能從而略過了檢視初始化樣板程式碼。可在應用級build.gradle檔案里加入如下程式碼來啟用viewBinding功能：
android {
    ...
    buildFeatures {
        viewBinding true
    }
    ...
}
```

build.gradle檔案同步完成後，就能在工程中使用圖形引擎服務了。

本文中，我們僅需要使用該服務即可展示物品的3D影像，並且與之進行互動。如果還需要使用其他功能，可以參閱[華為圖形引擎服務官方文件](https://developer.huawei.com/consumer/cn/hms/huawei-scenekit/?ha_source=hms1)。

## 建立3D檢視
建立自定義檢視的目的很簡單，確保檢視初始化完成後，第一個模型能自動載入到檢視裡。透過預設的SceneView手動實現模型載入，如下所示：
```
import android.content.Context
import android.util.AttributeSet
import android.view.SurfaceHolder
import com.huawei.hms.scene.sdk.SceneView

class CustomSceneView : SceneView {
    constructor(context: Context?) : super(context)
    constructor(
        context: Context?,
        attributeSet: AttributeSet?
    ) : super(context, attributeSet)

override fun surfaceCreated(holder: SurfaceHolder) {
        super.surfaceCreated(holder)
        loadScene("qinghuaci/scene.gltf")
        loadSpecularEnvTexture("qinghuaci/specularEnvTexture.dds")
        loadDiffuseEnvTexture("qinghuaci/diffuseEnvTexture.dds")
    }
}
```

展示物品需新增相關模型檔案，開啟工程資料夾，在“src/main”路徑下建立“assets”資料夾，將3D模型檔案儲存，比如：
![](https://oscimg.oschina.net/oscnet/up-68b9cb6a1c7c43c89d758af0eb11a364d74.png)

surfaceCreated中的loadScene()、loadSpecularEnvTexture()和loadDiffuseEnvTexture()方法用於載入物品。建立surface後，第一個物品將載入到surface中。
接下來，開啟用於展示3D模型檢視的XML檔案，本工程中為activity_main.xml。在該檔案中，建立剛才構造的CustomSceneView。下方程式碼使用了箭頭圖片用以在不同的物品模型間切換。

```
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.constraintlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

<com.example.sceneaudiodemo.customsceneview android:id="@+id/csv_main" android:layout_width="match_parent" android:layout_height="match_parent"></com.example.sceneaudiodemo.customsceneview>

</androidx.constraintlayout.widget.constraintlayout>
```
一切準備就緒，應用開啟之後就能看到第一個展品：青花瓷花瓶了。
## 增加切換功能
現在，我們透過切換功能來檢視多個展品3D模型。
在MainActivity中，配置如下資訊：
```
private lateinit var binding: ActivityMainBinding
private var selectedId = 0
private val modelSceneList = arrayListOf(
    "qinghuaci/scene.gltf",
    "tangyong/scene.gltf",
)
private val modelSpecularList = arrayListOf(
    "qinghuaci/specularEnvTexture.dds",
    "tangyong/specularEnvTexture.dds",
)
private val modelDiffList = arrayListOf(
    "qinghuaci/diffuseEnvTexture.dds",
    "tangyong/diffuseEnvTexture.dds",
)

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    val view = binding.root
    setContentView(view)
    binding.ivRightArrow.setOnClickListener {
        if (modelSceneList.size == 0) return@setOnClickListener
        selectedId = (selectedId + 1) % modelSceneList.size // 確保ID處於模型列表的範圍內。
        loadImage()
    }
    binding.ivLeftArrow.setOnClickListener {
        if (modelSceneList.size == 0) return@setOnClickListener
        if (selectedId == 0) selectedId = modelSceneList.size - 1 // 確保ID處於模型列表的範圍內。
        else selectedId -= 1
        loadImage()
    }
}

private fun loadImage() {
    binding.csvMain.loadScene(modelSceneList[selectedId])
    binding.csvMain.loadSpecularEnvTexture(modelSpecularList[selectedId])
    binding.csvMain.loadDiffuseEnvTexture(modelDiffList[selectedId])
}
```
在onCreate()中，建立了一個簡單的邏輯，檢視下一個/上一個模型。物品檔案路徑以字串的形式儲存於各個硬編碼列表中。可以自行修改這個邏輯，使模型呈現更富動態。其中selectedId表示正在展示的物品模型ID。
這樣，就實現了利用SceneView來展示3D模型，效果如下：
![](https://oscimg.oschina.net/oscnet/up-6f0e1fea30fe0fca5ea611de8a5bd9eebf1.gif)
![](https://oscimg.oschina.net/oscnet/up-713ece00de31b008afe961fb8eb8461bd86.gif)

# 三、為展品增加講解詞
在載入不同的3D模型時，我們可以透過華為音訊服務播放該展品對應的講解詞，為使用者提供展品詳細介紹。
整合[華為音訊服務](https://developer.huawei.com/consumer/cn/hms/huawei-audiokit/?ha_source=hms1)

**軟體要求**：

•	JDK版本1.8.211及以上版本

•	minSdkVersion：設定為21

•	targetSdkVersion：設定為29

•	compileSdkVersion：設定為29

•	Gradle 4.6及以上版本

可以看到，音訊服務相較於圖形引擎服務軟體要求更高，所以我們需要確保滿足音訊服務的使用要求。

首先，開啟應用級build.gradle檔案，新增音訊服務的相關配置。
```
dependencies {
    ...
    implementation 'com.huawei.hms:audiokit-player:1.1.0.300'
    ...
}
```
之前在配置圖形引擎服務時，已經新增了必要的庫，所以專案級build.gradle不需要改動。
在activity_main.xml檔案中，新增一個簡單的播放按鈕。
```
<button android:id="@+id/btn_playSound" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Play" app:layout_constraintbottom_tobottomof="parent" app:layout_constraintend_toendof="parent" app:layout_constraintstart_tostartof="parent"></button>
```

這個按鈕可以用來為展示中的物品播放聲音。
然後，在MainActivity中新增以下配置：

```
private var mHwAudioManager: HwAudioManager? = null
private var mHwAudioPlayerManager: HwAudioPlayerManager? = null

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    initPlayer(this)
    binding.btnPlaySound.setOnClickListener {
        mHwAudioPlayerManager?.play(selectedId) //建立播放列表例項。selectedId：播放曲目的引數。

}
    ...
}

private fun initPlayer(context: Context) {
    val hwAudioPlayerConfig = HwAudioPlayerConfig(context)
    HwAudioManagerFactory.createHwAudioManager(hwAudioPlayerConfig,
    object : HwAudioConfigCallBack {
        override fun onSuccess(hwAudioManager: HwAudioManager?) {
            try {
                mHwAudioManager = hwAudioManager
                mHwAudioPlayerManager = hwAudioManager?.playerManager
                mHwAudioPlayerManager?.playList(getPlaylist(), 0, 0)
            } catch (ex: Exception) {
                ex.printStackTrace()
            }
        }

override fun onError(p0: Int) {
            Log.e("init:onError: ","$p0")
        }
    })
}

fun getPlaylist(): List<hwaudioplayitem>? {
    val playItemList: MutableList<hwaudioplayitem> = ArrayList()
    val audioPlayItem1 = HwAudioPlayItem()
    val sound = Uri.parse("android.resource://yourpackagename/raw/soundfilename").toString() // soundfilename不包含副檔名。
    audioPlayItem1.audioId = "1000"
    audioPlayItem1.singer = "Taoge"
    audioPlayItem1.onlinePath =
        "https://lfmusicservice.hwcloudtest.cn:18084/HMS/audio/Taoge-chengshilvren.mp3" //此處Demo使用歌曲示意
    audioPlayItem1.setOnline(1)
    audioPlayItem1.audioTitle = "chengshilvren"
    playItemList.add(audioPlayItem1)
    val audioPlayItem2 = HwAudioPlayItem()
    audioPlayItem2.audioId = "1001"
    audioPlayItem2.singer = "Taoge"
    audioPlayItem2.onlinePath =
        "https://lfmusicservice.hwcloudtest.cn:18084/HMS/audio/Taoge-dayu.mp3"//此處Demo使用歌曲示意
    audioPlayItem2.setOnline(1)
    audioPlayItem2.audioTitle = "dayu"
    playItemList.add(audioPlayItem2)
    return playItemList
}
```

上述配置新增完成後，就能為展品播放講解詞了。本工程使用的聲音音訊為線上資源。如果需要播放本地音訊，可以[參考官網指導](https://developer.huawei.com/consumer/cn/doc/development/Media-References/hwaudioplayitem-0000001050299080#section4131mcpsimp?ha_source=hms1)。這樣，就能匯入音訊檔案，為物品播放聲音了。

至此，我們就可以建立一個360°可旋轉、放大縮小、帶有音效的展覽場景了。

最後，除了3D文物展示等應用場景，我們還可以把這些能力應用到很多相關行業，比如：

線上社交領域中的臉萌、影片表情包、影片虛擬背景；
電商購物領域的3D商品展示、裝潢場景渲染、AR試穿；
影音領域的3D解鎖屏保/手機主題、3D特效渲染、直播表情包；
教育領域的3D教學、3D書籍、VR遠端教學。

**欲瞭解更多詳情，請參閱：**

[華為3D建模服務](https://developer.huawei.com/consumer/cn/hms/huawei-3d-modeling?ha_source=hms1) 、 [開源倉庫](https://gitee.com/hms-core/hms-3d-modeling-demo)

[華為圖形引擎服務官網](https://developer.huawei.com/consumer/cn/hms/huawei-scenekit/?ha_source=hms1) 、 [開源倉庫](https://gitee.com/hms-core/hms-scene-demo)

[華為音訊服務官網](https://developer.huawei.com/consumer/cn/hms/huawei-audiokit/?ha_source=hms1) 、[ 開源倉庫](https://gitee.com/hms-core/hms-audio-demo)

[華為HMS Core官方論壇](https://developer.huawei.com/consumer/cn/forum/block/hms-core?ha_source=hms1)

解決整合問題請到[Stack Overflow](https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest)

點選關注，第一時間瞭解HMS Core最新技術~</hwaudioplayitem></hwaudioplayitem>

足不出戶，一探古今，打造線上3D數字博物館!

相關文章