足不出户，一探古今，打造线上3D数字博物馆!

HMSCore技术团队 2023-03-28 原文

随着3D技术的不断革新，为了让更多的用户领略历史之美，越来越多的博物馆开始举办线上展览。通过模拟不同的环境、灯光投影、360°无死角放大缩小展品，观众可以享受到身临其境的沉浸体验。不仅如此，给展品加上BGM或者语音解说，帮助观众更加了解展品的详细背景，让演示场景更有代入感。

效果示意

看完如此逼真的效果展示，是不是想知道究竟是怎么实现的呢？

通过Android Studio的Kotlin工程实现 3D场景构建、物品展示以及声音播放功能，就可以做到。

一、准备3D模型

华为移动服务最新开放的3D物体建模服务（3D Modeling Kit），助力轻松建模。我们只需使用手机相机，通过拍摄物体的不同角度图像，便可实现物体的3D几何模型和纹理的自动化生成，为应用提供3D模型构建、预览等能力。具体操作指导可参考《5分钟给商品建立3D模型，我是如何做到的？》

二、制作3D物体视图

接下来我们将准备好的展品3D模型，通过华为图形引擎服务创建一个可交互的3D物体视图，如图所示：

↓↓↓

集成华为图形引擎服务

软件要求：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图像，并且与之进行交互。如果还需要使用其他功能，可以参阅华为图形引擎服务官方文档。

创建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模型文件保存，比如：

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

    <ImageView
        android:id="@+id/iv_rightArrow"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="12dp"
        android:src="@drawable/ic_arrow"
        android:tint="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iv_leftArrow"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="12dp"
        android:rotation="180"
        android:src="@drawable/ic_arrow"
        android:tint="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</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模型，效果如下：

三、为展品增加讲解词

在加载不同的3D模型时，我们可以通过华为音频服务播放该展品对应的讲解词，为用户提供展品详细介绍。集成华为音频服务

软件要求：

• 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" />

这个按钮可以用来为展示中的物品播放声音。然后，在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
}

上述配置添加完成后，就能为展品播放讲解词了。本工程使用的声音音频为线上资源。如果需要播放本地音频，可以参考官网指导。这样，就能导入音频文件，为物品播放声音了。

至此，我们就可以创建一个360°可旋转、放大缩小、带有音效的展览场景了。

最后，除了3D文物展示等应用场景，我们还可以把这些能力应用到很多相关行业，比如：

线上社交领域中的脸萌、视频表情包、视频虚拟背景；电商购物领域的3D商品展示、家装场景渲染、AR试穿；影音领域的3D解锁屏保/手机主题、3D特效渲染、直播表情包；教育领域的3D教学、3D书籍、VR远程教学。

欲了解更多详情，请参阅：

解决集成问题请到Stack Overflow

点击关注，第一时间了解HMS Core最新技术~

博物博物馆 quot android code hmscore 3DModeling 图形引擎Android 移动开发

有关足不出户，一探古今，打造线上3D数字博物馆!的更多相关文章

世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2
本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01 客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02 数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit
Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
[Vuforia]二.3D物体识别 - 2
之前说过10之后的版本没有3dScan了，所以还是9.8的版本或者之前更早的版本。 3d物体扫描需要先下载扫描的APK进行扫面。首先要在手机上装一个扫描程序，扫描现实中的三维物体，然后上传高通官网，在下载成UnityPackage类型让Unity能够使用这个扫描程序可以从高通官网上进行下载，是一个安卓程序。点到Tools往下滑，找到VuforiaObjectScanner下载后解压数据线连接手机，将apk文件拷入手机安装然后刚才解压文件中的Media文件夹打开，两个PDF图打印第一张A4-ObjectScanningTarget.pdf，主要是用来辅助扫描的。好了，接下来就是扫描三维物体。将瓶
python - Ruby 或 Python 的 3d 游戏引擎？ - 2
关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion是否有适用于这些的3d游戏引擎？
【自动驾驶环境感知项目】——基于Paddle3D的点云障碍物检测 - 2
文章目录1.自动驾驶实战：基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战：基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战：基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0（项目默认框架版本为2.3
Unity3D : 本地坐标系，世界坐标系，和TransformPoint，TransformVector，TransformDirection的区别 - 2
目录一、世界坐标系与本地坐标系二、srcGameObject.transform.TransformPoint(Vector3 vec)三、srcGameObject.transform.TransformVector(Vector3 vec)四、srcGameObject.transform.TransformDirection(Vector3 vec)五:示例一、世界坐标系与本地坐标系世界坐标很好理解，就是模型的transform.position，通常在无父物体的情况下，创建出来的模型默认位置就是世界坐标系的原点。每个物体都有自身的坐标系，此坐标系就是本地坐标系。本地坐标
ruby - ruby 的 3D 引擎 - 2
我正在寻找用于开发ruby游戏的3D引擎。我找到了一些类似G3Druby或ogreb的东西。哪个更好用，功能更好？还有比这些更好的引擎吗？最佳答案两者似乎都是G3D和Ogre的包装器，因此您实际上应该比较G3D或Ogre是否更适合您的需求。通过包装器的大部分ruby外访问将在设置场景时进行，因此繁重的工作(每一帧)仍然在C/C++库和图形硬件上完成。因此，您应该比较这两个库。我不知道G3D，但它似乎提供了Ogre所缺乏的离线渲染功能。如果您需要专业游戏渲染引擎的广泛功能，Ogre通常是首选，并且您会发现几乎所有您会遇到的
U3D游戏开发工程师正确入行姿势指南 - 2
2021年，游戏圈上演了一场精彩绝伦的抢人大战。在上海游戏圈，年薪百万的人越来越多了。据多名HR估算，在上海，过去一年TA、引擎、美术等稀缺岗位拟的薪资涨幅大概在20%-30%左右。某位圈内知名资深游戏猎头对此发出感叹：“50K的数值策划、角色原画；70K的技术美术；80K的技术总监...他们的年薪总包都接近百万，就连应届生入行的薪资也水涨船高，这要是放在以往都是不敢想象的”。以往含年薪、期权等的年总包收入上百万元，起码得是总监级别。如今工作五六年的人从广深跳到上海游戏公司，年薪能从50-70万跃上100万元，拿百万年薪的游戏从业者越来越多了上海游戏圈近年发展迅速，既有颇具发展潜力的中生代F4
如何使用open3d合并多组mesh并输出结果 - 2
关注公众号，发现CV技术之美最近在学习open3d的相关应用，然后遇到了一个很有趣的问题。给定多个mesh，我们可能会需要把他们全部合并到一个文件并使用。但是这并不好实现，因为open3d自己不支持这样的操作。相比之下，其他一些集成度非常高的软件，是可以实现这样的操作的，例如meshlab通过交互栏中的“flattenvisiblelayer”指令来实现。唯一的缺点是，你每次都需要手动操作才行，这对于需要高度自动化的使用场景，就不是很合适了。因此，如何可以实现一个自动化的脚本，支持直接合并多个可染色的mesh，并输出带有纹理的最终结果，是一个非常重要的功能。遗憾的是度娘和谷歌目前没有相关的教程