SwiftUI: add SwiftUI Path to Scenekit Scene - scenekit

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)

Answer 2

try this:
1) you did not add your shapenode to the scene - so you won't see it
2) in the beginning, if you are not so well experienced with scenekit, you should not control the camera yourself...let this scenekit do for you, so i deleted your camera (because it needs the right position + angle so that you can really see something
3.) update the shape to your shape like asperi told you - this is one way you can go (i did not put this in my running example, because it would be too easy for you ;))
4.) result is as it is shown in picture
5.) i don't know whether you know: in the simulator you can only see scenekitviews if you tap the "play" button in the simulator...
struct ScenekitView : UIViewRepresentable {
let scene = SCNScene()
func makeUIView(context: Context) -> SCNView {
let uiView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
// 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 bezierPath = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 20, height: 20))
let shape = SCNShape(path: bezierPath, extrusionDepth: 50)
let shapeNode = SCNNode(geometry: shape)
// place the camera
cameraNode.position = SCNVector3(x: 0, y: 10, z: 25)
// scene.rootNode.addChildNode(cameraNode)
scene.rootNode.addChildNode(shapeNode)
// retrieve the SCNView
let scnView = SCNView()
scnView.scene = scene
scnView.backgroundColor = UIColor.blue
scnView.frame = CGRect(x: 0, y: 0, width: 500, height: 500)
return scnView
}
func updateUIView(_ scnView: SCNView, context: Context) {
print("test")
}
}

Answer 3

if you want to make it a bittle bit "sexier" you can add specular and a light...and you get:
code here:
struct ScenekitView : UIViewRepresentable {
let scene = SCNScene()
func makeUIView(context: Context) -> SCNView {
let uiView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
// create and add a camera to the scene
let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
let bezierPath = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 20, height: 20))
let shape = SCNShape(path: bezierPath, extrusionDepth: 40)
let shapeNode = SCNNode(geometry: shape)
let material = SCNMaterial()
material.diffuse.contents = UIColor.red
material.specular.contents = UIColor.white
let light = SCNLight()
light.type = .spot
cameraNode.light = light
shape.materials = [material]
shapeNode.rotation = SCNVector4(0.2, 0.3, 0.1, CGFloat.pi / 2)
// place the camera
cameraNode.position = SCNVector3(x: 5, y: 16, z: 85)
scene.rootNode.addChildNode(cameraNode)
scene.rootNode.addChildNode(shapeNode)
// retrieve the SCNView
let scnView = SCNView()
scnView.scene = scene
scnView.backgroundColor = UIColor.blue
scnView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
return scnView
}
func updateUIView(_ scnView: SCNView, context: Context) {
print("test")
}
}