How to Add 3D Shapes in Swift Ui

Draw shapes with SwiftUI

You have your drawing code in the makeNSView method. You want to put it in the draw method.

Add shape to sphere surface in SceneKit

If you want to map 2D content into the surface of a 3D SceneKit object, and have the 2D content be dynamic/interactive, one of the easiest solutions is to use SpriteKit for the 2D content. You can set your sphere's diffuse contents to an SKScene, and create/position/decorate SpriteKit nodes in that scene to arrange them on the face of the sphere.

If you want to have this content respond to tap events... Using hitTest in your SceneKit view gets you a SCNHitTestResult, and from that you can get texture coordinates for the hit point on the sphere. From texture coordinates you can convert to SKScene coordinates and spawn nodes, run actions, or whatever.

For further details, your best bet is probably Apple's SceneKitReel sample code project. This is the demo that introduced SceneKit for iOS at WWDC14. There's a "slide" in that demo where paint globs fly from the camera at a spinning torus and leave paint splashes where they hit it — the torus has a SpriteKit scene as its material, and the trick for leaving splashes on collisions is basically the same hit test -> texture coordinate -> SpriteKit coordinate approach outlined above.

Crop Rectangle view with shape SwiftUI

This is adapted from @Asperi's answer here: https://stackoverflow.com/a/59659733/560942

struct MaskShape : Shape {
    var inset : UIEdgeInsets
    
    func path(in rect: CGRect) -> Path {
        var shape = Rectangle().path(in: rect)
        shape.addPath(Ellipse().path(in: rect.inset(by: inset)))
        return shape
    }
}

struct ContentView : View {

    var body: some View {
        ZStack {
            Image("2")
                .resizable()
                .aspectRatio(contentMode: .fill)
            GeometryReader { geometry in
                Color.black.opacity(0.6)
                .mask(
                    MaskShape(
                        inset: UIEdgeInsets(top: geometry.size.height / 6,
                                          left: geometry.size.width / 6,
                                          bottom: geometry.size.height / 6,
                                          right: geometry.size.width / 6)
                    ).fill(style: FillStyle(eoFill: true))
                )
            }
        }
    }
}

The ZStack sets up the image and then a semi-transparent black overlay on the top. The overlay is cut away with a mask with eoFill set to true. I added some code to provide insets for the mask, as I'm assuming this might be a variably-sized mask.

Lots of minutiae that can be changed (like the image aspect ratio, the insets, etc), but it should get you started.

Custom cross-hatched background shape or view in SwiftUI

Thank to Cenk Bilgen for stripe pattern. Tweaked a bit so that you can rotate the hatch for any shape.

import SwiftUI
import CoreImage.CIFilterBuiltins

extension CGImage {

    static func generateStripePattern(
        colors: (UIColor, UIColor) = (.clear, .black),
        width: CGFloat = 6,
        ratio: CGFloat = 1) -> CGImage? {

    let context = CIContext()
    let stripes = CIFilter.stripesGenerator()
    stripes.color0 = CIColor(color: colors.0)
    stripes.color1 = CIColor(color: colors.1)
    stripes.width = Float(width)
    stripes.center = CGPoint(x: 1-width*ratio, y: 0)
    let size = CGSize(width: width, height: 1)

    guard
        let stripesImage = stripes.outputImage,
        let image = context.createCGImage(stripesImage, from: CGRect(origin: .zero, size: size))
    else { return nil }
    return image
  }
}

extension Shape {

    func stripes(angle: Double = 45) -> AnyView {
        guard
            let stripePattern = CGImage.generateStripePattern()
        else { return AnyView(self)}

        return AnyView(Rectangle().fill(ImagePaint(
            image: Image(decorative: stripePattern, scale: 1.0)))
        .scaleEffect(2)
        .rotationEffect(.degrees(angle))
        .clipShape(self))
    }
}

And usage

struct ContentView: View {

    var body: some View {
        VStack {
            Rectangle()
                .stripes(angle: 30)
            Circle().stripes()
            Capsule().stripes(angle: 90)
        }
    }
}

Output image link

RealityKit's equivalent of SceneKit's SCNShape

In RealityKit 2.0 you can generate a mesh using MeshDescriptor. There is no support for two-dimensional path at the moment, like it's implemented in SceneKit.

var descriptor = MeshDescriptor(name: "anything")
descriptor.primitives = .triangles(indices)
let mesh: MeshResource = try! .generate(from: [descriptor])

---

Related Topics