angular-three-soba 1.3.2 → 1.5.0

package/fesm2020/angular-three-soba-staging.mjs

@@ -4,9 +4,11 @@ import { extend, NgtStore, getLocalState, NgtRxStore, injectNgtRef, NgtArgs, Ngt
 import { shaderMaterial } from 'angular-three-soba/shaders';
 import { Subject, combineLatest, switchMap, isObservable, of, debounceTime, map, takeUntil, startWith, withLatestFrom } from 'rxjs';
 import * as THREE from 'three';
-import { Group, Mesh, PlaneGeometry, DirectionalLight, OrthographicCamera, Vector2, Box3, Vector3, Sphere, MeshBasicMaterial, CubeTextureLoader, CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeCamera, HalfFloatType, Points, BufferGeometry, BufferAttribute, Vector4, Color, MathUtils, AmbientLight, SpotLight, PointLight, Spherical, AdditiveBlending } from 'three';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { HorizontalBlurShader, VerticalBlurShader, RGBELoader, GroundProjectedEnv, Sky } from 'three-stdlib';
+import { Group, Mesh, PlaneGeometry, DirectionalLight, OrthographicCamera, Vector2, Box3, Vector3, Sphere, MeshStandardMaterial, MeshBasicMaterial, CubeTextureLoader, CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeCamera, HalfFloatType, Points, BufferGeometry, BufferAttribute, Vector4, Color, MathUtils, AmbientLight, SpotLight, PointLight, Spherical, AdditiveBlending } from 'three';
+import { SimplexNoise, HorizontalBlurShader, VerticalBlurShader, RGBELoader, GroundProjectedEnv, Sky } from 'three-stdlib';
+import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgtsBillboard } from 'angular-three-soba/abstractions';
+import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
 
 function isLight(object) {
     return object.isLight;
@@ -854,6 +856,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 type: Output
             }] } });
 
+class NgtsCameraShake extends NgtRxStore {
+    set intensity(intensity) {
+        this.set({ intensity });
+    }
+    set decay(decay) {
+        this.set({ decay });
+    }
+    set decayRate(decayRate) {
+        this.set({ decayRate });
+    }
+    set maxYaw(maxYaw) {
+        this.set({ maxYaw });
+    }
+    set maxPitch(maxPitch) {
+        this.set({ maxPitch });
+    }
+    set maxRoll(maxRoll) {
+        this.set({ maxRoll });
+    }
+    set yawFrequency(yawFrequency) {
+        this.set({ yawFrequency });
+    }
+    set pitchFrequency(pitchFrequency) {
+        this.set({ pitchFrequency });
+    }
+    set rollFrequency(rollFrequency) {
+        this.set({ rollFrequency });
+    }
+    initialize() {
+        super.initialize();
+        this.set({
+            intensity: 1,
+            decayRate: 0.65,
+            maxYaw: 0.1,
+            maxPitch: 0.1,
+            maxRoll: 0.1,
+            yawFrequency: 0.1,
+            pitchFrequency: 0.1,
+            rollFrequency: 0.1,
+        });
+    }
+    constructor() {
+        super();
+        this.store = inject(NgtStore);
+        this.initialRotation = this.store.get('camera').rotation.clone();
+        this.yawNoise = new SimplexNoise();
+        this.pitchNoise = new SimplexNoise();
+        this.rollNoise = new SimplexNoise();
+        injectBeforeRender(({ clock, delta, camera }) => {
+            const { intensity, maxYaw, maxPitch, maxRoll, yawFrequency, pitchFrequency, rollFrequency, decay, decayRate, } = this.get();
+            const shake = Math.pow(intensity, 2);
+            const yaw = maxYaw * shake * this.yawNoise.noise(clock.elapsedTime * yawFrequency, 1);
+            const pitch = maxPitch * shake * this.pitchNoise.noise(clock.elapsedTime * pitchFrequency, 1);
+            const roll = maxRoll * shake * this.rollNoise.noise(clock.elapsedTime * rollFrequency, 1);
+            camera.rotation.set(this.initialRotation.x + pitch, this.initialRotation.y + yaw, this.initialRotation.z + roll);
+            if (decay && intensity > 0) {
+                this.set({ intensity: intensity - decayRate * delta });
+                this.constraintIntensity();
+            }
+        });
+    }
+    ngOnInit() {
+        this.setChangeEvent();
+    }
+    setChangeEvent() {
+        this.effect(combineLatest([this.store.select('camera'), this.store.select('controls')]), ([camera, controls]) => {
+            if (controls) {
+                const callback = () => void (this.initialRotation = camera.rotation.clone());
+                controls.addEventListener('change', callback);
+                callback();
+                return () => void controls.removeEventListener('change', callback);
+            }
+        });
+    }
+    getIntensity() {
+        return this.get('intensity');
+    }
+    setIntensity(intensity) {
+        this.set({ intensity });
+        this.constraintIntensity();
+    }
+    constraintIntensity() {
+        const intensity = this.get('intensity');
+        if (intensity < 0 || intensity > 1) {
+            this.set({ intensity: intensity < 0 ? 0 : 1 });
+        }
+    }
+}
+NgtsCameraShake.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCameraShake, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtsCameraShake.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: NgtsCameraShake, isStandalone: true, selector: "ngts-camera-shake", inputs: { intensity: "intensity", decay: "decay", decayRate: "decayRate", maxYaw: "maxYaw", maxPitch: "maxPitch", maxRoll: "maxRoll", yawFrequency: "yawFrequency", pitchFrequency: "pitchFrequency", rollFrequency: "rollFrequency" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCameraShake, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngts-camera-shake',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { intensity: [{
+                type: Input
+            }], decay: [{
+                type: Input
+            }], decayRate: [{
+                type: Input
+            }], maxYaw: [{
+                type: Input
+            }], maxPitch: [{
+                type: Input
+            }], maxRoll: [{
+                type: Input
+            }], yawFrequency: [{
+                type: Input
+            }], pitchFrequency: [{
+                type: Input
+            }], rollFrequency: [{
+                type: Input
+            }] } });
+
 extend({ Group });
 class NgtsCenter extends NgtRxStore {
     constructor() {
@@ -991,6 +1109,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 type: Output
             }] } });
 
