docs(soba): adjust matcap and normal texture stories

Author: nartc

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

@@ -3,7 +3,7 @@ import { Meta } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { NgtsMatcapTexture, NgtsMatcapTextureOptions } from 'angular-three-soba/staging';
-import { Mesh } from 'three';
+import { Mesh, SRGBColorSpace, Texture } from 'three';
 import { GLTF } from 'three-stdlib';
 import { number, storyDecorators, storyObject } from '../setup-canvas';
 
@@ -18,7 +18,9 @@ interface SuzyGLTF extends GLTF {
 
 		@if (gltf(); as gltf) {
 			<ngt-mesh [geometry]="gltf.nodes.Suzanne.geometry">
-				<ngt-mesh-matcap-material *matcapTexture="options(); let texture" [matcap]="texture()" />
+				<ng-template [matcapTexture]="options()" (matcapTextureLoaded)="onLoaded($event[0])" let-texture>
+					<ngt-mesh-matcap-material [matcap]="texture()" />
+				</ng-template>
 			</ngt-mesh>
 		}
 	`,
@@ -29,6 +31,10 @@ interface SuzyGLTF extends GLTF {
 class DefaultMatcapTextureStory {
 	options = input<NgtsMatcapTextureOptions>();
 	gltf = injectGLTF<SuzyGLTF>(() => './suzanne.glb', { useDraco: true });
+
+	onLoaded(texture: Texture) {
+		texture.colorSpace = SRGBColorSpace;
+	}
 }
 
 export default {

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

@@ -2,7 +2,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, i
 import { Meta } from '@storybook/angular';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { NgtsNormalTexture, NgtsNormalTextureOptions } from 'angular-three-soba/staging';
-import { Mesh, Vector2 } from 'three';
+import { Mesh, SRGBColorSpace, Texture, Vector2 } from 'three';
 import { GLTF } from 'three-stdlib';
 import { storyDecorators, storyObject } from '../setup-canvas';
 
@@ -15,14 +15,15 @@ interface SuzyGLTF extends GLTF {
 	template: `
 		@if (gltf(); as gltf) {
 			<ngt-mesh [geometry]="gltf.nodes.Suzanne.geometry">
-				<ngt-mesh-standard-material
-					*normalTexture="options(); let texture"
-					color="darkmagenta"
-					[normalMap]="texture()"
-					[normalScale]="normalScale()"
-					[roughness]="0.9"
-					[metalness]="0.1"
-				/>
+				<ng-template [normalTexture]="options()" (normalTextureLoaded)="onLoaded($event[0])" let-texture>
+					<ngt-mesh-standard-material
+						color="darkmagenta"
+						[normalMap]="texture()"
+						[normalScale]="normalScale()"
+						[roughness]="0.9"
+						[metalness]="0.1"
+					/>
+				</ng-template>
 			</ngt-mesh>
 		}
 	`,
@@ -39,6 +40,10 @@ class DefaultNormalTextureStory {
 		if (!repeat) return undefined;
 		return new Vector2().fromArray(repeat);
 	});
+
+	onLoaded(texture: Texture) {
+		texture.colorSpace = SRGBColorSpace;
+	}
 }
 
 export default {