Skip to content
Angular Three
Blog

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>.

@Component({
  template: `
    <ngt-mesh>
      <ngt-torus-geometry />
    </ngt-mesh>


    <ngt-portal [container]="secondaryScene">
      <ng-template portalContent>
        <ngts-perspective-camera [options]="{ makeDefault: true }" />
        <ngt-mesh>
          <ngt-box-geometry />
        </ngt-mesh>
      </ng-template>
    </ngt-portal>
  `,
  imports: [NgtPortal, NgtPortalContent],
})
export class HUD {
  secondaryScene = new Scene();
}

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

Examples

TBD