How to make SceneView's background clear in SwiftUI? - swift

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

Answer 1

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.

Answer 2

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: