SwiftUI: add SwiftUI Path to Scenekit Scene

Question

I'm trying to add add SwiftUI Path to a Scenekit Scene (as SCNShape).

I created: Scenekit View (image 1) SwiftUI Path (image 2)

Then I tried to call the SwiftUI Path, based on the approach bellow: Unable to create circle using UIBezierPath and SCNShape

   let scnpath = ContentView()
   let shape = SCNShape(path: scnpath)
   let shapeNode = SCNNode(geometry: shape)

Didn't work, as results bellow:

import SwiftUI
import SceneKit

struct ScenekitView : UIViewRepresentable {
    let scene = SCNScene(named: "art.scnassets/ship.scn")!


    func makeUIView(context: Context) -> SCNView {
        // create and add a camera to the scene
        let cameraNode = SCNNode()
        cameraNode.camera = SCNCamera()
        scene.rootNode.addChildNode(cameraNode)

        // add SwiftUI Path to Scenekit Scene

        let scnpath = ContentView()
        let shape = SCNShape(path: scnpath)
        let shapeNode = SCNNode(geometry: shape)

        // place the camera
        cameraNode.position = SCNVector3(x: 0, y: 0, z: 15)


        // retrieve the SCNView
        let scnView = SCNView()
        return scnView
    }

    func updateUIView(_ scnView: SCNView, context: Context) {
        scnView.scene = scene


    }
}

#if DEBUG
struct ScenekitView_Previews : PreviewProvider {
    static var previews: some View {
        ScenekitView()
        .colorScheme(.dark)
        .previewDevice("iPad Pro (12.9-inch) (3rd generation)")
    }
}
#endif

import SwiftUI

struct ContentView: View {
    var body: some View {

                Path { path in
                   path.move(to: CGPoint(x: 63.5, y: 98.38))
                           path.addLine(to: CGPoint(x: 920.14, y: 0))
                           path.addLine(to: CGPoint(x: 1094.24, y: 584.81))
                           path.addLine(to: CGPoint(x: 920.14, y: 938.58))
                           path.addLine(to: CGPoint(x: 498.47, y: 1279.73))
                           path.addLine(to: CGPoint(x: 211.79, y: 938.58))
                           path.addLine(to: CGPoint(x: 617.65, y: 584.81))
                           path.addLine(to: CGPoint(x: 735.35, y: 295.94))
                           path.addLine(to: CGPoint(x: 332.02, y: 349.08))
                           path.addLine(to: CGPoint(x: 0, y: 672.25))
                           path.addLine(to: CGPoint(x: 63.5, y: 98.38))
                }
                .stroke(Color.blue, lineWidth: 3)
            }
        }

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Really appreciate any help!

Cheers

Answer 1

Your SwiftUI ContentView is a View, which is struct, but SCNShape expected UIBezierPath which is a class. So if you want to join those different concepts, you have to do something like the following:

In ContentView

struct ContentView: View {
    let path =  Path { path in
       path.move(to: CGPoint(x: 63.5, y: 98.38))
               path.addLine(to: CGPoint(x: 920.14, y: 0))
               path.addLine(to: CGPoint(x: 1094.24, y: 584.81))
               path.addLine(to: CGPoint(x: 920.14, y: 938.58))
               path.addLine(to: CGPoint(x: 498.47, y: 1279.73))
               path.addLine(to: CGPoint(x: 211.79, y: 938.58))
               path.addLine(to: CGPoint(x: 617.65, y: 584.81))
               path.addLine(to: CGPoint(x: 735.35, y: 295.94))
               path.addLine(to: CGPoint(x: 332.02, y: 349.08))
               path.addLine(to: CGPoint(x: 0, y: 672.25))
               path.addLine(to: CGPoint(x: 63.5, y: 98.38))
    }

    var body: some View {
        self.path
            .stroke(Color.blue, lineWidth: 3)
    }
}

In ScenekitView

let scnpath = ContentView().path.cgPath
let shape = SCNShape(path: UIBezierPath(cgPath: scnpath), extrusionDepth: 1.0)