adjust app component in sandbox

Author: nartc

apps/sandbox/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { NgIf } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, Component, computed, signal } from '@angular/core';
 import { NgtArgs, NgtCanvas, extend } from 'angular-three';
+import { NgtsGrid } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
 import { injectNgtsAnimations } from 'angular-three-soba/misc';
@@ -11,27 +12,13 @@ extend(THREE);
 @Component({
 	standalone: true,
 	template: `
-		<ngt-spot-light [position]="3" [castShadow]="true">
-			<ngt-vector2 *args="[512, 512]" attach="shadow.mapSize" />
-		</ngt-spot-light>
-
-		<ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" [receiveShadow]="true" [position]="[0, -1, 0]">
-			<ngt-plane-geometry *args="[100, 100]" />
-			<ngt-shadow-material />
-		</ngt-mesh>
-
-		<ngt-primitive
-			*args="[cloud()]"
-			[ref]="animations.ref"
-			[scale]="0.01"
-			[rotation]="[0, -Math.PI / 2, 0]"
-			[position]="[0, -1, 0]"
-			(beforeRender)="onBeforeRender($event.object)"
-		/>
-
+		<ngt-ambient-light [intensity]="Math.PI" />
+		<ngt-point-light [intensity]="Math.PI" />
+		<ngt-primitive *args="[bot()]" [ref]="animations.ref" [position]="[0, -1, 0]" />
 		<ngts-orbit-controls />
+		<ngts-grid [position]="[0, -1, 0]" [args]="[10, 10]" />
 	`,
-	imports: [NgtArgs, NgtsOrbitControls],
+	imports: [NgtArgs, NgtsOrbitControls, NgtsGrid],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Scene {
@@ -40,33 +27,23 @@ export class Scene {
 	active = signal(false);
 	hover = signal(false);
 
-	private cloudGltf = injectNgtsGLTFLoader(() => 'assets/cloud_from_world_of_final_fantasy/scene.gltf');
+	private yBotGltf = injectNgtsGLTFLoader(() => 'assets/ybot.glb');
 
-	animations = injectNgtsAnimations(() => this.cloudGltf()?.animations || []);
-	cloud = computed(() => {
-		const gltf = this.cloudGltf();
+	animations = injectNgtsAnimations(() => this.yBotGltf()?.animations || []);
+	bot = computed(() => {
+		const gltf = this.yBotGltf();
 		if (gltf) {
-			gltf.scene.traverse((child) => {
-				if (child instanceof THREE.Mesh) child.castShadow = true;
-			});
-
 			return gltf.scene;
 		}
-
 		return null;
 	});
-
-	onBeforeRender(cloud: THREE.Group) {
-		cloud.rotation.y += 0.005;
-	}
 }
 
 @Component({
 	standalone: true,
 	imports: [NgtCanvas, NgIf],
 	selector: 'sandbox-root',
-	template: ` <ngt-canvas [sceneGraph]="Scene" [camera]="{ position: [2, 1, 3] }" [shadows]="true" /> `,
-	styles: [''],
+	template: ` <ngt-canvas [sceneGraph]="Scene" [camera]="{ position: [0, 1, 3] }" /> `,
 })
 export class AppComponent {
 	readonly Scene = Scene;

apps/sandbox/src/assets/ybot.glb

@@ -8,7 +8,7 @@ extend({ GridMaterial, Mesh, PlaneGeometry });
 
 export type NgtsGridState = {
 	/** Default plane-geometry arguments */
-	args?: ConstructorParameters<typeof THREE.PlaneGeometry>;
+	args: ConstructorParameters<typeof THREE.PlaneGeometry>;
 } & NgtGridMaterialState;
 
 declare global {

libs/soba/abstractions/src/grid/grid.ts

@@ -16,7 +16,7 @@ function _extensions(useDraco: boolean | string, useMeshOpt: boolean, extensions
 			}
 
 			dracoLoader.setDecoderPath(
-				typeof useDraco === 'string' ? useDraco : 'https://www.gstatic.com/draco/versioned/decoders/1.4.3/',
+				typeof useDraco === 'string' ? useDraco : 'https://www.gstatic.com/draco/versioned/decoders/1.5.5/',
 			);
 			(loader as GLTFLoader).setDRACOLoader(dracoLoader);
 		}

libs/soba/loaders/src/gltf-loader/gltf-loader.ts

@@ -40,7 +40,13 @@ class DefaultAnimationsStory {
 	Math = Math;
 
 	yBotGltf = injectNgtsGLTFLoader(() => 'soba/ybot.glb') as Signal<YBotGLTF>;
-	matcapBody = injectNgtsMatcapTexture(() => ({ id: '293534_B2BFC5_738289_8A9AA7', format: 1024 }));
+
+	private _bodyIndex = signal('293534_B2BFC5_738289_8A9AA7');
+	@Input() set bodyIndex(index: string) {
+		this._bodyIndex.set(index);
+	}
+
+	matcapBody = injectNgtsMatcapTexture(() => ({ id: this._bodyIndex(), format: 1024 }));
 	matcapJoints = injectNgtsMatcapTexture(() => ({ id: '3A2412_A78B5F_705434_836C47', format: 1024 }));
 
 	animations = injectNgtsAnimations(() => this.yBotGltf()?.animations || [], { playFirstClip: false });
@@ -75,5 +81,8 @@ export const Default = makeStoryObject(DefaultAnimationsStory, {
 	canvasOptions: { camera: { position: [0, 0, 3] } },
 	argsOptions: {
 		animation: select('Strut', { options: ['Strut', 'Dance', 'Idle'] }),
+		bodyIndex: select('293534_B2BFC5_738289_8A9AA7', {
+			options: ['293534_B2BFC5_738289_8A9AA7', '3A2412_A78B5F_705434_836C47'],
+		}),
 	},
 });

libs/soba/src/misc/animations.stories.ts

@@ -78,7 +78,7 @@ const STORY_INPUTS = new InjectionToken<Signal<Record<string, unknown>>>('story
 		</ng-container>
 
 		<ng-container *ngIf="canvasOptions.lights">
-			<ngt-ambient-light [intensity]="0.8 * Math.PI" />
+			<ngt-ambient-light [intensity]="canvasOptions.useLegacyLights ? 0.8 : 0.8 * Math.PI" />
 			<ngt-point-light [intensity]="1" [position]="[0, 6, 0]" />
 		</ng-container>
 

libs/soba/src/setup-canvas.ts

@@ -0,0 +1,65 @@
+import { NgIf } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, signal, type Signal } from '@angular/core';
+import { injectNgtsGLTFLoader, type NgtsGLTF } from 'angular-three-soba/loaders';
+import { injectNgtsNormalTexture } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+import { makeDecorators, makeStoryObject, number } from '../setup-canvas';
+
+const textureIndex = signal(3);
+
+type SuzanneGLTF = NgtsGLTF<{ nodes: { Suzanne: THREE.Mesh } }>;
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-mesh *ngIf="suzanneGltf() as suzanneGltf" [geometry]="suzanneGltf.nodes.Suzanne.geometry">
+			<ngt-mesh-standard-material
+				color="darkmagenta"
+				[roughness]="0.9"
+				[metalness]="0.1"
+				[normalScale]="normalScale()"
+				[normalMap]="normal.texture()"
+			/>
+		</ngt-mesh>
+	`,
+	imports: [NgIf],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultNormalTextureStory {
+	suzanneGltf = injectNgtsGLTFLoader(() => 'soba/suzanne.glb', { useDraco: true }) as Signal<SuzanneGLTF>;
+
+	private _repeat = signal(8);
+	@Input() set repeat(repeat: number) {
+		this._repeat.set(repeat);
+	}
+
+	private _scale = signal(4);
+	@Input() set scale(scale: number) {
+		this._scale.set(scale);
+	}
+
+	@Input() set textureIndex(index: number) {
+		textureIndex.set(index);
+	}
+
+	normal = injectNgtsNormalTexture(() => ({
+		id: textureIndex(),
+		repeat: [this._repeat(), this._repeat()],
+		anisotropy: 8,
+	}));
+	normalScale = () => new THREE.Vector2(this._scale(), this._scale());
+}
+
+export default {
+	title: 'Staging/injectNgtsNormalTexture',
+	decorators: makeDecorators(),
+};
+
+export const Default = makeStoryObject(DefaultNormalTextureStory, {
+	canvasOptions: { camera: { position: [0, 0, 3] }, useLegacyLights: true },
+	argsOptions: {
+		textureIndex: number(textureIndex()),
+		repeat: number(8),
+		scale: number(4),
+	},
+});

libs/soba/src/staging/normal-texture.stories.ts

@@ -6,6 +6,7 @@ export * from './environment/assets';
 export * from './environment/environment';
 export * from './float/float';
 export * from './matcap-texture/matcap-texture';
+export * from './normal-texture/normal-texture';
 export * from './sky/sky';
 export * from './sparkles/sparkles';
 export { NgtsSpotLightShadow } from './spot-light/shadow-mesh';

libs/soba/staging/src/index.ts

@@ -41,8 +41,8 @@ export function injectNgtsMatcapTexture(
 
 		const matcapList = signal<Record<string, string>>({});
 
-		const DEFAULT_MATCAP = computed(() => matcapList()[0]);
-		const numTot = computed(() => Object.keys(matcapList()).length);
+		const DEFAULT_MATCAP = () => matcapList()[0];
+		const numTot = () => Object.keys(matcapList()).length;
 
 		effect(() => {
 			if (!untracked(numTot)) {
@@ -54,7 +54,7 @@ export function injectNgtsMatcapTexture(
 			}
 		});
 
-		const fileHash = computed(() => {
+		const fileHash = () => {
 			const id = state().id;
 			if (typeof id === 'string') {
 				return id;
@@ -65,10 +65,10 @@ export function injectNgtsMatcapTexture(
 			}
 
 			return null;
-		});
+		};
 
-		const fileName = computed(() => `${fileHash() || DEFAULT_MATCAP()}${getFormatString(state().format)}.png`);
-		const url = computed(() => `${MATCAP_ROOT}/${state().format}/${fileName()}`);
+		const fileName = () => `${fileHash() || DEFAULT_MATCAP()}${getFormatString(state().format)}.png`;
+		const url = () => `${MATCAP_ROOT}/${state().format}/${fileName()}`;
 
 		let texture: Signal<THREE.Texture | null>;
 		const matcapTexture = computed(() => {

libs/soba/staging/src/matcap-texture/matcap-texture.ts

@@ -0,0 +1,71 @@
+import { computed, effect, runInInjectionContext, signal, untracked, type Injector, type Signal } from '@angular/core';
+import { assertInjectionContext } from 'angular-three';
+import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
+import * as THREE from 'three';
+
+const NORMAL_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
+const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json';
+
+export type NgtsNormalTextureState = {
+	id: string | number;
+	repeat: number[];
+	anisotropy: number;
+	offset: number[];
+	onLoad?: (texture: THREE.Texture | THREE.Texture[]) => void;
+};
+
+const defaultState: NgtsNormalTextureState = {
+	id: 0,
+	repeat: [1, 1],
+	anisotropy: 1,
+	offset: [0, 0],
+};
+
+export function injectNgtsNormalTexture(
+	normalTextureState: () => Partial<NgtsNormalTextureState>,
+	{ injector }: { injector?: Injector } = {},
+) {
+	injector = assertInjectionContext(injectNgtsNormalTexture, injector);
+	return runInInjectionContext(injector, () => {
+		const state = computed(() => ({ ...defaultState, ...normalTextureState() }));
+		const normalsList = signal<Record<string, string>>({});
+
+		const DEFAULT_NORMAL = () => normalsList()[0];
+		const numTot = () => Object.keys(normalsList()).length;
+
+		effect(() => {
+			if (!untracked(numTot)) {
+				fetch(LIST_URL)
+					.then((res) => res.json())
+					.then((data) => {
+						normalsList.set(data);
+					});
+			}
+		});
+
+		const imageName = () => normalsList()[state().id] || DEFAULT_NORMAL();
+		const url = () => `${NORMAL_ROOT}/normals/${imageName()}`;
+
+		let texture: Signal<THREE.Texture | null>;
+		const normalTexture = computed(() => {
+			if (url().includes('undefined')) return null;
+			if (!texture) {
+				texture = injectNgtsTextureLoader(url, { onLoad: state().onLoad, injector });
+			}
+			return texture();
+		});
+
+		effect(() => {
+			const _texture = normalTexture();
+			if (!_texture) return;
+
+			const { repeat, offset, anisotropy } = state();
+			_texture.wrapS = _texture.wrapT = THREE.RepeatWrapping;
+			_texture.repeat = new THREE.Vector2(repeat[0], repeat[1]);
+			_texture.offset = new THREE.Vector2(offset[0], offset[1]);
+			_texture.anisotropy = anisotropy;
+		});
+
+		return { texture: normalTexture, numTot, url };
+	});
+}