docs: add nx-cloud logo as well

Author: nartc

apps/kitchen-sink/public/nx-cloud.glb

@@ -14,7 +14,7 @@ type AngularGLTF = GLTF & {
 	standalone: true,
 	template: `
 		@if (gltf(); as gltf) {
-			<ngt-group [dispose]="null" [scale]="scale()" [position]="[-2.5, -3, 0]" [rotation]="[Math.PI / 2, 0, 0]">
+			<ngt-group [dispose]="null" [scale]="scale()" [position]="[-2.75, -3, 0]" [rotation]="[Math.PI / 2, 0, 0]">
 				<ngt-mesh
 					[castShadow]="true"
 					[receiveShadow]="true"

apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/angular.ts

@@ -6,9 +6,10 @@ import { NgtsBounds, NgtsEnvironment, NgtsFloat, NgtsMask } from 'angular-three-
 import { ColorRepresentation } from 'three';
 import { Angular } from './angular';
 import { Nx } from './nx';
+import { NxCloud } from './nx-cloud';
 
 export const invert = signal(false);
-export const logo = signal<'angular' | 'nx'>('angular');
+export const logo = signal<'angular' | 'nx' | 'nx-cloud'>('nx');
 
 @Component({
 	selector: 'app-frame',
@@ -99,6 +100,9 @@ export class Box {
 					@case ('nx') {
 						<app-nx [invert]="invert()" [scale]="20" />
 					}
+					@case ('nx-cloud') {
+						<app-nx-cloud [invert]="invert()" [scale]="160" />
+					}
 				}
 			</ngts-float>
 			<app-box
@@ -119,7 +123,18 @@ export class Box {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'inverted-stencil-buffer-soba-experience' },
-	imports: [CircularMask, NgtsBounds, NgtsFloat, Box, NgtsEnvironment, NgtsOrbitControls, NgtArgs, Nx, Angular],
+	imports: [
+		CircularMask,
+		NgtsBounds,
+		NgtsFloat,
+		Box,
+		NgtsEnvironment,
+		NgtsOrbitControls,
+		NgtArgs,
+		Nx,
+		Angular,
+		NxCloud,
+	],
 })
 export class Experience {
 	protected readonly Math = Math;

apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/experience.ts

@@ -16,6 +16,7 @@ import { Experience, invert, logo } from './experience';
 			<select [value]="logo()" (change)="onLogoChange($event)">
 				<option value="angular">Angular</option>
 				<option value="nx">Nx</option>
+				<option value="nx-cloud">Nx Cloud</option>
 			</select>
 		</div>
 
@@ -43,6 +44,6 @@ export default class InvertedStencilBuffer {
 
 	onLogoChange(event: Event) {
 		const target = event.target as HTMLSelectElement;
-		this.logo.set(target.value as 'angular' | 'nx');
+		this.logo.set(target.value as 'angular' | 'nx' | 'nx-cloud');
 	}
 }

apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/inverted-stencil-buffer.ts

@@ -0,0 +1,93 @@
+import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
+import { injectGLTF } from 'angular-three-soba/loaders';
+import { injectMask } from 'angular-three-soba/staging';
+import { Mesh, MeshPhongMaterial, MeshStandardMaterial } from 'three';
+import { GLTF } from 'three-stdlib';
+
+type NxCloudGLTF = GLTF & {
+	nodes: {
+		Curve012: Mesh;
+		Curve013: Mesh;
+		Curve014: Mesh;
+		Curve015: Mesh;
+		Curve016: Mesh;
+		Curve017: Mesh;
+		Curve018: Mesh;
+		Curve019: Mesh;
+	};
+	materials: { 'SVGMat.007': MeshStandardMaterial };
+};
+@Component({
+	selector: 'app-nx-cloud',
+	standalone: true,
+	template: `
+		@if (gltf(); as gltf) {
+			<ngt-group [dispose]="null" [scale]="scale()" [position]="[-3, -0.5, 0]" [rotation]="[Math.PI / 2, 0, 0]">
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve012.geometry"
+					[material]="material()"
+				/>
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve013.geometry"
+					[material]="material()"
+				/>
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve014.geometry"
+					[material]="material()"
+				/>
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve015.geometry"
+					[material]="material()"
+				/>
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve016.geometry"
+					[material]="material()"
+				/>
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve017.geometry"
+					[material]="material()"
+				/>
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve018.geometry"
+					[material]="material()"
+				/>
+				<ngt-mesh
+					[castShadow]="true"
+					[receiveShadow]="true"
+					[geometry]="gltf.nodes.Curve019.geometry"
+					[material]="material()"
+				/>
+			</ngt-group>
+		}
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NxCloud {
+	protected readonly Math = Math;
+
+	invert = input(false);
+	scale = input(1);
+
+	protected gltf = injectGLTF(() => './nx-cloud.glb') as Signal<NxCloudGLTF | null>;
+	protected stencilParameters = injectMask(() => 1, this.invert);
+
+	protected material = computed(() => {
+		const stencilParameters = this.stencilParameters();
+		return new MeshPhongMaterial({ color: '#002f56', ...stencilParameters });
+	});
+}