angular-three

angular-three

A custom Renderer for Angular 19+ that uses Three.js to render 3D scenes.

Official documentation

Please visit angularthree-docs-next

Installation

npm install -D angular-three-plugin@next
npx ng generate angular-three-plugin:init

Usage

• Create a SceneGraph component for your 3D scene graph

import { extend } from 'angular-three';
import { Mesh, BoxGeometry } from 'three';

extend({
 Mesh, // makes ngt-mesh available
 BoxGeometry, // makes ngt-box-geometry available
 /* ... */
 MyMesh: Mesh, // makes ngt-my-mesh available
});

// alternatively for demo purposes, you can use the following
// extend(THREE);
// This includes the entire THREE.js namespace

@Component({
 selector: 'app-scene-graph',
 template: `
  <ngt-mesh>
   <ngt-box-geometry />
  </ngt-mesh>
 `,
 schemas: [CUSTOM_ELEMENTS_SCHEMA], // required
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SceneGraph {}

• Render the SceneGraph with NgtCanvas

import { NgtCanvas } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
 // This Component is rendered normally in Angular.
 selector: 'app-my-experience',
 template: `
  <ngt-canvas>
   <app-scene-graph *canvasContent />
  </ngt-canvas>
 `,
 imports: [NgtCanvas],
})
export class MyExperience {}

The Component that renders NgtCanvas (MyExperience in this case) controls the dimensions of the canvas so make sure to style it accordingly.

• Finally, provide the custom renderer in bootstrapApplication

import { provideNgtRenderer } from 'angular-three/dom';

bootstrapApplication(AppComponent, {
 providers: [provideNgtRenderer()],
});