How to make SceneView's background clear in SwiftUI?

Question

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

Did you try this? sceneView.backgroundColor = UIColor.clear – ZAY Jun 07 '22 at 11:46 — ZAY, Jun 07 '22 at 11:46
@ZAY My question is about SwiftUI – Mc.Lover Jun 07 '22 at 12:59 — Mc.Lover, Jun 07 '22 at 12:59

Andy Jazz · Accepted Answer · 2022-08-18T07:31:58.927

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

Default white background

Changing SCNScene's background color

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

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.

Thank you for the great answers but unfortunately, it doesn't work with light/dark mode. If I change the appearance it won't affect the background. — Mc.Lover, Aug 30 '22 at 08:38

Mc.Lover · Answer 2 · 2022-06-07T14:20:10.007

0

I have found a solution via SceneKit editor, if you want to show an image as background, you can manually do it by going to:

Scene Inspector -> Background and lighting -> Background

and set the image as background:

edited Jun 07 '22 at 14:20

answered Jun 07 '22 at 14:11

Mc.Lover

4,813
9
46
80

How to make SceneView's background clear in SwiftUI?

2 Answers2

Default white background

Changing SCNScene's background color

Using textured double-sided SCNGeometry

Using Procedural Sky Box Texture

Linked