@playcanvas/web-components 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/web-components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://playcanvas.com",
   "description": "Web Components for the PlayCanvas Engine",
@@ -55,18 +55,18 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "12.3.0",
     "@tweenjs/tween.js": "25.0.0",
-    "@typescript-eslint/eslint-plugin": "8.60.0",
-    "@typescript-eslint/parser": "8.60.0",
-    "concurrently": "10.0.0",
+    "@typescript-eslint/eslint-plugin": "8.61.0",
+    "@typescript-eslint/parser": "8.61.0",
+    "concurrently": "10.0.3",
     "earcut": "3.0.2",
     "eslint": "9.39.4",
-    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-import-resolver-typescript": "4.4.5",
     "globals": "17.6.0",
-    "mediabunny": "1.45.4",
+    "mediabunny": "1.46.0",
     "opentype.js": "2.0.0",
-    "playcanvas": "2.19.1",
+    "playcanvas": "2.19.7",
     "publint": "0.3.21",
-    "rollup": "4.60.4",
+    "rollup": "4.62.0",
     "serve": "14.2.6",
     "tslib": "2.8.1",
     "typedoc": "0.28.19",

package/src/components/gsplat-component.ts

@@ -0,0 +1,161 @@
+import { GSplatComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { AssetElement } from '../asset';
+
+/**
+ * The GSplatComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-gsplat/ | `<pc-gsplat>`} elements.
+ * The GSplatComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class GSplatComponentElement extends ComponentElement {
+    private _asset = '';
+
+    private _castShadows = false;
+
+    private _lodBaseDistance = 5;
+
+    private _lodMultiplier = 3;
+
+    /** @ignore */
+    constructor() {
+        super('gsplat');
+    }
+
+    getInitialComponentData() {
+        return {
+            asset: AssetElement.get(this._asset),
+            castShadows: this._castShadows,
+            lodBaseDistance: this._lodBaseDistance,
+            lodMultiplier: this._lodMultiplier
+        };
+    }
+
+    /**
+     * Gets the underlying PlayCanvas gsplat component.
+     * @returns The gsplat component.
+     */
+    get component(): GSplatComponent | null {
+        return super.component as GSplatComponent | null;
+    }
+
+    /**
+     * Sets id of the `pc-asset` to use for the splat.
+     * @param value - The asset ID.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        const asset = AssetElement.get(value);
+        if (this.component && asset) {
+            this.component.asset = asset;
+        }
+    }
+
+    /**
+     * Gets the id of the `pc-asset` to use for the splat.
+     * @returns The asset ID.
+     */
+    get asset() {
+        return this._asset;
+    }
+
+    /**
+     * Sets whether the splat casts shadows.
+     * @param value - Whether the splat casts shadows.
+     */
+    set castShadows(value: boolean) {
+        this._castShadows = value;
+        if (this.component) {
+            this.component.castShadows = value;
+        }
+    }
+
+    /**
+     * Gets whether the splat casts shadows.
+     * @returns Whether the splat casts shadows.
+     */
+    get castShadows() {
+        return this._castShadows;
+    }
+
+    /**
+     * Sets the base distance for the first LOD transition (LOD 0 to LOD 1). Splats closer than
+     * this distance use the highest quality LOD. Each subsequent LOD level transitions at a
+     * progressively larger distance, controlled by {@link lodMultiplier}. Clamped to a minimum of
+     * 0.1. Defaults to 5. Only affects assets that contain LOD levels (e.g. `.lod-meta.json`).
+     * @param value - The LOD base distance.
+     */
+    set lodBaseDistance(value: number) {
+        this._lodBaseDistance = value;
+        if (this.component) {
+            this.component.lodBaseDistance = value;
+        }
+    }
+
+    /**
+     * Gets the base distance for the first LOD transition.
+     * @returns The LOD base distance.
+     */
+    get lodBaseDistance() {
+        return this._lodBaseDistance;
+    }
+
+    /**
+     * Sets the multiplier between successive LOD distance thresholds. Each LOD level transitions
+     * at this factor times the previous level's distance, creating a geometric progression. Lower
+     * values keep higher quality at distance; higher values switch to coarser LODs sooner. Clamped
+     * to a minimum of 1.2. Defaults to 3. Only affects assets that contain LOD levels (e.g.
+     * `.lod-meta.json`).
+     * @param value - The LOD multiplier.
+     */
+    set lodMultiplier(value: number) {
+        this._lodMultiplier = value;
+        if (this.component) {
+            this.component.lodMultiplier = value;
+        }
+    }
+
+    /**
+     * Gets the multiplier between successive LOD distance thresholds.
+     * @returns The LOD multiplier.
+     */
+    get lodMultiplier() {
+        return this._lodMultiplier;
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'asset',
+            'cast-shadows',
+            'lod-base-distance',
+            'lod-multiplier'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+            case 'cast-shadows':
+                this.castShadows = this.hasAttribute('cast-shadows');
+                break;
+            case 'lod-base-distance':
+                this.lodBaseDistance = Number(newValue);
+                break;
+            case 'lod-multiplier':
+                this.lodMultiplier = Number(newValue);
+                break;
+        }
+    }
+}
+
+customElements.define('pc-gsplat', GSplatComponentElement);
+
+export { GSplatComponentElement };

