如何在Volumetric视图中定位2D对象？解决平移变换失效问题

你的问题出在变换顺序错误以及坐标系理解偏差，导致平移效果未按预期生效，以下是具体解决方案：

核心问题分析 #

SwiftUI的3D修饰符按代码书写顺序叠加生效：你先对视图做Y轴平移，再绕X轴旋转90度。这意味着平移是在旋转前的垂直坐标系中执行的，旋转后视图躺平，原来的Y轴平移方向变成了视图自身的垂直方向（而非Volumetric空间的前后方向），所以看起来平移完全无效。

另外，绕X轴旋转90度后，视图的本地坐标系会发生变化：

• 原Y轴（2D视图的垂直方向）→ Volumetric空间的Z轴（深度/前后方向）
• 原Z轴（2D视图的深度方向）→ Volumetric空间的-Y轴（垂直向下方向）

解决方案1：调整变换顺序（先旋转后平移） #

把旋转修饰符放在平移之前，让平移在旋转后的本地坐标系中生效，同时将原来的Y轴平移改为Z轴平移：

var body: some View {
    map.mapStyle(.standard(elevation: .realistic))
        .rotation3DEffect(.degrees(90), axis: .x) // 先旋转切换坐标系
        .transform3DEffect(AffineTransform3D(translation: Vector3D(z: -0.99))) // 改为Z轴平移（对应Volumetric前后）
        .frame(depth: 500, alignment: .front)
    
    Button(action: {
        print("test")
    }) {
        Label("Immersive Test", systemImage: "4.circle").labelStyle(.titleOnly)
    }
    .rotation3DEffect(.degrees(90), axis: .x)
    .transform3DEffect(AffineTransform3D(translation: Vector3D(z: -10.0))) // 同样改为Z轴平移
    .frame(depth: 10, alignment: .front)
}

解决方案2：使用更直观的offset3D #

offset3D专门用于3D空间偏移，直接在视图本地坐标系生效，无需手动计算轴的对应关系，代码更简洁：

var body: some View {
    map.mapStyle(.standard(elevation: .realistic))
        .rotation3DEffect(.degrees(90), axis: .x)
        .offset3D(z: -0.99) // 直接在旋转后的坐标系中偏移深度方向
        .frame(depth: 500, alignment: .front)
    
    Button(action: {
        print("test")
    }) {
        Label("Immersive Test", systemImage: "4.circle").labelStyle(.titleOnly)
    }
    .rotation3DEffect(.degrees(90), axis: .x)
    .offset3D(z: -10.0)
    .frame(depth: 10, alignment: .front)
}

进阶技巧：用3D容器布局替代手动变换 #

如果要排列多个对象，建议使用VStack3D/HStack3D等3D容器视图，配合spacing和offset3D实现规整布局，比逐个手动设置变换更可靠：

var body: some View {
    VStack3D(alignment: .center, spacing: 15) {
        map.mapStyle(.standard(elevation: .realistic))
            .rotation3DEffect(.degrees(90), axis: .x)
            .frame(depth: 500)
        
        Button(action: {
            print("test")
        }) {
            Label("Immersive Test", systemImage: "4.circle").labelStyle(.titleOnly)
        }
        .rotation3DEffect(.degrees(90), axis: .x)
        .frame(depth: 10)
    }
    .offset3D(z: -5.0) // 整个容器统一偏移深度位置
}

额外提示 #

如果需要精准的绝对位置定位，可使用position3D修饰符直接设置视图在Volumetric空间中的坐标：

.position3D(x: 0, y: 1, z: -8)

内容的提问来源于stack exchange，提问作者john elemans