Reality View: many instances of entities with attachments with different dynamic text

121 Views Asked by At

I am developing an immersive AR application using RealityKit. My goal is to display 30 instances of the same 3D model, each accompanied by a label. The label should showcase different text for each instance and be modifiable during runtime. I am currently facing challenges in implementing this functionality.

Initially, I attempted to create 30 entities and 30 attachments using a ForEach loop, but encountered issues as it couldn't compile. Currently, I am generating 30 instances of a 3DModelView struct. However, this approach seems conceptually awkward, as all 30 3D models do not belong to the hierarchy system of entities. Instead, they are integrated into the hierarchy system of the View, which is typically used for 2D GUI elements.

If you have any insights or suggestions on the best approach for achieving this, I would greatly appreciate your guidance.

struct 3DModelView : View {
    @ObservedObject var viewModel : ViewModel

    var body: some View {
        RealityView { content, attachments in
            let model = await 3DModelEntity("3DModelEntity")
            if let text = attachments.entity(for: "panel") {
                text.orientation = simd_quatf(angle: Float.pi, axis: SIMD3<Float>(0, 1, 0))
                text.position = model.position + [0, -0.21, 0]
                model.addChild(text, preservingWorldTransform: true)
            }
            content.add(model)
            
        } update: { content, attachments in
            let entity = content.entities.first as! 3DModelEntity
            entity.transform.translation = self.viewModel.source.xyz
        } attachments: {
            Attachment(id: "panel") {
                ZStack {
                    RoundedRectangle(cornerRadius: 30)
                        .fill(Color.black.opacity(0.1))
                        .cornerRadius(10)
                    Text(viewModel.source.name)
                        .font(.system(size: 96))
                        .shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 10)
                }
                .frame(width: 500, height: 150)
            }
        }
    }
}
0

There are 0 best solutions below