package/src/index.ts

@@ -29,7 +29,7 @@ import { ScriptComponentElement } from './components/script-component';
 import { ScriptElement } from './components/script';
 import { SoundComponentElement } from './components/sound-component';
 import { SoundSlotElement } from './components/sound-slot';
-import { SplatComponentElement } from './components/splat-component';
+import { GSplatComponentElement } from './components/gsplat-component';
 import { MaterialElement } from './material';
 import { ModelElement } from './model';
 import { SceneElement } from './scene';
@@ -55,7 +55,7 @@ export {
     ScriptElement,
     SoundComponentElement,
     SoundSlotElement,
-    SplatComponentElement,
+    GSplatComponentElement,
     MaterialElement,
     ModelElement,
     SceneElement,

package/dist/components/splat-component.d.ts

@@ -1,48 +0,0 @@
-import { GSplatComponent } from 'playcanvas';
-import { ComponentElement } from './component';
-/**
- * The SplatComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
- * The SplatComponentElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- *
- * @category Components
- */
-declare class SplatComponentElement extends ComponentElement {
-    private _asset;
-    private _castShadows;
-    /** @ignore */
-    constructor();
-    getInitialComponentData(): {
-        asset: import("playcanvas").Asset | null | undefined;
-        castShadows: boolean;
-    };
-    /**
-     * Gets the underlying PlayCanvas splat component.
-     * @returns The splat component.
-     */
-    get component(): GSplatComponent | null;
-    /**
-     * Sets id of the `pc-asset` to use for the splat.
-     * @param value - The asset ID.
-     */
-    set asset(value: string);
-    /**
-     * Gets the id of the `pc-asset` to use for the splat.
-     * @returns The asset ID.
-     */
-    get asset(): string;
-    /**
-     * Sets whether the splat casts shadows.
-     * @param value - Whether the splat casts shadows.
-     */
-    set castShadows(value: boolean);
-    /**
-     * Gets whether the splat casts shadows.
-     * @returns Whether the splat casts shadows.
-     */
-    get castShadows(): boolean;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
-}
-export { SplatComponentElement };

package/src/components/splat-component.ts

@@ -1,102 +0,0 @@
-import { GSplatComponent } from 'playcanvas';
-
-import { ComponentElement } from './component';
-import { AssetElement } from '../asset';
-
-/**
- * The SplatComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
- * The SplatComponentElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- *
- * @category Components
- */
-class SplatComponentElement extends ComponentElement {
-    private _asset = '';
-
-    private _castShadows = false;
-
-    /** @ignore */
-    constructor() {
-        super('gsplat');
-    }
-
-    getInitialComponentData() {
-        return {
-            asset: AssetElement.get(this._asset),
-            castShadows: this._castShadows
-        };
-    }
-
-    /**
-     * Gets the underlying PlayCanvas splat component.
-     * @returns The splat component.
-     */
-    get component(): GSplatComponent | null {
-        return super.component as GSplatComponent | null;
-    }
-
-    /**
-     * Sets id of the `pc-asset` to use for the splat.
-     * @param value - The asset ID.
-     */
-    set asset(value: string) {
-        this._asset = value;
-        const asset = AssetElement.get(value);
-        if (this.component && asset) {
-            this.component.asset = asset;
-        }
-    }
-
-    /**
-     * Gets the id of the `pc-asset` to use for the splat.
-     * @returns The asset ID.
-     */
-    get asset() {
-        return this._asset;
-    }
-
-    /**
-     * Sets whether the splat casts shadows.
-     * @param value - Whether the splat casts shadows.
-     */
-    set castShadows(value: boolean) {
-        this._castShadows = value;
-        if (this.component) {
-            this.component.castShadows = value;
-        }
-    }
-
-    /**
-     * Gets whether the splat casts shadows.
-     * @returns Whether the splat casts shadows.
-     */
-    get castShadows() {
-        return this._castShadows;
-    }
-
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'asset',
-            'cast-shadows'
-        ];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        super.attributeChangedCallback(name, _oldValue, newValue);
-
-        switch (name) {
-            case 'asset':
-                this.asset = newValue;
-                break;
-            case 'cast-shadows':
-                this.castShadows = this.hasAttribute('cast-shadows');
-                break;
-        }
-    }
-}
-
-customElements.define('pc-splat', SplatComponentElement);
-
-export { SplatComponentElement };