fix: clean up spotlight

angular-threejs · Feb 12, 2023 · 47ea727 · 47ea727
1 parent b5e84d1
commit 47ea727
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 38 deletions.
diff --git a/libs/angular-three-soba/src/staging/spot-light.stories.ts b/libs/angular-three-soba/src/staging/spot-light.stories.ts
@@ -1,7 +1,7 @@
 import { NgIf } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnInit } from '@angular/core';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { checkUpdate, createRunInContext, NgtArgs, NgtInjectedRef, NgtPush, NgtRxStore, NgtStore } from 'angular-three';
+import { checkUpdate, createRunInContext, NgtArgs, NgtInjectedRef, NgtPush, NgtRxStore } from 'angular-three';
 import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
@@ -12,8 +12,6 @@ import * as THREE from 'three';
 import { makeCanvasOptions, StorybookSetup } from '../setup-canvas';
 // @ts-ignore
 
-// TODO(chau): investigate why ngIf doesn't work
-
 @Component({
     standalone: true,
     template: `
@@ -78,6 +76,8 @@ class ShadowsSpotLightStory {
     readonly Math = Math;
     readonly MathUtils = THREE.MathUtils;
 
+    readonly cdr = inject(ChangeDetectorRef);
+
     readonly shader = /* glsl */ `
             varying vec2 vUv;
             uniform sampler2D uShadowMap;
@@ -110,18 +110,12 @@ class ShadowsSpotLightStory {
     );
 
     readonly leaf$ = injectNgtsTextureLoader('/soba/textures/other/leaves.jpg');
-
-    readonly store = inject(NgtStore);
-
-    ngOnInit() {
-        console.log(this.store.get('scene'));
-    }
 }
 
 @Component({
     standalone: true,
     template: `
-        <ng-container *ngIf="depthBuffer.nativeElement">
+        <ng-container *ngIf="depthBuffer?.nativeElement">
             <ngts-spot-light
                 [penumbra]="0.5"
                 [depthBuffer]="depthBuffer.nativeElement"

diff --git a/libs/angular-three-soba/staging/src/lib/spot-light/shadow-mesh-input.ts b/libs/angular-three-soba/staging/src/lib/spot-light/shadow-mesh-input.ts
@@ -1,10 +1,8 @@
-import { ChangeDetectorRef, Directive, inject, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 import { NgtRxStore } from 'angular-three';
 
 @Directive()
 export abstract class NgtsSpotLightShadowMeshInput extends NgtRxStore {
-    private readonly cdr = inject(ChangeDetectorRef);
-
     @Input() set distance(distance: number) {
         this.set({ distance });
     }
@@ -23,7 +21,6 @@ export abstract class NgtsSpotLightShadowMeshInput extends NgtRxStore {
 
     @Input() set shader(shader: string) {
         this.set({ shader });
-        this.cdr.detectChanges();
     }
 
     @Input() set width(width: number) {

diff --git a/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow-no-shader.ts b/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow-no-shader.ts
@@ -1,6 +1,5 @@
-import { NgIf } from '@angular/common';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
-import { createRunInContext, extend, injectNgtRef } from 'angular-three';
+import { checkUpdate, createRunInContext, extend, injectNgtRef, NgtPush } from 'angular-three';
 import * as THREE from 'three';
 import { Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
 import { injectShadowMeshCommon } from './common';
@@ -16,34 +15,36 @@ extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
         <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
             <ngt-plane-geometry />
             <ngt-mesh-basic-material
-                *ngIf="!!get('map')"
                 [transparent]="true"
                 [side]="DoubleSide"
                 [alphaTest]="get('alphaTest')"
-                [alphaMap]="get('map')"
+                [alphaMap]="key$('map') | ngtPush"
                 [opacity]="spotLightApi.debug ? 1 : 0"
             >
-                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapS" />
-                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapT" />
                 <ng-content />
             </ngt-mesh-basic-material>
         </ngt-mesh>
     `,
-    imports: [NgIf],
+    imports: [NgtPush],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtsSpotLightShadowNoShader extends NgtsSpotLightShadowMeshInput implements OnInit {
     readonly mesh = injectNgtRef<THREE.Mesh>();
     readonly spotLightApi = inject(NGTS_SPOT_LIGHT_API);
 
     readonly DoubleSide = THREE.DoubleSide;
-    readonly RepeatWrapping = THREE.RepeatWrapping;
 
     readonly runInContext = createRunInContext();
 
     override initialize(): void {
         super.initialize();
         this.set({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512 });
+        this.hold(this.select('map'), (map) => {
+            if (map) {
+                map.wrapS = map.wrapT = THREE.RepeatWrapping;
+                checkUpdate(map);
+            }
+        });
     }
 
     ngOnInit() {

diff --git a/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow.ts b/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow.ts
@@ -10,7 +10,7 @@ import { NgtsSpotLightShadowShader } from './spot-light-shadow-shader';
     standalone: true,
     template: `
         <ngts-spot-light-shadow-shader
-            *ngIf="!!get('shader')"
+            *ngIf="!!get('shader'); else noShader"
             [distance]="get('distance')"
             [shader]="get('shader')"
             [alphaTest]="get('alphaTest')"
@@ -19,15 +19,16 @@ import { NgtsSpotLightShadowShader } from './spot-light-shadow-shader';
             [width]="get('width')"
             [height]="get('height')"
         />
-        <ngts-spot-light-shadow-no-shader
-            *ngIf="!get('shader')"
-            [distance]="get('distance')"
-            [alphaTest]="get('alphaTest')"
-            [scale]="get('scale')"
-            [map]="get('map')"
-            [width]="get('width')"
-            [height]="get('height')"
-        />
+        <ng-template #noShader>
+            <ngts-spot-light-shadow-no-shader
+                [distance]="get('distance')"
+                [alphaTest]="get('alphaTest')"
+                [scale]="get('scale')"
+                [map]="get('map')"
+                [width]="get('width')"
+                [height]="get('height')"
+            />
+        </ng-template>
     `,
     imports: [NgtsSpotLightShadowShader, NgtsSpotLightShadowNoShader, NgIf, NgtPush],
 })

diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
         "@angular/router": "~15.1.4",
         "@rx-angular/state": "^1.7.0",
         "@swc/helpers": "~0.4.14",
-        "angular-three": "^1.6.9",
+        "angular-three": "^1.6.11",
         "rxjs": "~7.8.0",
         "stats.js": "^0.17.0",
         "three": "0.149",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml