Skip to main content

Overview

What is Angular Three (NGT) ?

NGT is a Component Library that wraps around THREE.js to provide a declarative approach to building 3D applications using Angular capabilities.

Why is it good to use NGT ?

NGT allows the consumers to utilize Template-less Directives to build 3D scenes declaratively with access to Angular Dependency Injection, Inputs, Outputs, and other standard features.

How does NGT work?

NGT relies heavily on Hierarchical Dependency Injection to allow for declarative creation of THREE.js objects on the template.

What is the difference between NGT and React Three Fiber?

Many points in comparison with R3F, which are listed here, in Svelte Cubed (a Svelte-based THREE.js library) also applies to NGT.

React Three Fiber (R3F) is a Renderer that treats THREE.js as native elements. Hence, it does not wrap anything, providing a clean surface API and future-proof from THREE.js version changes.

On the other hand, NGT is a Component Library, which means for almost every THREE.js entity, there is a corresponding entity (whether it is a Component or a Directive) in NGT. The bulk of the entities in NGT is Single-Component-as-Module to be best for Tree-shaking. For maintainability, NGT also generates most of these entities, which makes it possible to keep up with THREE.js version changes.

Rendering the THREE.js scene is done outside of the Angular Zone. In the future, when Zone-less is available, NGT will be able to provide an even better experience to the consumers.

info

Zone-less is available today, but it requires more understanding and a lot of hoops to jump through to get it to work flawlessly.

info

It is worth noting that R3F heavily inspires NGT. Many of the concepts and features of NGT are ported from R3F. You can call NGT an Angular-port of R3F.

tip

It is recommended that you should get familiar with Angular and THREE.js before starting with NGT.

What does the code look like?

We can take a peak at the code for the Simple Cubes example here

<ngt-canvas>
<ngt-ambient-light intensity="0.5"></ngt-ambient-light>
<ngt-spot-light [position]="10" angle="0.15" penumbra="1"></ngt-spot-light>
<ngt-point-light [position]="-10"></ngt-point-light>

<!-- power of a component framework, declarative express the scenegraph that has life-cycle hooks -->
<app-cube [position]="[1.5, 0, 0]"></app-cube>
<app-cube [position]="[-1.5, 0, 0]"></app-cube>
</ngt-canvas>

and the result

simple cubes gif

info

Do not worry. We will get to the details of the code in later sections.