@playcanvas/web-components 0.3.0 → 0.6.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2011-2026 PlayCanvas Ltd.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2011-2026 PlayCanvas Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,84 +1,84 @@
-# PlayCanvas Web Components
-
-[![NPM Version](https://img.shields.io/npm/v/@playcanvas/web-components)](https://www.npmjs.com/package/@playcanvas/web-components)
-[![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/web-components)](https://npmtrends.com/@playcanvas/web-components)
-[![License](https://img.shields.io/npm/l/@playcanvas/web-components)](https://github.com/playcanvas/web-components/blob/main/LICENSE)
-[![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
-[![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
-[![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)
-
-| [User Manual](https://developer.playcanvas.com//user-manual/web-components) | [API Reference](https://api.playcanvas.com/web-components) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |
-
-PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:
-
-```html
-<!-- A lit sphere -->
-<pc-app>
-    <pc-scene>
-        <pc-entity name="camera" position="0 0 3">
-            <pc-camera></pc-camera>
-        </pc-entity>
-        <pc-entity name="light" rotation="45 45 0">
-            <pc-light></pc-light>
-        </pc-entity>
-        <pc-entity name="ball">
-            <pc-render type="sphere"></pc-render>
-        </pc-entity>
-    </pc-scene>
-</pc-app>
-```
-
-## Examples
-
-[![image](https://github.com/user-attachments/assets/25ac8dd3-abc9-4d65-8950-3d72ed1f7152)](https://playcanvas.github.io/web-components/examples)
-
-See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples
-
-## Usage
-
-Please see the [Getting Started Guide](https://developer.playcanvas.com/user-manual/web-components/getting-started/) for installation and usage instructions.
-
-## Development 
-
-### Setting Up Local Development
-
-1. Clone the repository:
-
-   ```bash
-   git clone https://github.com/playcanvas/web-components.git
-   cd web-components
-   ```
-
-2. Install dependencies:
-
-   ```bash
-   npm install
-   ```
-
-3. Build the library in watch mode and start the development server:
-
-   ```bash
-   npm run dev
-   ```
-
-4. Open http://localhost:3000/examples/ in your browser to see the examples.
-
-### Building
-
-To build the library:
-
-```bash
-npm run build
-```
-
-The built files will be available in the `dist` directory.
-
-### API Documentation
-
-To generate API documentation:
-
-```bash
-npm run docs
-```
-
-The documentation will be generated in the `docs` directory.
+# PlayCanvas Web Components
+
+[![NPM Version](https://img.shields.io/npm/v/@playcanvas/web-components)](https://www.npmjs.com/package/@playcanvas/web-components)
+[![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/web-components)](https://npmtrends.com/@playcanvas/web-components)
+[![License](https://img.shields.io/npm/l/@playcanvas/web-components)](https://github.com/playcanvas/web-components/blob/main/LICENSE)
+[![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
+[![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
+[![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)
+
+| [User Manual](https://developer.playcanvas.com//user-manual/web-components) | [API Reference](https://api.playcanvas.com/web-components) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |
+
+PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:
+
+```html
+<!-- A lit sphere -->
+<pc-app>
+    <pc-scene>
+        <pc-entity name="camera" position="0 0 3">
+            <pc-camera></pc-camera>
+        </pc-entity>
+        <pc-entity name="light" rotation="45 45 0">
+            <pc-light></pc-light>
+        </pc-entity>
+        <pc-entity name="ball">
+            <pc-render type="sphere"></pc-render>
+        </pc-entity>
+    </pc-scene>
+</pc-app>
+```
+
+## Examples
+
+[![image](https://github.com/user-attachments/assets/25ac8dd3-abc9-4d65-8950-3d72ed1f7152)](https://playcanvas.github.io/web-components/examples)
+
+See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples
+
+## Usage
+
+Please see the [Getting Started Guide](https://developer.playcanvas.com/user-manual/web-components/getting-started/) for installation and usage instructions.
+
+## Development 
+
+### Setting Up Local Development
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/playcanvas/web-components.git
+   cd web-components
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Build the library in watch mode and start the development server:
+
+   ```bash
+   npm run dev
+   ```
+
+4. Open http://localhost:3000/examples/ in your browser to see the examples.
+
+### Building
+
+To build the library:
+
+```bash
+npm run build
+```
+
+The built files will be available in the `dist` directory.
+
+### API Documentation
+
+To generate API documentation:
+
+```bash
+npm run docs
+```
+
+The documentation will be generated in the `docs` directory.

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

@@ -0,0 +1,79 @@
+import { GSplatComponent } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * 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
+ */
+declare class GSplatComponentElement extends ComponentElement {
+    private _asset;
+    private _castShadows;
+    private _lodBaseDistance;
+    private _lodMultiplier;
+    /** @ignore */
+    constructor();
+    getInitialComponentData(): {
+        asset: import("playcanvas").Asset | null | undefined;
+        castShadows: boolean;
+        lodBaseDistance: number;
+        lodMultiplier: number;
+    };
+    /**
+     * Gets the underlying PlayCanvas gsplat component.
+     * @returns The gsplat 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;
+    /**
+     * 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);
+    /**
+     * Gets the base distance for the first LOD transition.
+     * @returns The LOD base distance.
+     */
+    get lodBaseDistance(): number;
+    /**
+     * 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);
+    /**
+     * Gets the multiplier between successive LOD distance thresholds.
+     * @returns The LOD multiplier.
+     */
+    get lodMultiplier(): number;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { GSplatComponentElement };

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

@@ -24,6 +24,10 @@ declare class LightComponentElement extends ComponentElement {
     private _type;
     private _vsmBias;
     private _vsmBlurSize;
+    private _penumbraSize;
+    private _penumbraFalloff;
+    private _shadowSamples;
+    private _shadowBlockerSamples;
     /** @ignore */
     constructor();
     getInitialComponentData(): {
@@ -33,11 +37,15 @@ declare class LightComponentElement extends ComponentElement {
         intensity: number;
         normalOffsetBias: number;
         outerConeAngle: number;
+        penumbraFalloff: number;
+        penumbraSize: number;
         range: number;
         shadowBias: number;
+        shadowBlockerSamples: number;
         shadowDistance: number;
         shadowIntensity: number;
         shadowResolution: number;
+        shadowSamples: number;
         shadowType: 0 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined;
         type: string;
         vsmBias: number;
@@ -208,6 +216,46 @@ declare class LightComponentElement extends ComponentElement {
      * @returns The VSM blur size.
      */
     get vsmBlurSize(): number;
+    /**
+     * Sets the penumbra size of the light. Used for PCSS shadows.
+     * @param value - The penumbra size.
+     */
+    set penumbraSize(value: number);
+    /**
+     * Gets the penumbra size of the light.
+     * @returns The penumbra size.
+     */
+    get penumbraSize(): number;
+    /**
+     * Sets the penumbra falloff of the light. Used for PCSS shadows.
+     * @param value - The penumbra falloff.
+     */
+    set penumbraFalloff(value: number);
+    /**
+     * Gets the penumbra falloff of the light.
+     * @returns The penumbra falloff.
+     */
+    get penumbraFalloff(): number;
+    /**
+     * Sets the number of shadow samples. Used for PCSS shadows.
+     * @param value - The number of shadow samples.
+     */
+    set shadowSamples(value: number);
+    /**
+     * Gets the number of shadow samples.
+     * @returns The number of shadow samples.
+     */
+    get shadowSamples(): number;
+    /**
+     * Sets the number of shadow blocker samples. Used for PCSS shadows.
+     * @param value - The number of shadow blocker samples.
+     */
+    set shadowBlockerSamples(value: number);
+    /**
+     * Gets the number of shadow blocker samples.
+     * @returns The number of shadow blocker samples.
+     */
+    get shadowBlockerSamples(): number;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

package/dist/index.d.ts

@@ -25,9 +25,9 @@ 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';
 import { SkyElement } from './sky';
-export { AsyncElement, ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, ParticleSystemComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, SplatComponentElement, MaterialElement, ModelElement, SceneElement, SkyElement };
+export { AsyncElement, ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, ParticleSystemComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, GSplatComponentElement, MaterialElement, ModelElement, SceneElement, SkyElement };