provideNgtRenderer

Usage

Provide angular-three custom renderer during bootstrapApplication with provideNgtRenderer

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

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

Options

You can pass options to the renderer via provideNgtRenderer

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

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

Available options:

• verbose: Enable verbose logging in the renderer. Default: false

Route provider

If your 3D scene graph is only on some specific route, you can provide the renderer only on that route.

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

export const routes: Routes = [
    {
        path: 'home',
        loadComponent: () => import('./home')
    },
    {
        path: 'scene',
        providers: [provideNgtRenderer()],
        loadComponent: () => import('./scene'),
    }
];

Now only /scene route will be handled by the custom angular-three renderer.

How it works

provideNgtRenderer overrides the RendererFactory2 so that it can take over the template. However, it also references the default DOM renderer that Angular provides for the browser platform via bootstrapApplication.