SwiftUI-3D模型加载与显示

YungFan

发布于 2025-05-27 08:54:09

17800

代码可运行

文章被收录于专栏：学海无涯学海无涯

运行总次数：0

代码可运行

介绍

在增强现实（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模型展示")
        }
    }
}