Kotlin开发Android应用如何设置SceneView背景为透明

问题根因 #

• 自定义彩色设置后显示白色：SceneView 内置的colorOf()方法接收Float类型参数时，RGB通道取值范围为0f~1f，传入大于1的数值会被直接截断为1f，三个通道均为1f时即为纯白色。之前传入的132f、63f、18f均超出取值范围，因此始终显示白色。
• 透明背景显示黑色：SceneView 底层基于Filament渲染引擎，默认使用的SurfaceView渲染层未开启透明像素通道，即使设置背景alpha为0，下层布局也无法穿透显示，只会透出SurfaceView默认的黑色底色。
• 赋值时序错误：在onViewCreated中直接设置背景色时，SceneView渲染器尚未完成初始化，设置的值会被后续初始化流程中的默认值覆盖。

具体修复步骤 #

1. 补全命名空间声明 #

先给Fragment布局的根FrameLayout补上app命名空间，否则自定义属性无法生效：

<FrameLayout 
    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=".view.SceneViewFragment">

2. 配置SceneView基础属性 #

修改SceneView控件属性，开启透明通道支持：

<io.github.sceneview.SceneView
    android:id="@+id/sceneView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    app:translucent="true" />

3. 修正背景色设置逻辑 #

• 若需设置自定义彩色，将RGB值换算到0f~1f区间，或直接使用Android原生Color类传参，避免数值越界：

// 方式1：手动换算0-1区间，示例为棕色(132,63,18)
mSceneView.backgroundColor = colorOf(132f/255f, 63f/255f, 18f/255f, 1f)

// 方式2：直接使用Android Color对象，无需手动换算
mSceneView.backgroundColor = colorOf(Color.rgb(132,63,18))

• 若需设置透明背景，将赋值逻辑移到渲染器初始化完成回调中，避免被默认值覆盖：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    mSceneView = view.findViewById(R.id.sceneView)

    // 等渲染器初始化完成后再配置背景
    mSceneView.onSceneViewAttached = {
        // 透明背景配置
        mSceneView.backgroundColor = colorOf(0f, 0f, 0f, 0f)
    }

    // 其余模型加载逻辑不变
    val modelNode = ModelNode()
    lifecycleScope.launchWhenCreated {
        modelNode.loadModel(
            context = requireContext(),
            lifecycle = lifecycle,
            glbFileLocation = "low_poly_arrow/scene.gltf",
            autoAnimate = true,
            autoScale = true
        )
    }
    modelNode.scale = Scale(2.5f)
    modelNode.centerModel()
    mSceneView.addChild(modelNode)
}

适配补充 #

• 若透明后出现3D模型边缘黑边问题，在SceneView XML属性中添加app:hdr="false"关闭HDR渲染即可。
• 若SceneView叠在相机预览层上方出现被遮挡的问题，在代码中添加mSceneView.setZOrderOnTop(true)将渲染层置顶。

内容的提问来源于stack exchange，提问作者jpsf