Hey Everyone, Happy New Year!
I wanted to see if you have seen this before. I have added an attachment to the RealityView as a child on an entity that has a Billboard component set on it. I wanted to create the effect that the attachment is offset by .5 meters from center and follows the device as you move around it. IT works great until you try click a button.
The attachment moves with the billboard, but the collision box around the attachment is not following it. If I position myself perfectly it works.
Video Example: https://youtu.be/4d9Vx7K8MmU
//
// ImmersiveView.swift
// Billboard Attachment
//
// Created by Justin Leger on 1/3/25.
//
import SwiftUI
import RealityKit
import RealityKitContent
struct ImmersiveView: View {
var rootEntity = Entity()
var body: some View {
RealityView { content, attachments in
// Add the initial RealityKit content
let sphereEntity = ModelEntity(mesh: .generateSphere(radius: 0.1), materials: [SimpleMaterial(color: .red, roughness: 1, isMetallic: false)])
sphereEntity.position = [0.0, 1.0, -2.0]
let controlsPivotEntity = Entity()
controlsPivotEntity.components[BillboardComponent.self] = .init()
// Extract the attachemnt entity and disable it before its used.
if let controlsViewAttachmentEntity = attachments.entity(for: PlacedThingControls.attachmentId) {
controlsViewAttachmentEntity.position.z = 0.5
controlsPivotEntity.addChild(controlsViewAttachmentEntity)
sphereEntity.addChild(controlsPivotEntity)
}
content.add(sphereEntity)
}
attachments: {
Attachment(id: PlacedThingControls.attachmentId) {
PlacedThingControls()
}
}
}
}
#Preview(immersionStyle: .mixed) {
ImmersiveView()
.environment(AppModel())
}
struct PlacedThingControls: View {
static let attachmentId = "placed-thing-3D-controls"
var body: some View {
VStack {
HStack(spacing: 0) {
Button {
print("🗺️🗺️🗺️ Map selected pieces")
} label: {
Text("\(Image(systemName: "plus.square.dashed")) Manage Mesh Maps")
.fontWeight(.semibold)
.frame(maxWidth: .infinity)
}
.padding(.leading, 20)
Spacer()
Button(role: .destructive) {
print("🗑️🗑️🗑️ Delete selected pieces")
} label: {
Label {
Text("Delete")
} icon: {
Image(systemName: "trash")
}
.labelStyle(.iconOnly)
}
.padding(.trailing, 20)
}
.padding(.vertical)
.frame(minWidth: 320, maxWidth: 480)
}
.glassBackgroundEffect()
}
}