Day25 沉浸式空間

這個單元要來討論沉浸式空間，也就是物體或物件沒有邊界，可以在空間內到處呈現。

我們先來看看Apple所提供的範例是怎麼做到的，建立一個全新的Vision Pro專案：

Initial Scene 選擇 Window。

Immersive Space Renderer 選擇 RealityKit。

Immersive Space 選擇 Mixed。

專案建立好之後，開啟ContentView.swift程式檔案：

import SwiftUI
import RealityKit
import RealityKitContent

struct ContentView: View {

    @State private var showImmersiveSpace = false
    @State private var immersiveSpaceIsShown = false

    @Environment(\.openImmersiveSpace) var openImmersiveSpace
    @Environment(\.dismissImmersiveSpace) var dismissImmersiveSpace

    var body: some View {
        VStack {
            Model3D(named: "Scene", bundle: realityKitContentBundle)
                .padding(.bottom, 50)

            Text("Hello, world!")

            Toggle("Show ImmersiveSpace", isOn: $showImmersiveSpace)
                .font(.title)
                .frame(width: 360)
                .padding(24)
                .glassBackgroundEffect()
        }
        .padding()
        .onChange(of: showImmersiveSpace) { _, newValue in
            Task {
                if newValue {
                    switch await openImmersiveSpace(id: "ImmersiveSpace") {
                    case .opened:
                        immersiveSpaceIsShown = true
                    case .error, .userCancelled:
                        fallthrough
                    @unknown default:
                        immersiveSpaceIsShown = false
                        showImmersiveSpace = false
                    }
                } else if immersiveSpaceIsShown {
                    await dismissImmersiveSpace()
                    immersiveSpaceIsShown = false
                }
            }
        }
    }
}

這段程式碼的重點在於視窗中會有一個開關，打開之後會開啟沉浸式空間。

我一行一行程式碼來討論。

Toggle開啟之後會將變數showImmersiveSpace設定為true。

Toggle("Show ImmersiveSpace", isOn: $showImmersiveSpace)

然後在onChange去監聽這個變數，當發生變化時，會直接觸發：

.onChange(of: showImmersiveSpace) { _, newValue in

所以當showImmersiveSpace設定為true時，會去觸發這一行：

await openImmersiveSpace(id: "ImmersiveSpace")

而上述這一行會使用到環境變數的openImmersiveSpace，表示要開啟沈浸式的空間：

@Environment(\.openImmersiveSpace) var openImmersiveSpace

所以回到程式進入點，會宣告沈浸式空間的id：

ImmersiveSpace(id: "ImmersiveSpace") {
    ImmersiveView()
}

所以就會開啟ImmersiveView()這一個View，打開ImmersiveView.swift程式碼檔案：

import SwiftUI
import RealityKit
import RealityKitContent

struct ImmersiveView: View {
    var body: some View {
        RealityView { content in
            // Add the initial RealityKit content
            if let scene = try? await Entity(named: "Immersive", in: realityKitContentBundle) {
                content.add(scene)
            }
        }
    }
}

ImmersiveView是另外一個類似的SwiftUI的View，它使用到了RealityView，而RealityView可以把它想像成是一個3D空間的渲染，包含了場景或者是動畫渲染方式。Entity從指定的RealityKit內容中讀取一個名為Immersive的實體，然後加入到場景當中。

這裡開啟沉浸式空間之後，就會在空間內多出了兩顆3D圓球。

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day25 [完]