Meet RealityKit Trace

private struct Item: View {
    var module: Module

    // The corner radius of the item's hightlight when selected or hovering.
    let cornerRadius = 20.0

    var body: some View {
        NavigationLink(value: module) {
            VStack(alignment: .leading, spacing: 3) {
                Text(module.eyebrow)
                    .font(.titleHeading)
                    .foregroundStyle(.secondary)
                VStack(alignment: .leading, spacing: 7) {
                    Text(module.heading)
                        .font(.largeTitle)
                    Text(module.abstract)
                }
            }
            .padding(.horizontal, 5)
            .padding(.vertical, 20)
        }
        .buttonStyle(.bordered)
        .shadow(radius: 10)
        .buttonBorderShape(.roundedRectangle(radius: cornerRadius))
        .frame(minWidth: 150, maxWidth: 280)
    }
}

class EarthEntity: Entity {
    static func makeGlobe() -> EarthEntity {
        EarthEntity(earthModel: Entity.makeModel(
            name: "Earth",
            filename: "Globe",
            radius: 0.35,
            color: .blue)
        )
    }

    static func makeCloudyEarth() -> EarthEntity {
        let earthModel = Entity()
        earthModel.name = "Earth"

        Task {
            if let scene = await loadFromRealityComposerPro(
                named: WorldAssets.rootNodeName,
                fromSceneNamed: WorldAssets.sceneName
            ) {
                earthModel.addChild(scene)
            } else {
                fatalError("Unable to load earth model")
            }
        }

        return EarthEntity(earthModel: earthModel)
    }
}

struct Orbit: View {
    @EnvironmentObject private var model: ViewModel

    var body: some View {
        Earth(
            world: EarthEntity.makeGlobe(),
            earthConfiguration: model.orbitEarth,
            satelliteConfiguration: [model.orbitSatellite],
            moonConfiguration: model.orbitMoon,

            showSun: true,
            sunAngle: model.orbitSunAngle,

            animateUpdates: true
        )
        .place(
            initialPosition: Point3D([475, -1200.0, -1200.0]),
            useCustomGesture: model.useCustomGesture,
            handOffset: model.customGestureHandOffset,
            isCustomGestureAnimated: model.isCustomGestureAnimated,
            debugCustomGesture: model.debugCustomGesture,
            scale: $model.orbitEarth.scale)
    }
}

class ViewModel: ObservableObject {
    // MARK: - Navigation
    @Published var navigationPath: [Module] = []
    @Published var titleText: String = ""
    @Published var isTitleFinished: Bool = false
    var finalTitle: String = "Hello World"

    // MARK: - Globe
    @Published var globeEarthEntity: EarthEntity = .makeGlobe()

    @Published var isShowingGlobe: Bool = false
    @Published var globeEarth: EarthEntity.Configuration = .globeEarthDefault
    @Published var globeEarthOffset: SIMD3<Double> = [0, 0, 0]
    @Published var globePanelOffset: SIMD3<Double> = [0, -50, 30]

    @Published var showSatelliteButton: Bool = false
    @Published var isShowingSatellite: Bool = false

    // MARK: - Orbit
    @Published var orbitEarthEntity: EarthEntity = .makeGlobe()

    @Published var useCustomGesture: Bool = true
    @Published var customGestureHandOffset: SIMD3<Float> = [0, 0.21, -0.07]
    @Published var isCustomGestureAnimated: Bool = false
    @Published var debugCustomGesture: Bool = false

    @Published var orbitSatelliteScale: Float = 0.9
    @Published var orbitMoonScale: Float = 0.9
    @Published var orbitTelescopeScale: Float = 0.8
    @Published var orbitSatelliteZOffset: Double = 100
    @Published var orbitMoonZOffset: Double = 100
    @Published var orbitTelescopeZOffset: Double = 100

    @Published var isShowingOrbit: Bool = false
    @Published var orbitImmersionStyle: ImmersionStyle = .mixed
    @Published var orbitEarth: EarthEntity.Configuration = .orbitEarthDefault
    @Published var orbitSatellite: SatelliteEntity.Configuration = .orbitSatelliteDefault
    @Published var orbitMoon: SatelliteEntity.Configuration = .orbitMoonDefault

    @Published var orbitSunAngle: Angle = .degrees(150)
    var orbitSunAngleBinding: Binding<Float> {
        Binding<Float>(
            get: { Float(self.orbitSunAngle.degrees) },
            set: { self.orbitSunAngle = .degrees(Double($0)) }
        )
    }

    // MARK: - Solar System
    @Published var solarEarthEntity: EarthEntity = .makeCloudyEarth()

    @Published var isShowingSolar: Bool = false
    @Published var solarImmersionStyle: ImmersionStyle = .full
    @Published var solarEarth: EarthEntity.Configuration = .solarEarthDefault
    @Published var solarSatellite: SatelliteEntity.Configuration = .solarTelescopeDefault
    @Published var solarMoon: SatelliteEntity.Configuration = .solarMoonDefault

    @Published var solarSunDistance: Double = 700
    @Published var solarSunAngle: Angle = .degrees(280)
    @Published var solarSunSpotIntensity: Float = 10.5
    @Published var solarSunEmissionIntensity: Float = 10.5
    var solarSunPosition: SIMD3<Float> {
        [Float(solarSunDistance * sin(solarSunAngle.radians)),
         0,
         Float(solarSunDistance * cos(solarSunAngle.radians))]
    }
}

struct Orbit: View {
    @EnvironmentObject private var model: ViewModel

    var body: some View {
        Earth(
            world: model.globeEarthEntity,
            earthConfiguration: model.orbitEarth,
            satelliteConfiguration: [model.orbitSatellite],
            moonConfiguration: model.orbitMoon,

            showSun: true,
            sunAngle: model.orbitSunAngle,

            animateUpdates: true
        )
        .place(
            initialPosition: Point3D([475, -1200.0, -1200.0]),
            useCustomGesture: model.useCustomGesture,
            handOffset: model.customGestureHandOffset,
            isCustomGestureAnimated: model.isCustomGestureAnimated,
            debugCustomGesture: model.debugCustomGesture,
            scale: $model.orbitEarth.scale)
    }
}