docs: add svgrenderer example

Author: nartc

apps/kitchen-sink/src/app/app.component.ts

@@ -13,6 +13,7 @@ import { filter, map } from 'rxjs';
 			<option value="cannon">/cannon</option>
 			<option value="postprocessing">/postprocessing</option>
 			<option value="rapier">/rapier</option>
+			<option value="misc">/misc</option>
 		</select>
 	`,
 	imports: [RouterOutlet],

apps/kitchen-sink/src/app/app.routes.ts

@@ -25,6 +25,12 @@ export const appRoutes: Route[] = [
 		loadChildren: () => import('./rapier/rapier.routes'),
 		title: 'Rapier - Angular Three Demo',
 	},
+	{
+		path: 'misc',
+		loadComponent: () => import('./misc/misc'),
+		loadChildren: () => import('./misc/misc.routes'),
+		title: 'Misc - Angular Three Demo',
+	},
 	{
 		path: '',
 		// redirectTo: 'cannon',

apps/kitchen-sink/src/app/misc/misc.routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+	{
+		path: 'svg-renderer',
+		loadComponent: () => import('./svg-renderer/svg-renderer'),
+	},
+	{
+		path: '',
+		redirectTo: 'svg-renderer',
+		pathMatch: 'full',
+	},
+];
+
+export default routes;

apps/kitchen-sink/src/app/misc/misc.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { extend } from 'angular-three';
+import * as THREE from 'three';
+import routes from './misc.routes';
+
+extend(THREE);
+
+@Component({
+	standalone: true,
+	template: `
+		<div class="h-svh">
+			<router-outlet />
+		</div>
+
+		<ul class=" absolute left-12 bottom-12 grid grid-cols-6 gap-4">
+			@for (example of examples; track example) {
+				<li class="h-6 w-6">
+					<a
+						routerLinkActive
+						#rla="routerLinkActive"
+						class="inline-block h-full w-full rounded-full"
+						[class]="rla.isActive ? 'bg-red-500' : 'bg-white'"
+						[routerLinkActiveOptions]="{ exact: true }"
+						[routerLink]="['/misc', example]"
+						[title]="'Navigate to ' + example"
+					></a>
+				</li>
+			}
+		</ul>
+	`,
+	imports: [RouterOutlet, RouterLink, RouterLinkActive],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'misc' },
+})
+export default class Misc {
+	protected examples = routes.filter((route) => !!route.path).map((route) => route.path);
+}

apps/kitchen-sink/src/app/misc/svg-renderer/experience.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { injectBeforeRender, NgtArgs } from 'angular-three';
+import { BufferGeometry, Float32BufferAttribute } from 'three';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-color attach="background" *args="['black']" />
+
+		@for (i of [1, 2, 3]; track $index) {
+			<ngt-line [geometry]="geometry" [scale]="i / 3">
+				<ngt-line-basic-material [color]="Math.random() * whiteHex" [linewidth]="10" />
+			</ngt-line>
+		}
+
+		<ngt-line [geometry]="geometry" [scale]="2">
+			<ngt-line-dashed-material color="blue" [linewidth]="1" [dashSize]="10" [gapSize]="10" />
+		</ngt-line>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtArgs],
+})
+export class Experience {
+	protected readonly Math = Math;
+
+	protected whiteHex = 0xffffff;
+	protected geometry = (() => {
+		const divisions = 50;
+		const vertices: number[] = [];
+
+		for (let i = 0; i <= divisions; i++) {
+			const v = (i / divisions) * (Math.PI * 2);
+
+			const x = Math.sin(v);
+			const z = Math.cos(v);
+
+			vertices.push(x, 0, z);
+		}
+
+		const geometry = new BufferGeometry();
+		geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3));
+
+		return geometry;
+	})();
+
+	constructor() {
+		injectBeforeRender(({ scene, delta }) => {
+			let count = 0;
+			const time = performance.now() / 1000;
+			scene.traverse((child) => {
+				child.rotation.x = count + time / 3;
+				child.rotation.z = count + time / 4;
+				count++;
+			});
+		});
+	}
+}

apps/kitchen-sink/src/app/misc/svg-renderer/svg-renderer.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtCanvas, NgtCanvasElement } from 'angular-three';
+import { SVGRenderer } from 'three-stdlib';
+import { Experience } from './experience';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-canvas
+			[sceneGraph]="sceneGraph"
+			[gl]="svgRendererFactory"
+			[camera]="{ fov: 33, near: 0.1, far: 100, position: [0, 0, 10] }"
+		/>
+	`,
+	imports: [NgtCanvas],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class SVGRendererExample {
+	sceneGraph = Experience;
+
+	svgRendererFactory = (canvas: NgtCanvasElement) => {
+		const renderer = new SVGRenderer();
+
+		if (canvas instanceof HTMLCanvasElement) {
+			canvas.style.display = 'none';
+			canvas.parentElement?.appendChild(renderer.domElement);
+		}
+
+		return renderer;
+	};
+}