SwiftUI-3D模型加载与显示

406 阅读1分钟

介绍

在增强现实(AR)应用中,3D 模型的展示是最基础也是最核心的功能之一。无论是家具摆放、产品预览,还是虚拟角色展示,几乎所有 AR App 都依赖于 3D 模型的加载与渲染。本文将介绍如何使用 SwiftUI 和 SceneKit 框架,在 iOS 应用中加载并展示一个 .usdz 格式的 3D 模型。

为什么使用USDZ?

Apple 推荐在 iOS 和 ARKit 应用中使用 .usdz 格式的 3D 模型。它具备以下优势:

  • 支持物理渲染(PBR)材质。
  • 可直接在 Xcode 和 Quick Look 中预览。
  • 与 RealityKit 和 SceneKit 兼容性好。

通过 Apple 的 Reality Converter 工具可以将 .obj、.fbx、.gltf、.glb 等格式的模型其转换为 .usdz,方便在项目中使用。

使用SceneKit加载3D模型

虽然 ARKit 推荐使用 RealityKit 进行开发,但在非 AR 场景下(如普通模型预览),SceneKit 仍是一个非常强大的工具,支持复杂的模型渲染与交互。

import SceneKit
import SceneKit.ModelIO
import SwiftUI

class Model: ObservableObject {
    @Published var scene: SCNScene?

    init() {
        load3DModel()
    }

    // MARK: 加载3D模型
    func load3DModel() {
        guard let url = Bundle.main.url(forResource: "test", withExtension: "usdz") else { return }
        let asset = MDLAsset(url: url)
        asset.loadTextures()
        let scene = SCNScene(mdlAsset: asset)
        self.scene = scene
    }
}

使用SCNView展示模型

通过 UIViewRepresentable 将 SCNView 集成进 SwiftUI,实现模型的预览和交互(支持旋转、缩放等)。

struct SceneView: UIViewRepresentable {
    var scene: SCNScene

    func makeUIView(context: Context) -> SCNView {
        let sceneView = SCNView()
        sceneView.autoenablesDefaultLighting = true
        sceneView.allowsCameraControl = true
        sceneView.scene = scene
        return sceneView
    }

    func updateUIView(_ uiView: SCNView, context: Context) {
        uiView.scene = scene
    }
}

SwiftUI集成

struct ContentView: View {
    @StateObject var model = Model()

    var body: some View {
        NavigationStack {
            VStack {
                if let scene = model.scene {
                    SceneView(scene: scene)
                        .frame(width: 400, height: 400)
                        .padding()
                }
            }
            .navigationTitle("3D模型展示")
        }
    }
}

效果

效果.gif