Search code examples
swiftswiftuiscenekit

How to make SceneView's background clear in SwiftUI?


I am showing a 3D object in SwiftUI, and I have a problem with making the object's background clear. I have searched and did not find any solution. Is there any solution for this?

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])
}

Solution

  • There are, at least, 3 ways to programmatically change a BG in SwiftUI's SceneView.

    Default white background

    enter image description here


    Changing SCNScene's background color

    enter image description here

    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
            }
        }
    }
    


    Using textured double-sided SCNGeometry

    enter image description here

    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()
            }
        }
    }
    


    Using Procedural Sky Box Texture

    You can use MDLSkyCubeTexture as background and lightingEnvironment.