+const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png';
+extend({ Group, Mesh, PlaneGeometry, MeshStandardMaterial });
+class NgtsCloud extends NgtRxStore {
+    constructor() {
+        super(...arguments);
+        this.store = inject(NgtStore);
+        this.encoding = this.store.get('gl', 'outputEncoding');
+        this.groupRef = injectNgtRef();
+        this.clouds$ = this.select('clouds');
+        this.cloudTexture$ = injectNgtsTextureLoader(this.select('texture'));
+    }
+    set opacity(opacity) {
+        this.set({ opacity });
+    }
+    set speed(speed) {
+        this.set({ speed });
+    }
+    set width(width) {
+        this.set({ width });
+    }
+    set depth(depth) {
+        this.set({ depth });
+    }
+    set segments(segments) {
+        this.set({ segments });
+    }
+    set texture(texture) {
+        this.set({ texture });
+    }
+    set color(color) {
+        this.set({ color });
+    }
+    set depthTest(depthTest) {
+        this.set({ depthTest });
+    }
+    initialize() {
+        super.initialize();
+        this.set({
+            opacity: 0.5,
+            speed: 0.4,
+            width: 10,
+            depth: 1.5,
+            segments: 20,
+            texture: CLOUD_URL,
+            color: '#ffffff',
+            depthTest: true,
+        });
+        this.connect('clouds', this.select(['width', 'segments', 'speed'], ({ width, segments, speed }) => {
+            return [...new Array(segments)].map((_, index) => ({
+                x: width / 2 - Math.random() * width,
+                y: width / 2 - Math.random() * width,
+                scale: 0.4 + Math.sin(((index + 1) / segments) * Math.PI) * ((0.2 + Math.random()) * 10),
+                density: Math.max(0.2, Math.random()),
+                rotation: Math.max(0.002, 0.005 * Math.random()) * speed,
+            }));
+        }));
+    }
+    onBeforeRender({ state, object }) {
+        const clouds = this.get('clouds');
+        object.children.forEach((cloud, index) => {
+            cloud.children[0].rotation.z += clouds[index].rotation;
+            cloud.children[0].scale.setScalar(clouds[index].scale + (((1 + Math.sin(state.clock.getElapsedTime() / 10)) / 2) * index) / 10);
+        });
+    }
+}
+NgtsCloud.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCloud, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsCloud.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsCloud, isStandalone: true, selector: "ngts-cloud", inputs: { groupRef: "groupRef", opacity: "opacity", speed: "speed", width: "width", depth: "depth", segments: "segments", texture: "texture", color: "color", depthTest: "depthTest" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-group ngtCompound [ref]="groupRef">
+            <ngt-group
+                [position]="[0, 0, (get('segments') / 2) * get('depth')]"
+                (beforeRender)="onBeforeRender($any($event))"
+            >
+                <ngts-billboard
+                    *ngFor="let cloud of clouds$ | ngtPush : []; let i = index"
+                    [position]="[cloud.x, cloud.y, -i * get('depth')]"
+                >
+                    <ngt-mesh [scale]="cloud.scale" [rotation]="[0, 0, 0]">
+                        <ngt-plane-geometry />
+                        <!-- we use ngIf here for texture because by the time ngt-value is initialized -->
+                        <!-- [map] has not been resolved yet. we ngIf it so that texture is available before -->
+                        <ngt-mesh-standard-material
+                            *ngIf="cloudTexture$ | ngtPush as cloudTexture"
+                            [transparent]="true"
+                            [map]="cloudTexture"
+                            [depthTest]="get('depthTest')"
+                            [opacity]="(cloud.scale / 6) * cloud.density * get('opacity')"
+                            [color]="get('color')"
+                        >
+                            <ngt-value [rawValue]="encoding" attach="map.encoding" />
+                        </ngt-mesh-standard-material>
+                    </ngt-mesh>
+                </ngts-billboard>
+            </ngt-group>
+        </ngt-group>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "component", type: NgtsBillboard, selector: "ngts-billboard", inputs: ["billboardRef", "follow", "lockX", "lockY", "lockZ"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCloud, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-cloud',
+                    standalone: true,
+                    template: `
+        <ngt-group ngtCompound [ref]="groupRef">
+            <ngt-group
+                [position]="[0, 0, (get('segments') / 2) * get('depth')]"
+                (beforeRender)="onBeforeRender($any($event))"
+            >
+                <ngts-billboard
+                    *ngFor="let cloud of clouds$ | ngtPush : []; let i = index"
+                    [position]="[cloud.x, cloud.y, -i * get('depth')]"
+                >
+                    <ngt-mesh [scale]="cloud.scale" [rotation]="[0, 0, 0]">
+                        <ngt-plane-geometry />
+                        <!-- we use ngIf here for texture because by the time ngt-value is initialized -->
+                        <!-- [map] has not been resolved yet. we ngIf it so that texture is available before -->
+                        <ngt-mesh-standard-material
+                            *ngIf="cloudTexture$ | ngtPush as cloudTexture"
+                            [transparent]="true"
+                            [map]="cloudTexture"
+                            [depthTest]="get('depthTest')"
+                            [opacity]="(cloud.scale / 6) * cloud.density * get('opacity')"
+                            [color]="get('color')"
+                        >
+                            <ngt-value [rawValue]="encoding" attach="map.encoding" />
+                        </ngt-mesh-standard-material>
+                    </ngt-mesh>
+                </ngts-billboard>
+            </ngt-group>
+        </ngt-group>
+    `,
+                    imports: [NgFor, NgtPush, NgtsBillboard, NgIf],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { groupRef: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], speed: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], depth: [{
+                type: Input
+            }], segments: [{
+                type: Input
+            }], texture: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], depthTest: [{
+                type: Input
+            }] } });
+
 extend({ Group, Mesh, MeshBasicMaterial, OrthographicCamera });
 class NgtsContactShadows extends NgtRxStore {
     set opacity(opacity) {
@@ -2655,5 +2925,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGTS_BOUNDS_API, NgtsAccumulativeShadows, NgtsBounds, NgtsCenter, NgtsContactShadows, NgtsEnvironment, NgtsEnvironmentContent, NgtsFloat, NgtsRandomizedLights, NgtsSky, NgtsSparkles, NgtsStage, NgtsStageRefit, NgtsStars, calcPosFromAngles, ngtsEnvironmentPresetsObj };
+export { NGTS_BOUNDS_API, NgtsAccumulativeShadows, NgtsBounds, NgtsCameraShake, NgtsCenter, NgtsCloud, NgtsContactShadows, NgtsEnvironment, NgtsEnvironmentContent, NgtsFloat, NgtsRandomizedLights, NgtsSky, NgtsSparkles, NgtsStage, NgtsStageRefit, NgtsStars, calcPosFromAngles, ngtsEnvironmentPresetsObj };
 //# sourceMappingURL=angular-three-soba-staging.mjs.map