如何使 SceneView 的背景透明? [英] How can I make SceneView's background transparent?

问题描述

我想打开一个 3D 模型并使其背景透明，以便我可以看到 SceneView 后面的 UI.我试过这段代码，但sceneView变成白色，不透明.

<预><代码>结构模型视图:查看{var主体:一些视图{ZStack {文字(文字背后的文字背后的文字")场景视图(场景:{ () ->SCNS场景让场景 = SCNScene()scene.background.contents = UIColor.clear回归场景}(),pointOfView: { () ->SCN节点输入让 cameraNode = SCNNode()cameraNode.camera = SCNCamera()cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)返回相机节点}(),选项: [.allowsCameraControl,.temporalAntialiasingEnabled,])}}}

我使用 XCode 12.5 和 iPhone 8.

编辑 1:

感谢下面的评论，我决定尝试新方法，但它们仍然不起作用.

方法#1

首先，我尝试通过 UIViewRepresentable 使用 SCNView 创建一个 MySceneView:

struct MySceneView: UIViewRepresentable {typealias UIViewType = SCNViewtypealias Context = UIViewRepresentableContextfunc updateUIView(_ uiView: UIViewType, context: Context) {}func makeUIView(context: Context) ->UIViewType {让视图 = SCNView()view.allowsCameraControl = trueview.isTemporalAntialiasingEnabled = trueview.autoenablesDefaultLighting = trueview.scene = MySceneView.scene返回视图}静态让场景:SCNScene = {让scene = SCNScene(命名为:art.scnassets/man.obj")！scene.background.contents = UIColor.clear让 cameraNode = SCNNode()cameraNode.camera = SCNCamera()cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)scene.rootNode.addChildNode(cameraNode)回归场景}()}

方法#2我尝试使用 SpriteView，代码如下:

 ZStack {文字(文字背后的文字背后的文字")SpriteView(scene: { () -> SKScene in让场景 = SKScene()scene.backgroundColor = UIColor.clear让模型 = SK3DNode(viewportSize: .init(width: 200, height: 200))model.scnScene = MySceneView.scene场景.addChild(模型)回归场景}(), 选项: [.allowsTransparency])}

解决方案

感谢 George_E，您对 SpriteKit 的想法非常完美.代码如下:

SpriteView(scene: { () -> SKScene in让场景 = SKScene()scene.backgroundColor = UIColor.clear让模型 = SK3DNode(viewportSize: .init(width: 200, height: 200))模型.scnScene = {让scene = SCNScene(命名为:art.scnassets/man.obj")！scene.background.contents = UIColor.clear让 cameraNode = SCNNode()cameraNode.camera = SCNCamera()cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)scene.rootNode.addChildNode(cameraNode)回归场景}()场景.addChild(模型)回归场景}(), 选项: [.allowsTransparency])

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

解决方案

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

这篇关于如何使 SceneView 的背景透明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！