Swift[第6單元] AR擴增實境與空間運算

// 6-2a 旋轉地球
// Created by Heman, 2024/03/12
import SceneKit
import SwiftUI

struct 旋轉地球: View {
    let 外太空 = SCNScene()
    var body: some View {
        SceneView(scene: 外太空, options: [.allowsCameraControl])
            .onAppear {
                let 地球材質 = SCNMaterial()
                地球材質.diffuse.contents = UIImage(named: "earth.jpg")

                let 地球 = SCNSphere(radius: 1.0)
                地球.materials = [地球材質]

                let 地球節點 = SCNNode(geometry: 地球)
                地球節點.rotation = SCNVector4(0, 1, 0, 0)

                let 旋轉動畫 = CABasicAnimation(keyPath: "rotation.w")
                旋轉動畫.toValue = 2.0 * .pi
                旋轉動畫.duration = 30
                旋轉動畫.repeatCount = .infinity
                地球節點.addAnimation(旋轉動畫, forKey: nil)

                外太空.rootNode.addChildNode(地球節點)
                外太空.background.contents = UIColor.darkGray
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(旋轉地球())

地球節點.rotation = SCNVector4(0, 1, 0, 0)

let 旋轉動畫 = CABasicAnimation(keyPath: "rotation.w")
旋轉動畫.toValue = 2.0 * .pi
旋轉動畫.duration = 30
旋轉動畫.repeatCount = .infinity
地球節點.addAnimation(旋轉動畫, forKey: nil)

1. 地球自轉是由西向東轉，所以太陽總是從東邊出來，西邊落下；若從北極上空往下看，則會看到地球沿逆時針方向轉動。
   
2. 若再仔細觀察，會發現程式寫得還不夠真實，因為地球南北極的自轉軸線並非垂直，應與公轉平面（稱為黃道面）垂線傾斜約23.5°。怎麼做出傾斜23.5°的自轉呢？

// 6-2a 旋轉地球v2
// Created by Heman, 2024/03/12
import SceneKit
import SwiftUI

struct 旋轉地球v2: View {
    let 外太空 = SCNScene()
    let 地球全景圖網址 =  "https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57735/land_ocean_ice_cloud_2048.jpg"
    // 備用網址：
    // "https://eoimages.gsfc.nasa.gov/images/imagerecords/147000/147190/eo_base_2020_clean_tn.jpg"
    // "https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73963/gebco_08_rev_bath_720x360_color.jpg"
        
    var body: some View {
        SceneView(scene: 外太空, options: [.allowsCameraControl, .autoenablesDefaultLighting])
            .task {
                if let myURL = URL(string: 地球全景圖網址) {
                    do {
                        let (內容, 回應碼) = try await URLSession.shared.data(from: myURL)
                        if let 地球全景圖 = UIImage(data: 內容) {
                            let 地球材質 = SCNMaterial()
                            地球材質.diffuse.contents = 地球全景圖
                            let 地球節點 = 外太空.rootNode.childNode(withName: "地球", recursively: true)
                            地球節點?.geometry?.materials = [地球材質]
                        }
                    } catch {
                        print("無法下載圖片")
                    }
                }
            }
            .onAppear {
//                let 地圖材質 = SCNMaterial()
//                地圖材質.diffuse.contents = UIImage(named: "earth.jpg")
                
                let 地球 = SCNSphere(radius: 1.0)
//                地球.materials = [地圖材質]
                
                let 地球節點 = SCNNode(geometry: 地球)
                地球節點.name = "地球"
                地球節點.rotation = SCNVector4(0, 1, 0, 0)
                
                let 旋轉動畫 = CABasicAnimation(keyPath: "rotation.w")
                旋轉動畫.toValue = 2.0 * .pi
                旋轉動畫.duration = 30
                旋轉動畫.repeatCount = .infinity
                地球節點.addAnimation(旋轉動畫, forKey: nil)
                
                
                外太空.rootNode.addChildNode(地球節點)
                外太空.background.contents = UIColor.darkGray
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(旋轉地球v2())

地球節點.name = "地球"
...
let 地球節點 = 外太空.rootNode.childNode(withName: "地球", recursively: true)
地球節點?.geometry?.materials = [地球材質]

let 軸心 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 3)
let 軸心節點 = SCNNode(geometry: 軸心)
let 傾斜度: Float = -23.5 / 180.0 * .pi
軸心節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: 傾斜度)

軸心節點.addChildNode(地球節點)

// 6-2b 旋轉地球v3（傾斜23.5º）
// Created by Heman, 2024/03/15
import SceneKit
import SwiftUI

struct 旋轉地球v3: View {
    let 外太空 = SCNScene()
    var body: some View {
        SceneView(scene: 外太空, options: [.allowsCameraControl, .autoenablesDefaultLighting])
            .onAppear {
                let 地球材質 = SCNMaterial()
                地球材質.diffuse.contents = UIImage(named: "earth.jpg")

                let 地球 = SCNSphere(radius: 1.0)
                地球.materials = [地球材質]
                
                let 地球節點 = SCNNode(geometry: 地球)
                地球節點.name = "地球"
                地球節點.rotation = SCNVector4(0, 1, 0, 0)
                
                let 旋轉動畫 = CABasicAnimation(keyPath: "rotation.w")
                旋轉動畫.toValue = .pi * 2.0
                旋轉動畫.duration = 30
                旋轉動畫.repeatCount = .infinity
                地球節點.addAnimation(旋轉動畫, forKey: nil)
                
                let 軸心 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 3)
                let 軸心節點 = SCNNode(geometry: 軸心)
                let 傾斜度: Float = -23.5 / 180.0 * .pi
                軸心節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: 傾斜度)
                                
                軸心節點.addChildNode(地球節點)
                外太空.rootNode.addChildNode(軸心節點)
                外太空.background.contents = UIColor.darkGray
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(旋轉地球v3())

1. 父節點可決定子節點的座標系，這個觀念非常重要，與第2單元2-4c介紹過視圖階層中，父視圖決定子視圖的版面配置（也就是螢幕位置與尺寸），非常類似，同樣都基於Apple原廠特意設計。
   
2. 第4單元第5課4-5a註解曾介紹過相對座標的概念，從本節範例也可看出，每個節點內部有自己的區域座標以及外界的全域座標，整個場景的全域座標又稱為世界座標(World Coordinate)，可與 AR 的真實世界互相對齊。

1. 仿照前一節做法，先做一個旋轉的太陽核心（藏在太陽中心點），作為地球（及自轉軸）的父節點，這樣即使地球距離很遠，仍然會與太陽核心同步轉動。
   
2. 在第4單元第6課4-6a曾經做過圓周運動，同樣可以用TimelineView來做地球公轉。
   
3. SceneKit 每個節點都有個 pivot 屬性，可用來變更旋轉軸心到任何位置。

func 空間座標系(尺寸半徑: CGFloat) -> SCNNode {
    let x軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
    let x軸節點 = SCNNode(geometry: x軸)
    x軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: .pi / -2.0)
    
    let y軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
    let y軸節點 = SCNNode(geometry: y軸)
    
    let z軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
    let z軸節點 = SCNNode(geometry: z軸)
    z軸節點.rotation = SCNVector4(x: 1, y: 0, z: 0, w: .pi / 2.0)
    
    let 公轉軌道 = SCNTube(innerRadius: 尺寸半徑, outerRadius: 尺寸半徑 + 0.01, height: 0.01)
    let 軌道節點 = SCNNode(geometry: 公轉軌道)
    
    let 座標原點 = SCNNode(geometry: SCNSphere(radius: 0.05))
    座標原點.addChildNode(x軸節點)
    座標原點.addChildNode(y軸節點)
    座標原點.addChildNode(z軸節點)
    座標原點.addChildNode(軌道節點)
    
    return 座標原點
}

.onChange(of: 時間) { _ in
    圓心角 += 0.2
    if 圓心角 > 360.0 { 圓心角 = 0.0 }
    let 地球節點 = 外太空.rootNode.childNode(withName: "地球軸心", recursively: true)
    地球節點?.position.x = Float(公轉半徑) * sin(圓心角 / 180.0 * .pi)
    地球節點?.position.z = Float(公轉半徑) * cos(圓心角 / 180.0 * .pi)
}

// 6-2c 地球公轉
// Created by Heman, 2024/03/18
import SceneKit
import SwiftUI

struct 地球公轉: View {
    @State var 外太空 = SCNScene()
    @State var 圓心角: Float = 0.0
    let 時間: Date
    let 地球半徑: CGFloat = 1.0    // 6371000m (6,371Km)
    let 太陽半徑: CGFloat = 3.0    // 696340000m (696,340Km)
    let 公轉半徑: CGFloat = 10.0   // 149590000000m (橢圓平均半徑 149,590,000km)
    let 自轉時間 = 2.0             // 86400s (1天)
    let 公轉時間 = 30.0            // 31556926s (365天)
    let 太陽全景圖網址 = "https://svs.gsfc.nasa.gov/vis/a030000/a030300/a030362/euvi_aia304_2012_carrington_print.jpg"
    
    func 空間座標系(尺寸半徑: CGFloat) -> SCNNode {
        let x軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let x軸節點 = SCNNode(geometry: x軸)
        x軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: .pi / -2.0)
        
        let y軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let y軸節點 = SCNNode(geometry: y軸)
        
        let z軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let z軸節點 = SCNNode(geometry: z軸)
        z軸節點.rotation = SCNVector4(x: 1, y: 0, z: 0, w: .pi / 2.0)
        
        let 公轉軌道 = SCNTube(innerRadius: 尺寸半徑, outerRadius: 尺寸半徑 + 0.01, height: 0.01)
        let 軌道節點 = SCNNode(geometry: 公轉軌道)
        
        let 座標原點 = SCNNode(geometry: SCNSphere(radius: 0.05))
        座標原點.addChildNode(x軸節點)
        座標原點.addChildNode(y軸節點)
        座標原點.addChildNode(z軸節點)
        座標原點.addChildNode(軌道節點)
        
        return 座標原點
    }
    
    var body: some View {
        SceneView(scene: 外太空, options: [.allowsCameraControl])
            .onChange(of: 時間) { _ in
                圓心角 += 0.2
                if 圓心角 > 360.0 { 圓心角 = 0.0 }
                let 地球節點 = 外太空.rootNode.childNode(withName: "地球軸心", recursively: true)
                地球節點?.position.x = Float(公轉半徑) * sin(圓心角 / 180.0 * .pi)
                地球節點?.position.z = Float(公轉半徑) * cos(圓心角 / 180.0 * .pi)
            }
            .task {
                if let myURL = URL(string: 太陽全景圖網址) {
                    do {
                        let (內容, 回應碼) = try await URLSession.shared.data(from: myURL)
                        if let 太陽全景圖 = UIImage(data: 內容) {
                            let 太陽材質 = SCNMaterial()
                            太陽材質.diffuse.contents = 太陽全景圖
                            let 太陽節點 = 外太空.rootNode.childNode(withName: "太陽", recursively: true)
                            太陽節點?.geometry?.materials = [太陽材質]
                        }
                    } catch {
                        print("無法下載圖片")
                    }
                }
            }
            .onAppear {                                                
                let 太陽 = SCNSphere(radius: 太陽半徑)
                let 太陽節點 = SCNNode(geometry: 太陽)
                太陽節點.name = "太陽"    // 動態更新貼圖材質
 
                let 地球材質 = SCNMaterial()
                地球材質.diffuse.contents = UIImage(named: "earth.jpg")
                let 地球 = SCNSphere(radius: 地球半徑)
                地球.materials = [地球材質]
                let 地球節點 = SCNNode(geometry: 地球)
                地球節點.rotation = SCNVector4(0, 1, 0, 0)

                let 自轉動畫 = CABasicAnimation(keyPath: "rotation.w")
                自轉動畫.toValue = 2.0 * .pi
                自轉動畫.duration = 自轉時間
                自轉動畫.repeatCount = .infinity
                地球節點.addAnimation(自轉動畫, forKey: nil)

                let 傾斜度: Float = -23.5 / 180.0 * .pi
                let 地球軸心 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 3)
                let 地軸節點 = SCNNode(geometry: 地球軸心)
                地軸節點.name = "地球軸心"    // 動態計算座標位置
                地軸節點.position = SCNVector3(0, 0, 公轉半徑)
                地軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: 傾斜度)
                
                地軸節點.addChildNode(地球節點)

                外太空.rootNode.addChildNode(空間座標系(尺寸半徑: 公轉半徑))
                外太空.rootNode.addChildNode(地軸節點)
                外太空.rootNode.addChildNode(太陽節點)
                外太空.background.contents = UIColor.darkGray
            }
    }
}

struct 時間軸: View {
    var body: some View {
        TimelineView(.periodic(from: Date(), by: 0.03)) { 時間參數 in
            地球公轉(時間: 時間參數.date)
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(時間軸())

1. 用內文提到的方法1（加個太陽核心）做出地球公轉動畫。
   
2. 從其他網站找太陽全景圖的替換網址，如Solar System Scope
   
3. 將空間座標系的X/Y/Z軸加上箭頭。
   
4. 試著將“@State var 外太空 = SCNScene()”改回“let 外太空 = SCNScene()”，看看有何變化，想一想為什麼會這樣？

let 左擺 = SCNAction.rotateBy(x: 0, y: 0, z: .pi / 2, duration: 60.0 / 節拍速度)
let 右擺 = 左擺.reversed()
let 來回擺動 = SCNAction.sequence([左擺, 右擺])
搖桿節點.runAction(.repeatForever(來回擺動))

// 6-3a 節拍器(Metronome) SCNAction
// Created by Heman, 2024/03/23
import SceneKit
import SwiftUI

struct 節拍器: View {
    let 音樂教室 = SCNScene()
    let 節拍速度 = 72.0    // tempo in bpm (beats per minute)
    
    func 空間座標系(尺寸半徑: CGFloat) -> SCNNode {
        let x軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let x軸節點 = SCNNode(geometry: x軸)
        x軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: .pi / -2.0)
        
        let y軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let y軸節點 = SCNNode(geometry: y軸)
        
        let z軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let z軸節點 = SCNNode(geometry: z軸)
        z軸節點.rotation = SCNVector4(x: 1, y: 0, z: 0, w: .pi / 2.0)
        
        let 座標原點 = SCNNode(geometry: SCNSphere(radius: 0.05))
        座標原點.addChildNode(x軸節點)
        座標原點.addChildNode(y軸節點)
        座標原點.addChildNode(z軸節點)
        
        return 座標原點
    }

    var body: some View {
        SceneView(scene: 音樂教室, options: [.allowsCameraControl, .autoenablesDefaultLighting])
            .onAppear {                
                let 搖桿 = SCNBox(width: 0.1, height: 2.0, length: 0.05, chamferRadius: 0.01)
                let 搖桿節點 = SCNNode(geometry: 搖桿)
                搖桿節點.pivot = SCNMatrix4MakeTranslation(0, -1.0, 0)
                搖桿節點.rotation = SCNVector4(0, 0, 1, .pi / -4.0)
                
                let 左擺 = SCNAction.rotateBy(x: 0, y: 0, z: .pi / 2, duration: 60.0 / 節拍速度)
                let 右擺 = 左擺.reversed()
                let 來回擺動 = SCNAction.sequence([左擺, 右擺])
                搖桿節點.runAction(.repeatForever(來回擺動))
                
                let 基座 = SCNCone(topRadius: 0.2, bottomRadius: 0.5, height: 2.0)
                let 基座節點 = SCNNode(geometry: 基座)
                基座節點.position.y = 0.5

                音樂教室.rootNode.addChildNode(空間座標系(尺寸半徑: 2.0))
                音樂教室.rootNode.addChildNode(基座節點)
                音樂教室.rootNode.addChildNode(搖桿節點)
                音樂教室.background.contents = UIColor.green
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(節拍器())

1. 日常用語中，動作組合成動畫比較合理，不過Apple的軟體框架中，最基本的動作就稱為 Animation，Action 是一或多個 Animation 的組合。
   
2. 在Adobe Mixamo 網站，則稱連續動作為 Animation，可見 Animation 和 Action 並沒有明確區別，在不同語境可能有不同含意。
   
3. 通常物件的方法或屬性，都是必須先產出實例（”Instance”，或稱個體），才能取用。類型方法(Type method)與類型屬性(Type property)則不需要先產出實例，就能直接取用。
   
4. 類型方法通常也是用來產出新的物件實例，例如第4單元的 Animation.linear()、本節的 SCNAction.rotateBy()等；而一般實例的方法，則用來操作或改變個體屬性，如節點.addAnimation()。
   
5. 類型屬性則是整個物件類型通用，預設好的屬性值，不隨著個體實例而變，例如 Color.red、UIColor.green、URLSession.shared 等。

// 6-3 補充(3)：變換矩陣
// Created by Heman, 2024/03/27
import SwiftUI
import SceneKit

struct 變換矩陣: View {
    let 空間 = SCNScene()
    @State var 變形 = false
    
    var body: some View {
        SceneView(scene: 空間, options: [.allowsCameraControl])
            .onTapGesture {
                變形.toggle()
                let 地球 = 空間.rootNode.childNode(withName: "地球", recursively: true)
                地球?.scale.x = 變形 ? 2.0 : 1.0
                print(地球?.transform)
            }
            .onAppear {
                let 地球 = SCNSphere(radius: 1.0)
                let 地球材質 = SCNMaterial()
                地球材質.diffuse.contents = UIImage(named: "earth.jpg")
                地球.materials = [地球材質]
                let 地球節點 = SCNNode(geometry: 地球)
                地球節點.name = "地球"
                print(地球節點.transform)
                
                空間.rootNode.addChildNode(地球節點)
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(變換矩陣())

1. 將上一節寫的「空間座標系()」加進來，以便觀察位置變化。
   
2. 直接變更 transform 參數，觀察 position/rotation/scale 是否改變？例如，在 .onTapGesture { } 加入：
   

       地球?.transform.m42 = 變形 ? 1.0 : 0.0
       print(地球?.position)

   
   
3. 如何知道 transform 變換矩陣的16個參數如何對應到 position/rotation/scale 呢？

節點.position = SCNVector3(dx, dy, dz)

節點.scale = SCNVector3(a, b, c)

節點.rotation = SCNVector4(1, 0, 0, 𝜃)

節點.rotation = SCNVector4(0, 1, 0, 𝜃)

節點.rotation = SCNVector4(0, 0, 1, 𝜃)

// 6-3 補充(4)：變換矩陣
// Revised by Heman, 2024/03/31
import SwiftUI
import SceneKit

struct 顯示幾何模型: View {
    let 幾何場景 = SCNScene()
    
    func 空間座標系(尺寸半徑: CGFloat) -> SCNNode {
        let x軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let x軸節點 = SCNNode(geometry: x軸)
        x軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: .pi / -2.0)
        
        let y軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let y軸節點 = SCNNode(geometry: y軸)
        
        let z軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let z軸節點 = SCNNode(geometry: z軸)
        z軸節點.rotation = SCNVector4(x: 1, y: 0, z: 0, w: .pi / 2.0)
        
        let 座標原點 = SCNNode(geometry: SCNSphere(radius: 0.05))
        座標原點.addChildNode(x軸節點)
        座標原點.addChildNode(y軸節點)
        座標原點.addChildNode(z軸節點)
        
        return 座標原點
    }

    var body: some View {
        SceneView(scene: 幾何場景, options: [.autoenablesDefaultLighting, .allowsCameraControl])
            .onAppear {
                let 球體 = SCNSphere(radius: 0.1)
                let 球體節點 = SCNNode(geometry: 球體)
                球體節點.position.y = 0.618 + 0.1
                
                let 三角錐 = SCNPyramid(width: 1.0, height: 0.618, length: 1.0)
                let 三角錐節點 = SCNNode(geometry: 三角錐)
                let 旋轉 = SCNAction.rotateBy(x: .pi/3, y: .pi * 6.0, z: 0, duration: 5.0)
                let 縮小 = SCNAction.scale(by: 0.1, duration: 5.0)
                let 位移 = SCNAction.move(by: SCNVector3(1, 1, 0), duration: 5.0)
                let 同時動作 = SCNAction.group([旋轉, 縮小, 位移])
                let 反覆動作 = SCNAction.sequence([同時動作, 同時動作.reversed(), .wait(duration: 1)])
                三角錐節點.runAction(.repeatForever(反覆動作))

                三角錐節點.addChildNode(球體節點)
                三角錐節點.addChildNode(空間座標系(尺寸半徑: 1.0))
                幾何場景.rootNode.addChildNode(三角錐節點)
                幾何場景.rootNode.addChildNode(空間座標系(尺寸半徑: 1.0))
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(顯示幾何模型())

1. 不要小看變換矩陣，能夠改變空間的力量都非常強大，根據愛因斯坦的相對論，黑洞由於具有超大重力，導致附近時空（4D座標空間）會受到扭曲。這樣看來，黑洞像不像一個變換矩陣？
   
2. 有興趣的同學，可以看一下這篇討論黑洞的文章，其中提到了4階矩陣。在天文物理學中，用來描述時空的主要是張量與曲率，而不是位置與旋轉角度。
   
3. 如果仔細思考範例程式的每個步驟，會發現執行過程中，三角錐的長(1.0)、寬(1.0)、高(0.618)，屬性本身並沒有任何改變。雖然我們看到位置、角度、大小等變化，但本質上，變換矩陣從未改變節點內的3D物件屬性，改變的是其所處的空間（座標系統）。
   
4. 我們在螢幕上所看到的，是節點座標投射到上層（父節點）座標空間，一層一層往上投射，最後透過根節點投影到（2D的）螢幕座標。

// 6-3a 節拍器(SCNAction) Metronome
搖桿節點.pivot = SCNMatrix4MakeTranslation(0, -1.0, 0)

搖桿節點.pivot.m42 = -1.0

// 6-3b 節點的樞紐(pivot)
// Revised by Heman, 2024/04/02
import SceneKit
import SwiftUI

struct 節拍器v2: View {
    let 音樂教室 = SCNScene()
    let 節拍速度 = 72.0    // tempo in bpm (beats per minute)
    @State var 變更樞紐 = false
    
    func 空間座標系(尺寸半徑: CGFloat) -> SCNNode {
        let x軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let x軸節點 = SCNNode(geometry: x軸)
        x軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: .pi / -2.0)
        
        let y軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let y軸節點 = SCNNode(geometry: y軸)
        
        let z軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let z軸節點 = SCNNode(geometry: z軸)
        z軸節點.rotation = SCNVector4(x: 1, y: 0, z: 0, w: .pi / 2.0)
        
        let 座標原點 = SCNNode(geometry: SCNSphere(radius: 0.05))
        座標原點.addChildNode(x軸節點)
        座標原點.addChildNode(y軸節點)
        座標原點.addChildNode(z軸節點)
        
        return 座標原點
    }

    var body: some View {
        SceneView(scene: 音樂教室, options: [.allowsCameraControl, .autoenablesDefaultLighting])
            .onTapGesture {
                變更樞紐.toggle()
                let 搖桿 = 音樂教室.rootNode.childNode(withName: "搖桿", recursively: true)
                搖桿?.pivot = 變更樞紐 ? SCNMatrix4MakeTranslation(0, -1.0, 0) : SCNMatrix4Identity
                print(搖桿?.transform)
                print(搖桿?.pivot)
            }
            .onAppear {                
                let 搖桿 = SCNBox(width: 0.1, height: 2.0, length: 0.05, chamferRadius: 0.01)
                let 搖桿節點 = SCNNode(geometry: 搖桿)
                搖桿節點.name = "搖桿"
                // 搖桿節點.pivot = SCNMatrix4MakeTranslation(0, -1.0, 0)
                搖桿節點.rotation = SCNVector4(0, 0, 1, .pi / -4.0)

                let 左擺 = SCNAction.rotateBy(x: 0, y: 0, z: .pi / 2, duration: 60.0 / 節拍速度)
                let 右擺 = 左擺.reversed()
                let 來回擺動 = SCNAction.sequence([左擺, 右擺])
                搖桿節點.runAction(.repeatForever(來回擺動))

                let 基座 = SCNCone(topRadius: 0.2, bottomRadius: 0.5, height: 2.0)
                基座.materials.first?.fillMode = .lines
                let 基座節點 = SCNNode(geometry: 基座)
                基座節點.position.y = 0.5

                音樂教室.rootNode.addChildNode(空間座標系(尺寸半徑: 2.0))
                音樂教室.rootNode.addChildNode(基座節點)
                音樂教室.rootNode.addChildNode(搖桿節點)
                // 音樂教室.background.contents = UIColor.green
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(節拍器v2())

基座.materials.first?.fillMode = .lines

1. 大家有沒有注意到3D模型的材質屬性一直是複數(.materials)，內容為材質陣列，參考6-1c屬性結構圖。為什麼是複數而非單數呢？畢竟我們在目前為止，都只用到一種材質。
   
2. 實際上，如果模型包含多個元件 (elements，或稱元素、單元，類型為SCNGeometryElement)，就可用到多種材質。如範例中，搖桿是立方體(SCNBox)，外形由300個三角形構成，最多可分為6個元件，每個元件代表一面，若提供6種材質，則每一面可呈現不同外觀；基座是圓錐體(SCNCone)，由192個三角形構成，包含3個元件（頂面、側面、底面）。
   
3. 【作業】試著修改補充(4)範例程式，令三角錐的樞紐(pivot)往下位移1公尺，觀察結果與原來有何不同。
   

   // 6-3 補充(4)：變換矩陣
   let 三角錐節點 = SCNNode(geometry: 三角錐)
   三角錐節點.pivot = SCNMatrix4MakeTranslation(0, -1.0, 0) //插入這行

   
   
4. 【作業】請用 pivot 改寫第2課6-2c地球公轉的範例程式。

let 水滴聲 = SCNAudioSource(named: "waterdrop.m4a")

let 聲響 = SCNAction.playAudio(水滴聲, waitForCompletion: false)
let 來回擺動 = SCNAction.sequence([左擺, 聲響, 右擺, 聲響])
搖桿節點.runAction(.repeatForever(來回擺動))

.onTapGesture {
    let 搖桿節點 = 音樂教室.rootNode.childNode(withName: "搖桿", recursively: true)
    搖桿節點?.isPaused.toggle()
}

// 6-3c 節拍器v3 SCNAction.playAudio()
// Created by Heman, 2024/04/05
// waterdrop.m4a: 先下載mp3音效，再用Quicktime Player剪輯
// 下載網址: https://pixabay.com/sound-effects/sound-of-a-drop-of-water-131023/
import SceneKit
import SwiftUI

struct 節拍器v3: View {
    let 音樂教室 = SCNScene()
    let 節拍速度 = 90.0    // tempo in bpm (beats per minute)
    
    func 空間座標系(尺寸半徑: CGFloat) -> SCNNode {
        let x軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let x軸節點 = SCNNode(geometry: x軸)
        x軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: .pi / -2.0)
        
        let y軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let y軸節點 = SCNNode(geometry: y軸)
        
        let z軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let z軸節點 = SCNNode(geometry: z軸)
        z軸節點.rotation = SCNVector4(x: 1, y: 0, z: 0, w: .pi / 2.0)
        
        let 座標原點 = SCNNode(geometry: SCNSphere(radius: 0.05))
        座標原點.addChildNode(x軸節點)
        座標原點.addChildNode(y軸節點)
        座標原點.addChildNode(z軸節點)
        
        return 座標原點
    }

    var body: some View {
        SceneView(scene: 音樂教室, options: [.allowsCameraControl, .autoenablesDefaultLighting])
            .onTapGesture {
                let 搖桿節點 = 音樂教室.rootNode.childNode(withName: "搖桿", recursively: true)
                搖桿節點?.isPaused.toggle()
            }
            .onAppear {
                let 搖桿 = SCNBox(width: 0.1, height: 2.0, length: 0.05, chamferRadius: 0.01)
                let 搖桿節點 = SCNNode(geometry: 搖桿)
                搖桿節點.name = "搖桿"
                搖桿節點.pivot = SCNMatrix4MakeTranslation(0, -1.0, 0)
                搖桿節點.rotation = SCNVector4(0, 0, 1, .pi / -4.0)
                
                let 左擺 = SCNAction.rotateBy(x: 0, y: 0, z: .pi / 2, duration: 60.0 / 節拍速度)
                let 右擺 = 左擺.reversed()
                if let 水滴聲 = SCNAudioSource(named: "waterdrop.m4a") {
                    let 聲響 = SCNAction.playAudio(水滴聲, waitForCompletion: false)
                    let 來回擺動 = SCNAction.sequence([左擺, 聲響, 右擺, 聲響])
                    搖桿節點.runAction(.repeatForever(來回擺動))
                } else {
                    let 來回擺動 = SCNAction.sequence([左擺, 右擺])
                    搖桿節點.runAction(.repeatForever(來回擺動))
                }

                let 基座 = SCNCone(topRadius: 0.2, bottomRadius: 0.5, height: 2.0)
                基座.materials.first?.fillMode = .lines
                let 基座節點 = SCNNode(geometry: 基座)
                基座節點.position.y = 0.5

                音樂教室.rootNode.addChildNode(空間座標系(尺寸半徑: 2.0))
                音樂教室.rootNode.addChildNode(基座節點)
                音樂教室.rootNode.addChildNode(搖桿節點)
                音樂教室.background.contents = UIColor.green
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(節拍器v3())

1. playAudio 播放聲音應該不需要取得授權才對，但在 macOS 上會跳出請求麥克風授權畫面（iPadOS不會），在官方文件中找不到解釋，雖然不影響執行結果，卻難免影響使用體驗。
   
2. 【作業】寫一個SwiftUI控制器（如Slider或手勢），控制節拍器的速度。

節點.physicsBody = .dynamic()

1. .dynamic() 動態本體：參與碰撞，具有質量的物件（不論大小，預設值均為1Kg），會受外力影響
   
2. .static() 靜態本體：參與碰撞，不具質量，不受外力影響，固定或可移動的物件（如地面、牆壁、桌面等）
   
3. .kinematic() 活動本體：參與碰撞，不具質量，不受外力影響，但可自主活動的物件（如人物、機關、門窗等）

// 6-4a 物理模擬 physicsBody
// Created by Heman, 2024/04/09
import SceneKit
import SwiftUI

struct 物理模擬: View {
    let 物理教室 = SCNScene()
    
    func 空間座標系(尺寸半徑: CGFloat) -> SCNNode {
        let x軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let x軸節點 = SCNNode(geometry: x軸)
        x軸節點.rotation = SCNVector4(x: 0, y: 0, z: 1, w: .pi / -2.0)
        
        let y軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let y軸節點 = SCNNode(geometry: y軸)
        
        let z軸 = SCNTube(innerRadius: 0, outerRadius: 0.01, height: 尺寸半徑 * 2.0)
        let z軸節點 = SCNNode(geometry: z軸)
        z軸節點.rotation = SCNVector4(x: 1, y: 0, z: 0, w: .pi / 2.0)
        
        let 座標原點 = SCNNode(geometry: SCNSphere(radius: 0.02))
        座標原點.addChildNode(x軸節點)
        座標原點.addChildNode(y軸節點)
        座標原點.addChildNode(z軸節點)
        
        return 座標原點
    }
    
    var body: some View {
        SceneView(scene: 物理教室, options: [.allowsCameraControl, .autoenablesDefaultLighting])
            .onTapGesture {
                let 小球節點 = 物理教室.rootNode.childNode(withName: "小球", recursively: true)
                小球節點?.physicsBody = .dynamic()
            }
            .onAppear {                                
                let 小球 = SCNSphere(radius: 0.05)
                let 小球節點 = SCNNode(geometry: 小球)
                小球節點.name = "小球"
                小球節點.position = SCNVector3(0.1, 0.5, 0)
//                小球節點.physicsBody = .dynamic()

                let 三角錐 = SCNPyramid(width: 1.6, height: 0.2, length: 1.0)
                let 三角錐節點 = SCNNode(geometry: 三角錐)
                三角錐節點.position.y = -0.8
                三角錐節點.physicsBody = .kinematic()
                
                let 轉動 = SCNAction.rotateBy(x: 0, y: .pi * 2.0, z: 0, duration: 10)
                三角錐節點.runAction(.repeatForever(轉動))
                
                let 地面節點 = SCNNode(geometry: SCNFloor())
                地面節點.position.y = -1.0
                地面節點.physicsBody = .static()
                
                物理教室.rootNode.addChildNode(空間座標系(尺寸半徑: 1.0))
                物理教室.rootNode.addChildNode(小球節點)
                物理教室.rootNode.addChildNode(三角錐節點)
                物理教室.rootNode.addChildNode(地面節點)
                物理教室.background.contents = UIColor.green
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(物理模擬())

1. 牛頓之前的古典力學細分為靜力學(statics)、動力學(dynamics)以及運動學(kinematics)，三種物理本體的名稱由此而來。
   
2. 三種物理本體中，活動(kinematic)本體比較不容易理解，什麼時候該用活動本體呢？基本是針對運動過程都由程式邏輯所控制，而非由物理模擬的外力所推動，例如瑪利歐遊戲的主角、可以開關的門窗等。
   
3. 為什麼重複輕觸螢幕時，小球會一再從原處掉下來呢？因為 .dynamic() 其實是一個類型方法，每次呼叫就會產出一個新的物理本體，以節點的變換矩陣所得結果當做初始位置，開始進行物理模擬，因為物理模擬不會改變變換矩陣，因此每次都回到原來位置。
   
4. 在動畫、動作以及物理模擬之下，SceneKit 節點每秒會產出60幀畫面(預設60 fps)，中間會經過哪些步驟呢？若要對個別畫面額外處理，該如何做呢？這對於程式設計師相當重要，請參考原廠SCNSceneRendererDelegate文件。
   
5. 【作業】靜態本體的地面能否執行 runAction 移動呢？若在最後加上一行程式會如何：

   // 地面節點.physicsBody = .static() 之後：
   地面節點.runAction(.moveBy(x: 0, y: 1, z: 0, duration: 10))

   
   
6. 【作業】在 .onTapGesture { } 中加入以下兩行，輕觸螢幕多次，觀察主控台輸出結果：

   // 小球節點?.physicsBody = .dynamic() 之後：
   print("變換矩陣", 小球節點?.transform)
   print("物理模擬", 小球節點?.presentation.transform)

   
   
7. 【挑戰題】修改範例程式，做一個各自旋轉的五層塔，從上面一次掉落50顆小球，觀察其運動軌跡是否有不自然之處。