docs(soba): adjust lightings on some stories

Author: nartc

libs/soba/src/setup-canvas.ts

@@ -222,7 +222,7 @@ export function makeCanvasOptions(options: DeepPartial<CanvasOptions> = {}) {
 export function makeStoryFunction(story: Type<unknown>, canvasOptions: DeepPartial<CanvasOptions> = {}) {
 	return (args: Args) => ({
 		props: { options: makeCanvasOptions(canvasOptions), inputs: args || {}, story },
-		template: `<storybook-setup  [story]="story" [inputs]="inputs" [options]="options" />`,
+		template: `<storybook-setup [story]="story" [inputs]="inputs" [options]="options" />`,
 	});
 }
 

libs/soba/src/shaders/mesh-distort-material.stories.ts

@@ -5,7 +5,7 @@ import { injectBeforeRender, injectNgtRef, NgtArgs } from 'angular-three';
 import distortShader from 'angular-three-soba/assets/distort.vert.glsl';
 import { NgtsMeshDistortMaterial } from 'angular-three-soba/materials';
 import { provideNgtsMeshDistortMaterialShader, type MeshDistortMaterial } from 'angular-three-soba/shaders';
-import { makeDecorators, makeStoryFunction, makeStoryObject, number } from '../setup-canvas';
+import { makeCanvasOptions, makeDecorators, makeStoryFunction, makeStoryObject, number } from '../setup-canvas';
 
 @Component({
 	standalone: true,
@@ -52,12 +52,15 @@ export default {
 	decorators: makeDecorators([provideNgtsMeshDistortMaterialShader(distortShader)]),
 };
 
+const canvasOptions = makeCanvasOptions({ useLegacyLights: true });
+
 export const Default = makeStoryObject(DefaultMeshDistortMaterialStory, {
+	canvasOptions,
 	argsOptions: {
 		speed: number(1, { range: true, max: 10, step: 0.1 }),
 		distort: number(0.6, { range: true, max: 1, step: 0.1 }),
 		radius: number(1, { range: true, max: 1, step: 0.1 }),
 	},
 });
 
-export const Ref = makeStoryFunction(RefMeshDistortMaterialStory);
+export const Ref = makeStoryFunction(RefMeshDistortMaterialStory, canvasOptions);

libs/soba/src/shaders/mesh-reflector-material.stories.ts

@@ -5,7 +5,7 @@ import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
 import { NgtsMeshReflectorMaterial } from 'angular-three-soba/materials';
 import { NgtsEnvironment } from 'angular-three-soba/staging';
 import * as THREE from 'three';
-import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+import { makeCanvasOptions, makeDecorators, makeStoryFunction } from '../setup-canvas';
 
 interface State {
 	blur: [number, number];
@@ -180,7 +180,7 @@ export default {
 	decorators: makeDecorators(),
 };
 
-const canvasOptions = { camera: { fov: 20, position: [-6, 6, 15] } };
+const canvasOptions = makeCanvasOptions({ camera: { fov: 20, position: [-6, 6, 15] }, useLegacyLights: true });
 
 export const Default = makeStoryFunction(DefaultMeshReflectorMaterialStory, canvasOptions);
 export const Plain = makeStoryFunction(PlainMeshReflectorMaterialStory, canvasOptions);

libs/soba/src/shaders/mesh-wobble-material.stories.ts

@@ -2,7 +2,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
 import { injectBeforeRender, injectNgtRef, NgtArgs } from 'angular-three';
 import { NgtsMeshWobbleMaterial } from 'angular-three-soba/materials';
 import { MeshWobbleMaterial } from 'angular-three-soba/shaders';
-import { makeDecorators, makeStoryFunction, makeStoryObject, number } from '../setup-canvas';
+import { makeCanvasOptions, makeDecorators, makeStoryFunction, makeStoryObject, number } from '../setup-canvas';
 
 @Component({
 	standalone: true,
@@ -50,11 +50,14 @@ export default {
 	decorators: makeDecorators(),
 };
 
+const canvasOptions = makeCanvasOptions({ useLegacyLights: true });
+
 export const Default = makeStoryObject(DefaultMeshWobbleMaterialStory, {
+	canvasOptions,
 	argsOptions: {
 		speed: number(1, { range: true, max: 10, step: 0.1 }),
 		factor: number(0.6, { range: true, max: 1, step: 0.1 }),
 	},
 });
 
-export const Ref = makeStoryFunction(RefMeshWobbleMaterialStory);
+export const Ref = makeStoryFunction(RefMeshWobbleMaterialStory, canvasOptions);

libs/soba/src/staging/bounds.stories.ts

@@ -73,8 +73,8 @@ class Models {
 	template: `
 		<ngt-color *args="['pink']" attach="background" />
 
-		<ngt-spot-light [position]="-100" [intensity]="0.2" [angle]="0.3" [penumbra]="1" />
-		<ngt-hemisphere-light color="white" groundColor="#ff0f00" [position]="[-7, 25, 13]" [intensity]="1" />
+		<ngt-spot-light [position]="-100" [intensity]="0.2 * Math.PI" [angle]="0.3" [penumbra]="1" />
+		<ngt-hemisphere-light color="white" groundColor="#ff0f00" [position]="[-7, 25, 13]" [intensity]="Math.PI" />
 
 		<ngts-bounds>
 			<bounds-models />