Hi, I've been working on a spatial image design, guided by this Apple developer video: https://developer.apple.com/videos/play/wwdc2023/10081?time=792.
I've hit a challenge: I'm trying to position a label to the left of the portal. Although I've used an attachment for the label within the content, pinpointing the exact starting position of the portal to align the label is proving challenging. Any insights or suggestions would be appreciated.
Below is the URL of the image used: https://cdn.polyhaven.com/asset_img/primary/rural_asphalt_road.png?height=780
struct PortalView: View {
let radius = Float(0.3)
var world = Entity()
var portal = Entity()
init() {
world = makeWorld()
portal = makePortal(world: world)
}
var body: some View {
RealityView { content, attachments in
content.add(world)
content.add(portal)
if let attachment = attachments.entity(for: 0) {
portal.addChild(attachment)
attachment.position.x = -radius/2.0
attachment.position.y = radius/2.0
}
} attachments: {
Attachment(id: 0) {
Text("Title")
.background(Color.red)
}
}
}
func makeWorld() -> Entity {
let world = Entity()
world.components[WorldComponent.self] = .init()
let imageEntity = Entity()
var material = UnlitMaterial()
let texture = try! TextureResource.load(named: "road")
material.color = .init(texture: .init(texture))
imageEntity.components.set(
ModelComponent(mesh: .generateSphere(radius: radius), materials: [material])
)
imageEntity.position = .zero
imageEntity.scale = .init(x: -1, y: 1, z: 1)
world.addChild(imageEntity)
return world
}
func makePortal(world: Entity) -> Entity {
let portal = Entity()
let portalMaterial = PortalMaterial()
let planeMesh = MeshResource.generatePlane(width: radius, height: radius, cornerRadius: 0)
portal.components[ModelComponent.self] = .init(mesh: planeMesh, materials: [portalMaterial])
portal.components[PortalComponent.self] = .init(
target: world
)
return portal
}
}
#Preview {
PortalView()
}