如何在 SwiftUI 中使 SceneView 的背景清晰？答案

【问题标题】：How to make SceneView's background clear in SwiftUI?如何在 SwiftUI 中使 SceneView 的背景清晰？
【发布时间】：2022-08-18 15:31:58
【问题描述】：

我在 SwiftUI 中显示一个 3D 对象，但在使对象的背景清晰时出现问题。我已经搜索并没有找到任何解决方案。有什么解决办法吗？

private var scene: SCNScene? {
    SCNScene(named: \"Globe.scnassets/sphere.scn\")
}
    
private var cameraNode: SCNNode? {
    let cameraNode = SCNNode()
    cameraNode.camera = SCNCamera()
    cameraNode.position = SCNVector3(x: 0, y: 0, z: 5)
    return cameraNode
}

var body: some View {
    SceneView(scene: scene,
        pointOfView: cameraNode,
            options: [.allowsCameraControl, .autoenablesDefaultLighting])
}

你试过这个吗？ sceneView.backgroundColor = UIColor.clear
@ZAY 我的问题是关于 SwiftUI

标签： swift swiftui scenekit

【解决方案1】：

我通过 SceneKit 编辑器找到了一个解决方案，如果您想将图像显示为背景，您可以通过以下方式手动完成：

Scene Inspector -> Background and lighting -> Background

并将图像设置为背景：

【讨论】：

【解决方案2】：

至少有 3 种方法可以在 SwiftUI 的 SceneView 中以编程方式更改 BG。

默认白色背景

更改 SCNScene 的背景颜色

import SwiftUI
import SceneKit

struct ContentView: View {
    
    var scene = SCNScene(named: "model.usdz")
    var options: SceneView.Options = [.autoenablesDefaultLighting,
                                      .allowsCameraControl ]

    var body: some View {
        ZStack {
            SceneView(scene: scene, options: options)
                .ignoresSafeArea()
            let _ = scene?.background.contents = UIColor.black
        }
    }
}

使用带纹理的双面 SCNGeometry

struct ContentView: View {
    
    var scene = SCNScene(named: "model.usdz")
    var options: SceneView.Options = [.autoenablesDefaultLighting,
                                      .allowsCameraControl ]
    let node = SCNNode(geometry: SCNSphere(radius: 500.0))
    let img = UIImage(named: "image.jpg")

    var body: some View {
        ZStack {
            let _ = node.geometry?.firstMaterial?.diffuse.contents = img
            let _ = node.geometry?.firstMaterial?.isDoubleSided = true
            let _ = scene?.rootNode.addChildNode(node)

            SceneView(scene: scene, options: options)
                .ignoresSafeArea()
        }
    }
}

使用程序天空盒纹理

您可以将MDLSkyCubeTexture 用作background 和lightingEnvironment。

【讨论】：