Welcome to Angular Three

Declarative scene graphs

Angular Three allows users to use every feature of THREE.js in a declarative way via Angular template syntax. Scale your 3D experiences with ease by leveraging Angular’s batteries-included APIs like Signal, and more

import { NgtCanvas } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';
@Component({
    template: `
        <ngt-canvas>
            <app-scene-graph *canvasContent />
        </ngt-canvas>
    `,
    imports: [NgtCanvas, SceneGraph]
})
export class SimpleScene {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgtCanvas } from 'angular-three/dom';
import { SceneGraph } from '../hud/scene-graph';
@Component({
    selector: 'rapier-demo',
    template: `
        <ngt-canvas [camera]="{ position: [-1, 5, 5], fov: 45 }" shadows>
            <app-scene-graph *canvasContent />
        </ngt-canvas>
    `,
    imports: [NgtCanvas, SceneGraph],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RapierDemo {}

Powerful utilities

Angular Three comes with integrations for physics engines like Rapier and Cannon; as well as postprocessing library like Postprocessing. On top of that, angular-three-soba provides a collection of utilities to help you focus on building your ideas.

Apply familiar workflow

Angular Three, as a custom Angular renderer, allows you to apply your Angular knowledge to THREE.js elements. Extend Angular Three with Components or provi THREE.js elements custom behaviors with custom Directives. Everything Angular provides is at your fingertips.

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { NgtCanvas } from "angular-three/dom";
import { SceneGraph } from "./scene-graph";
@Component({
    template: `
        <ngt-canvas>
            <app-scene-graph *canvasContent />
        </ngt-canvas>
        <span class="font-mono absolute bottom-0 right-0 text-sm">
            * click/hover the cube
        </span>
    `,
    host: {
        class: "relative flex h-full",
    },
    imports: [NgtCanvas, SceneGraph],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PointerDemo {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgtCanvas } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';
@Component({
  selector: 'app-gltf-demo-home',
  template: `
    <ngt-canvas [camera]="{ fov: 75, position: [0, 2, 3] }">
      <app-scene-graph *canvasContent />
    </ngt-canvas>
  `,
  imports: [NgtCanvas, SceneGraph],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class GLTFDemoHome {}

Seamless integrations of 3D assets

Angular Three makes working with external 3D assets effortless. Import, load, animate, and clone/reuse GLTF models with just a few lines of code.