docs: add stars demo (gatsby stars)

Author: nartc

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

@@ -33,6 +33,10 @@ const routes: Routes = [
 		path: 'lowpoly-earth',
 		loadComponent: () => import('./lowpoly-earth/lowpoly-earth'),
 	},
+	{
+		path: 'stars',
+		loadComponent: () => import('./stars/stars'),
+	},
 	{
 		path: '',
 		redirectTo: 'basic',

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

@@ -33,5 +33,5 @@ extend(THREE);
 	host: { class: 'soba' },
 })
 export default class Soba {
-	examples = ['basic', 'hud', 'render-texture', 'shaky', 'lod', 'decal', 'html-chart', 'lowpoly-earth'];
+	examples = ['basic', 'hud', 'render-texture', 'shaky', 'lod', 'decal', 'html-chart', 'lowpoly-earth', 'stars'];
 }

apps/kitchen-sink/src/app/soba/stars/experience.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
+import { injectBeforeRender } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsPointMaterial } from 'angular-three-soba/materials';
+import { NgtsPointsBuffer } from 'angular-three-soba/performances';
+import { random } from 'maath';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-group [rotation]="[0, 0, Math.PI / 4]">
+			<ngts-points-buffer [positions]="sphere" [stride]="3" [options]="{ frustumCulled: false }">
+				<ngts-point-material
+					[options]="{ transparent: true, color: '#ccc', size: 0.005, sizeAttenuation: true, depthWrite: false }"
+				/>
+			</ngts-points-buffer>
+		</ngt-group>
+
+		<ngts-orbit-controls [options]="{ enableZoom: false, enablePan: false }" />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsPointsBuffer, NgtsPointMaterial, NgtsOrbitControls],
+})
+export class Experience {
+	protected readonly Math = Math;
+	protected readonly sphere = random.inSphere(new Float32Array(5000), { radius: 1.5 }) as Float32Array;
+
+	pointsBufferRef = viewChild.required(NgtsPointsBuffer);
+
+	constructor() {
+		injectBeforeRender(({ delta }) => {
+			const points = this.pointsBufferRef().pointsRef().nativeElement;
+			points.rotation.x -= delta / 10;
+			points.rotation.y -= delta / 15;
+		});
+	}
+}

apps/kitchen-sink/src/app/soba/stars/stars.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtCanvas } from 'angular-three';
+import { Experience } from './experience';
+
+@Component({
+	standalone: true,
+	template: `
+		<div style="position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0)">
+			<h1
+				style="margin: 0; padding: 0; font-size: 15em; font-weight: 500; letter-spacing: -0.05em; line-height: 1; text-align: center"
+			>
+				<code>angular three</code>
+			</h1>
+		</div>
+		<ngt-canvas [sceneGraph]="sceneGraph" [camera]="{ position: [0, 0, 1] }" />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'stars-soba' },
+	styles: `
+		:host {
+			display: block;
+			height: 100%;
+			width: 100%;
+			background: #12071f;
+		}
+
+		h1 {
+			background: linear-gradient(30deg, #c850c0, #ffcc70);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+	`,
+	imports: [NgtCanvas],
+})
+export default class Stars {
+	sceneGraph = Experience;
+}