Lab 065 – First look at the Manipulable modifier

A SwiftUI modifier that works just like Manipulation Component from RealityKit.

Overview

We already took a first look at Manipulation Component in RealityKit. SwiftUI has a similar feature, a modifier we can use on Model3D.

Model3D(named: "ToyCar", bundle: realityKitContentBundle)
  .manipulable() // default manipulation

Since this is a SwftUI modifier, I was wondering what would happen if I used it on a 2D view.

SomeCardView()
  .manipulable()

It worked, but with a caveat. When used on a view in a Window or Volume, I can pick up and manipulate the view. But when I drag it too far, the view gets clipped by the bounds of the Window/Volume.

It seems like Apple has done something extra to Model3D that they haven’t does to other SwiftUI views. I’d love to see them fix this. I think it could be useful to pick up a view and bring it closer to inspect it. I’ll file a Feedback on this and we’ll see if it gets addressed.

I’ll add this modifier to the Spatial SwiftUI series once I have a chance to work with it more.

Lab Code

struct Lab065: View {

    @State private var manipulationState = Manipulable.GestureState()
    var body: some View {
        VStack {

            // Manipulate a Model3D - intended use
            Model3D(named: "ToyCar", bundle: realityKitContentBundle)
                .manipulable()

            // Manipulate a 2D View - where they expecting this?
            HStack {
                Text("Hello Manipulable Modifier")
                    .font(.extraLargeTitle)
                    .padding()
            }
            .frame(width: 300, height: 200)
            .background(.black)
            .clipShape(.rect(cornerRadius: 12))
            .hoverEffect()
            .manipulable()

        }

    }
}

Download the Xcode project with this and many more labs from Step Into Vision.