Lab 039 – Portals in Immersive Spaces
In immersive spaces, portal contents share the same coordinate space as the main scene.
This means that when we move a portal entity around in the host scene, our view into the portal content scene will change. This opens up some very fun possibilities!
This lab loads a scene from Reality Composer Pro. It has three entities that we’ll use as portals. Two of them has timelines running to animate their movement. The third has input and collision components so we can use gestures to move it around.
video demo of portals animating and blending together in an immersive space
Full Lab Code
struct Lab039: View {
var body: some View {
RealityView { content in
// 1. The root for our scene *outside* of the portal
let rootEntity = Entity()
content.add(rootEntity)
// 2. The root for the content that will appear *inside* the portal
// We need a WorldComponent here
let portalContentRoot = Entity()
portalContentRoot.components.set(WorldComponent())
rootEntity.addChild(portalContentRoot)
guard let portalSphereScene = try? await Entity(named: "PortalPlayground", in: realityKitContentBundle) else { return }
rootEntity.addChild(portalSphereScene)
// 3. We need something to render the portal on
// We'll get the portals entity use each child
if let portals = portalSphereScene.findEntity(named: "Portals")?.children {
print(portals)
for portal in portals {
// Replace the material with PortalMaterial
portal.components[ModelComponent.self]?.materials[0] = PortalMaterial()
// We also need to add a PortalComponent that targets the portalContentRoot
portal.components.set(PortalComponent(target: portalContentRoot))
}
}
// 4. We'll load some content to add to the portalContentRoot
guard let scene = try? await Entity(named: "TeleportLabs", in: realityKitContentBundle) else { return }
portalContentRoot.addChild(scene)
}
.modifier(DragGestureImproved())
.modifier(MagnifyGestureImproved())
}
}Support our work so we can continue to bring you new examples and articles.
Follow Step Into Vision