Portals

In THREE.js, there is a construct called WebGLRenderTarget. It is used to render the scene into a texture and then render the texture into the canvas. This is useful for things like post-processing effects, or HUD-like visuals.

In Angular Three, we can use NgtPortal component to create an off-screen buffer that can be used to render secondary scenes.

NgtPortal provides a layered NgtSignalStore<NgtState> that its children can inject. This makes sure that children of NgtPortal access the state of the NgtPortal and not the root NgtSignalStore<NgtState>.

1
@Component({
2
  template: `
3
    <ngt-mesh>
4
      <ngt-torus-geometry />
5
    </ngt-mesh>
6

7
    <ngt-portal [container]="secondaryScene">
8
      <ng-template portalContent>
9
        <ngts-perspective-camera [options]="{ makeDefault: true }" />
10
        <ngt-mesh>
11
          <ngt-box-geometry />
12
        </ngt-mesh>
13
      </ng-template>
14
    </ngt-portal>
15
  `,
16
  imports: [NgtPortal, NgtPortalContent],
17
})
18
export class HUD {
19
  secondaryScene = new Scene();
20
}

The portal can have its own scene, camera, and children.

Examples

TBD