Skip to content

NgtCanvas

Everything in Angular Three starts with the NgtCanvas component.

@Component({
standalone: true,
template: `
<ngt-canvas
[sceneGraph]="SceneGraph"
[camera]="cameraOptions"
[shadows]="true"
/>
`,
imports: [NgtCanvas],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Experience {
SceneGraph = SceneGraph;
}

Inputs

PropertyDescriptionDefault Value
sceneGraph(required) A Component class that is the root of the Scene Graph. It can also accept 'routed' and NgtCanvas will use NgtRoutedScene by default to enable routed Scene Graph.-
orthographicA boolean flag to determine whether to create an OrthographicCamera instead of a PerspectiveCamera.false
cameraOptions for the default camera. Pass in the options accordingly depending on whether the camera is Orthographic or Perspective-
lookAtA Vector3 or Partial<LookAt> that sets the default lookAt position.-
frameloopA string that sets the frameloop for the canvas. It can also accept 'always', 'demand', or 'never' to set the frameloop type.‘always’
glA WebGLRenderer instance or properties that go into the default renderer.-
sceneA Scene instance or properties that go into the default scene.-
raycasterA Partial<Raycaster> object that allows you to customize the raycaster.-
legacyA boolean flag to determine whether to use legacy lights.false
linearA boolean flag to determine whether to use linear color space.false
flatA boolean flag to determine whether to use flat shading.false
shadowsA boolean flag to determine whether to enable shadows PCFSoftShadowMap. It can also accept a string from 'basic', 'percentage', 'soft', or 'variance' to set the shadow map type. It can also accept a Partial<WebGLShadowMap>false
eventsA function that allows you to customize the event handler for pointer events. It takes an EventManager as an argument and returns an EventManager. You can use this to register custom event handlers for pointer events.-
eventSourceThe element that the events will be attached to. If not provided, the events will be attached to the host element of NgtCanvas component-
eventPrefixA string that sets the event prefix for the canvas.‘offset’
sizeDimensions of the canvas. It can also accept a Partial<NgtSize> to set the width and height.-
performanceA Partial<NgtPerformance> object that allows you to customize the performance of the canvas.-
dprA number or [min, max] that sets the device pixel ratio.-

Outputs

PropertyDescription
createdEmit when the canvas is created but before rendering
pointerMissedEmit when a pointer event is not captured by any object

Canvas Defaults

If you have both the scene graphs in Vanilla THREE.js and Angular Three, and you see that the one in Angular Three looks different, it might be because of the defaults that Angular Three sets for the underlying THREE.js building blocks.

NgtCanvas sets up a translucent THREE.WebGLRenderer with the following constructor arguments:

  • antialias = true
  • alpha = true
  • powerReference = ‘high-performance’

and the following properties:

  • outputEncoding = THREE.sRGBEncoding
  • toneMapping = THREE.ACESFilmicToneMapping

A window:resize listener that will update the THREE.Renderer and THREE.Camera when the container is resized.

From THREE.js 0.139+, THREE.ColorManagement.legacyMode is set to false to enable automatic conversion of colors based on the Renderer’s configured color space. For more on this topic, check THREE.js Color Management.