Rounded button in realitykit using swiftui

Question

Created 2d

Replies 1

Boosts 0

Participants 2

I'm developing an ar app using reality kit and Arkit and i want to have my buttons in the same theme of vision os buttons thin , transparent background and round at corners.Following is the code i have written and need help with it

func createButton(label: String, position: SIMD3<Float>) -> ModelEntity {
        let button = ModelEntity(mesh: .generateBox(size: [0.3, 0.1, 0.02], cornerRadius: 10), materials: [SimpleMaterial(color: .blue, isMetallic: false)])
        button.generateCollisionShapes(recursive: true)
        button.position = position
        
        
        // Add button label
        let buttonText = ModelEntity(mesh: .generateText(label, extrusionDepth: 0.005, font: .systemFont(ofSize: 0.05)))
        buttonText.model?.materials = [SimpleMaterial(color: .white, isMetallic: true)]
        buttonText.position = [-0.07, -0.02, 0.01]
        button.addChild(buttonText)
        
        return button
    }

Answered by Vision Pro Engineer in 819120022

Hey @SuyashBel,

It sounds like you might be better served creating this button using SwiftUI using Attachments rather than attempting to recreate this with RealityKit entities. The docs provide a simple example of using this API. Additionally, Diorama also has examples of attachments in use.

When you create your attachment you'll probably want to use glassBackgroundEffect:

Attachment(id: "example") {
    Button(action: action) {
        Text(label)
    }
    .padding()
    .glassBackgroundEffect()
}

Hope this helps,
Michael

Boost

Answer 1

Vision Pro Engineer OP

Apple

2d

Accepted Answer

Hey @SuyashBel,

It sounds like you might be better served creating this button using SwiftUI using Attachments rather than attempting to recreate this with RealityKit entities. The docs provide a simple example of using this API. Additionally, Diorama also has examples of attachments in use.

When you create your attachment you'll probably want to use glassBackgroundEffect:

Attachment(id: "example") {
    Button(action: action) {
        Text(label)
    }
    .padding()
    .glassBackgroundEffect()
}

Hope this helps,
Michael

1