Introduction
Angular Three (NGT) is an Angular renderer for using THREE.js in a declarative way in Angular applications.
Key Features
Section titled “Key Features”Declarative Scene Graph
Section titled “Declarative Scene Graph”Angular Three allows the users to declaratively build a scene graph using the familiar Angular template syntax. This approach enables Angular developers to leverage familiar skills and tools of Angular template to build 3D scenes.
Performance
Section titled “Performance”Angular Three is a custom renderer that renders THREE.js entities directly to the Canvas. This means that there is no overhead of instantiating custom Components or Directives to turn them into THREE.js objects.
Compatibility
Section titled “Compatibility”“Anything that can be done in THREE.js, can be done in Angular Three.” This is the motto that Angular Three stands for.
Signals
Section titled “Signals”Angular Three fully embraces Angular Signals to drive the state of the scene graph. Most, if not all, of Angular Three’s APIs are based on Signal<T> and return Signal<T>.
Acknowledgements
Section titled “Acknowledgements”Angular Three would not have been possible without the following open source projects:
The foundation of Angular Three is THREE.js. It is a powerful and flexible 3D library that provides a wide range of tools for creating 3D scenes.
Fundamentally, NGT and R3F are both custom renderers for THREE.js. Technically, there are differences between Angular Renderer (NGT) and React Reconciler (R3F). However, the core concepts are the same and R3F has been a major inspiration for NGT.
Other ecosystems
Section titled “Other ecosystems”Other ecosystems like TresJS and Threlte have also been a major inspiration for NGT since their communities are substantially bigger than NGT’s. Thanks to that, I’ve been able to learn a lot from their use-cases and model after their documentation in other to showcase what’s important to THREE.js development.
Ecosystem
Section titled “Ecosystem”NGT is compised of several packages
- angular-three is the core package that provides the renderer and context that THREE.js entities can understand.
- angular-three-plugin provides generators/schematics for
angular-three. It also includes a GLTF pipeline for ease of working with glTF models. - angular-three-soba is a collection of utilities that are built on top of
angular-threeto provide additional functionalities out of the box. - angular-three-cannon is an integration for Cannon.js physics engine.
- angular-three-postprocessing is an integration for Postprocessing library.
- angular-three-rapier is an integration for Rapier physics engine.
- angular-three-tweakpane is an integration for Tweakpane library.
- angular-three-theatre is an integration for Theatre.js.