Search code examples
swiftuiscenekit

How can I make SceneView's background transparent?


I want to open a 3D model and make its background transparent, so that I can see the UI behind the SceneView. I've tried this code, but sceneView becomes white, not transparent.


struct ModelView: View {
    var body: some View {
        ZStack {
            Text("Behind Text Behind Text Behind Text")
            SceneView(
                scene: { () -> SCNScene in
                    let scene = SCNScene()
                    scene.background.contents = UIColor.clear
                    return scene
                }(),
                pointOfView: { () -> SCNNode in
                    let cameraNode = SCNNode()
                    cameraNode.camera = SCNCamera()
                    cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)
                    return cameraNode
                }(),
                options: [
                    .allowsCameraControl,
                    .temporalAntialiasingEnabled,
                ]
            )
        }
    }
}

I use XCode 12.5 and IPhone 8.

EDIT 1:

Thanks to the comments below, I decided to try new approaches but they still don't work.

Approach #1

First, I tried to create a MySceneView using SCNView through UIViewRepresentable:

struct MySceneView: UIViewRepresentable {
    typealias UIViewType = SCNView
    typealias Context = UIViewRepresentableContext<MySceneView>

    func updateUIView(_ uiView: UIViewType, context: Context) {}
    func makeUIView(context: Context) -> UIViewType {
        let view = SCNView()
        view.allowsCameraControl = true
        view.isTemporalAntialiasingEnabled = true
        view.autoenablesDefaultLighting = true
        view.scene = MySceneView.scene
        return view
    }
    
    static let scene: SCNScene = {
        let scene = SCNScene(named: "art.scnassets/man.obj")!
        scene.background.contents = UIColor.clear
        let cameraNode = SCNNode()
        cameraNode.camera = SCNCamera()
        cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)
        scene.rootNode.addChildNode(cameraNode)
        return scene
    }()
}

Approach #2 I tried using SpriteView, here is the code:

        ZStack {
            Text("Behind Text Behind Text Behind Text")
            SpriteView(scene: { () -> SKScene in
                let scene = SKScene()
                scene.backgroundColor = UIColor.clear
                let model = SK3DNode(viewportSize: .init(width: 200, height: 200))
                model.scnScene = MySceneView.scene
                scene.addChild(model)
                return scene
            }(), options: [.allowsTransparency])
}

Solution

  • Update:

    A much simpler solution is to use UIViewRepresentable, create SCNView and set backgroundColor to clear

    Old:

    Thanks George_E, your idea with SpriteKit worked perfectly. Here is the code:

    SpriteView(scene: { () -> SKScene in
        let scene = SKScene()
        scene.backgroundColor = UIColor.clear
        let model = SK3DNode(viewportSize: .init(width: 200, height: 200))
        model.scnScene = {
            let scene = SCNScene(named: "art.scnassets/man.obj")!
            scene.background.contents = UIColor.clear
            let cameraNode = SCNNode()
            cameraNode.camera = SCNCamera()
            cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)
            scene.rootNode.addChildNode(cameraNode)
            return scene
        }()
        scene.addChild(model)
        return scene
    }(), options: [.allowsTransparency])