Introduction
Angular Three is a custom Angular Renderer that uses THREE.js to render 3D scenes.
Key Features
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
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
“Anything that can be done in THREE.js, can be done in Angular Three.” This is the motto that Angular Three stands for.
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>.
Versioning
Angular Three follows the Semantic Versioning standard.
- Patch: Bug fixes and small improvements.
- Minor: New features and improvements.
- Major: Breaking changes.
Angular Three consists of the following packages:
angular-three: The main package that provides a custom renderer for Angular.angular-three-soba: A collection of utilities and abstractions for building 3D applications with Angular Three.angular-three-postprocessing: A collection of post-processing effects for Angular Three.angular-three-cannon: Cannon.js integration for Angular Three.
Compatibility Matrix
| Angular Three Version | THREE.js Version | Angular Version | ngxtension Version |
|---|---|---|---|
| 2.0.0 | >= 0.148 | >= 18.0.0 | >= 3.0.0 |
Acknowledgements
Angular Three would not have been possible without the following open source projects:
THREE.js
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.
React Three Fiber (R3F)
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.