VisionOS技术咨询：如何在ImmersiveSpace内展示图片实现沉浸体验？

当然可以在ImmersiveSpace中显示图片，下面提供两种常用的实现方式，帮你打造沉浸效果：

方法一：直接使用SwiftUI Image组件 #

你可以直接在ImmersiveSpace的视图层级中添加SwiftUI的Image，通过3D布局修饰符调整它在空间中的位置、大小和角度，让图片融入沉浸空间。

示例代码：

import SwiftUI

@main
struct ImmersiveImageApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }

        ImmersiveSpace(id: "ImmersiveImageSpace") {
            ImmersiveImageView()
        }
    }
}

struct ImmersiveImageView: View {
    var body: some View {
        // 加载本地图片资源（确保已添加到Assets中）
        Image("your-image-name")
            .resizable()
            .scaledToFit()
            // 设置3D空间位置：x左右，y上下，z前后（负值靠近用户，正值远离）
            .position3D(x: 0, y: 0, z: -1)
            // 调整3D缩放比例
            .scaleEffect3D(x: 2, y: 2, z: 2)
            // 可选：添加3D旋转效果
            .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
    }
}

方法二：通过RealityKit将图片作为纹理贴到3D实体 #

如果需要更灵活的3D空间交互（比如允许用户移动、旋转图片），可以用RealityKit创建一个平面实体，将图片作为纹理贴到实体表面，再添加到ImmersiveSpace中。

示例代码：

import SwiftUI
import RealityKit

struct ImmersiveRealityImageView: View {
    var body: some View {
        RealityView { content in
            // 创建平面实体，设置尺寸
            let plane = ModelEntity(mesh: .generatePlane(width: 2, height: 1.5))
            
            // 加载图片作为纹理
            guard let texture = try? TextureResource.load(named: "your-image-name") else { return }
            let material = SimpleMaterial(texture: .init(texture), isMetallic: false)
            plane.model?.materials = [material]
            
            // 设置实体在空间中的位置
            plane.position = [0, 0, -1]
            
            // 将实体添加到场景
            content.add(plane)
        }
    }
}

// 在ImmersiveSpace中使用该视图
ImmersiveSpace(id: "ImmersiveRealitySpace") {
    ImmersiveRealityImageView()
}

注意事项 #

• 确保图片资源已正确添加到项目的Assets目录中，或者使用系统图片（比如Image(systemName: "photo")）
• 调整position3D或实体position的z值时，负值代表图片靠近用户，正值代表远离用户，根据需求调整以获得合适的沉浸感
• 如果需要支持用户交互（比如拖动、缩放图片），可以结合Gesture或RealityKit的交互组件实现

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