@playcanvas/web-components 0.1.5 → 0.1.6

package/src/components/sound-component.ts

@@ -8,10 +8,18 @@ import { ComponentElement } from './component';
  * @category Components
  */
 class SoundComponentElement extends ComponentElement {
+    private _distanceModel: 'exponential' | 'inverse' | 'linear' = 'linear';
+
+    private _maxDistance: number = 10000;
+
     private _pitch: number = 1;
 
     private _positional: boolean = false;
 
+    private _refDistance: number = 1;
+
+    private _rollOffFactor: number = 1;
+
     private _volume: number = 1;
 
     constructor() {
@@ -20,8 +28,12 @@ class SoundComponentElement extends ComponentElement {
 
     getInitialComponentData() {
         return {
+            distanceModel: this._distanceModel,
+            maxDistance: this._maxDistance,
             pitch: this._pitch,
             positional: this._positional,
+            refDistance: this._refDistance,
+            rollOffFactor: this._rollOffFactor,
             volume: this._volume
         };
     }
@@ -34,6 +46,44 @@ class SoundComponentElement extends ComponentElement {
         return super.component as SoundComponent | null;
     }
 
+    /**
+     * Sets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
+     * @param value - The distance model.
+     */
+    set distanceModel(value: 'exponential' | 'inverse' | 'linear') {
+        this._distanceModel = value;
+        if (this.component) {
+            this.component.distanceModel = value;
+        }
+    }
+
+    /**
+     * Gets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
+     * @returns The distance model.
+     */
+    get distanceModel(): 'exponential' | 'inverse' | 'linear' {
+        return this._distanceModel;
+    }
+
+    /**
+     * Sets the maximum distance from the listener at which audio falloff stops.
+     * @param value - The max distance.
+     */
+    set maxDistance(value: number) {
+        this._maxDistance = value;
+        if (this.component) {
+            this.component.maxDistance = value;
+        }
+    }
+
+    /**
+     * Gets the maximum distance from the listener at which audio falloff stops.
+     * @returns The max distance.
+     */
+    get maxDistance() {
+        return this._maxDistance;
+    }
+
     /**
      * Sets the pitch of the sound.
      * @param value - The pitch.
@@ -72,6 +122,44 @@ class SoundComponentElement extends ComponentElement {
         return this._positional;
     }
 
+    /**
+     * Sets the reference distance for reducing volume as the sound source moves further from the listener. Defaults to 1.
+     * @param value - The ref distance.
+     */
+    set refDistance(value: number) {
+        this._refDistance = value;
+        if (this.component) {
+            this.component.refDistance = value;
+        }
+    }
+
+    /**
+     * Gets the reference distance for reducing volume as the sound source moves further from the listener.
+     * @returns The ref distance.
+     */
+    get refDistance() {
+        return this._refDistance;
+    }
+
+    /**
+     * Sets the factor used in the falloff equation. Defaults to 1.
+     * @param value - The roll-off factor.
+     */
+    set rollOffFactor(value: number) {
+        this._rollOffFactor = value;
+        if (this.component) {
+            this.component.rollOffFactor = value;
+        }
+    }
+
+    /**
+     * Gets the factor used in the falloff equation.
+     * @returns The roll-off factor.
+     */
+    get rollOffFactor() {
+        return this._rollOffFactor;
+    }
+
     /**
      * Sets the volume of the sound.
      * @param value - The volume.
@@ -92,19 +180,40 @@ class SoundComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [...super.observedAttributes, 'pitch', 'positional', 'volume'];
+        return [
+            ...super.observedAttributes,
+            'distance-model',
+            'max-distance',
+            'pitch',
+            'positional',
+            'ref-distance',
+            'roll-off-factor',
+            'volume'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
+            case 'distance-model':
+                this.distanceModel = newValue as 'exponential' | 'inverse' | 'linear';
+                break;
+            case 'max-distance':
+                this.maxDistance = parseFloat(newValue);
+                break;
             case 'pitch':
                 this.pitch = parseFloat(newValue);
                 break;
             case 'positional':
                 this.positional = this.hasAttribute('positional');
                 break;
+            case 'ref-distance':
+                this.refDistance = parseFloat(newValue);
+                break;
+            case 'roll-off-factor':
+                this.rollOffFactor = parseFloat(newValue);
+                break;
             case 'volume':
                 this.volume = parseFloat(newValue);
                 break;

package/src/module.ts

@@ -1,4 +1,4 @@
-import { WasmModule } from 'playcanvas';
+import { basisInitialize, WasmModule } from 'playcanvas';
 
 class ModuleElement extends HTMLElement {
     private loadPromise: Promise<void>;
@@ -14,15 +14,23 @@ class ModuleElement extends HTMLElement {
         const wasm = this.getAttribute('wasm')!;
         const fallback = this.getAttribute('fallback')!;
 
-        WasmModule.setConfig(name, {
-            glueUrl: glue,
-            wasmUrl: wasm,
-            fallbackUrl: fallback
-        });
-
-        await new Promise<void>((resolve) => {
-            WasmModule.getInstance(name, () => resolve());
-        });
+        if (name === 'Basis') {
+            basisInitialize({
+                glueUrl: glue,
+                wasmUrl: wasm,
+                fallbackUrl: fallback
+            });
+        } else {
+            WasmModule.setConfig(name, {
+                glueUrl: glue,
+                wasmUrl: wasm,
+                fallbackUrl: fallback
+            });
+
+            await new Promise<void>((resolve) => {
+                WasmModule.getInstance(name, () => resolve());
+            });
+        }
     }
 
     public getLoadPromise(): Promise<void> {