npm - @playcanvas/web-components - Versions diffs - 0.1.0 - Mend

@playcanvas/web-components 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/LICENSE +21 -0
package/README.md +81 -0
package/dist/app.d.ts +30 -0
package/dist/asset.d.ts +28 -0
package/dist/components/camera-component.d.ts +95 -0
package/dist/components/collision-component.d.ts +47 -0
package/dist/components/component.d.ts +34 -0
package/dist/components/element-component.d.ts +74 -0
package/dist/components/gsplat-component.d.ts +25 -0
package/dist/components/light-component.d.ts +143 -0
package/dist/components/listener-component.d.ts +16 -0
package/dist/components/render-component.d.ts +56 -0
package/dist/components/rigidbody-component.d.ts +86 -0
package/dist/components/script-component.d.ts +16 -0
package/dist/components/script.d.ts +35 -0
package/dist/components/sound-component.d.ts +56 -0
package/dist/components/sound-slot.d.ts +117 -0
package/dist/entity.d.ts +99 -0
package/dist/index.d.ts +21 -0
package/dist/model.d.ts +22 -0
package/dist/module.d.ts +7 -0
package/dist/pwc.cjs +2509 -0
package/dist/pwc.cjs.map +1 -0
package/dist/pwc.js +2513 -0
package/dist/pwc.js.map +1 -0
package/dist/pwc.min.js +2 -0
package/dist/pwc.min.js.map +1 -0
package/dist/pwc.mjs +2488 -0
package/dist/pwc.mjs.map +1 -0
package/dist/scene.d.ts +85 -0
package/dist/sky.d.ts +26 -0
package/dist/utils.d.ts +30 -0
package/package.json +57 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2024 PlayCanvas
+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 ADDED Viewed

@@ -0,0 +1,81 @@
+# PlayCanvas Web Components
+Unleash the power of PlayCanvas in your HTML. PlayCanvas Web Components allows you to write PlayCanvas scenes using only HTML, enabling a clear and concise structure, and making it easier than ever to integrate with other web technologies. Just add tags for entities, components, and assets, and watch your 3D scene come to life!
+## Usage 🚧
+If you are using a bundler (e.g. Rollup), you can install PlayCanvas Web Components and the PlayCanvas Engine using NPM:
+```bash
+npm install playcanvas @playcanvas/web-components --save-dev
+```
+Or you can include it directly in your HTML file from a CDN.
+ES Modules:
+```html
+<script type="module" src="https://esm.run/@playcanvas/web-components@0.1.0"></script>
+```
+UMD:
+```html
+<script src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.0"></script>
+```
+## Example 📖
+Below is a basic example of how to use PlayCanvas Web Components to create a simple 3D scene (a spinning cube):
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>PlayCanvas Web Components - Spinning Cube</title>
+        <script type="importmap">
+            {
+                "imports": {
+                    "playcanvas": "https://esm.run/playcanvas@2.1.0"
+                }
+            }
+        </script>
+        <script type="module" src="https://esm.run/@playcanvas/web-components@0.1.0"></script>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <pc-app>
+            <script type="module">
+                import { registerScript, Script } from 'playcanvas';
+                class Rotate extends Script {
+                    update(dt) {
+                        this.entity.rotate(10 * dt, 20 * dt, 30 * dt);
+                    }
+                }
+                registerScript(Rotate, 'rotate');
+            </script>
+            <pc-scene>
+                <!-- Camera -->
+                <pc-entity name="camera" position="0,0,3">
+                    <pc-camera></pc-camera>
+                </pc-entity>
+                <!-- Light -->
+                <pc-entity name="light" rotation="45,0,0">
+                    <pc-light></pc-light>
+                </pc-entity>
+                <!-- Cube -->
+                <pc-entity name="cube">
+                    <pc-render type="box"></pc-render>
+                    <pc-scripts>
+                        <pc-script name="rotate"></pc-script>
+                    </pc-scripts>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+    </body>
+</html>
+```

package/dist/app.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { Application } from 'playcanvas';
+/**
+ * The main application element.
+ */
+declare class AppElement extends HTMLElement {
+    /**
+     * The canvas element.
+     */
+    private _canvas;
+    private appReadyPromise;
+    private appReadyResolve;
+    private _highResolution;
+    /**
+     * The PlayCanvas application instance.
+     */
+    app: Application | null;
+    /**
+     * Creates a new AppElement.
+     */
+    constructor();
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    getApplication(): Promise<Application>;
+    _onWindowResize(): void;
+    set highResolution(value: boolean);
+    get highResolution(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, _newValue: string): void;
+}
+export { AppElement };

package/dist/asset.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { Asset } from 'playcanvas';
+/**
+ * Loads an asset into the PlayCanvas engine.
+ */
+declare class AssetElement extends HTMLElement {
+    private _preload;
+    /**
+     * The asset that is loaded.
+     */
+    asset: Asset | null;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    createAsset(): void;
+    destroyAsset(): void;
+    /**
+     * Sets the preload flag of the asset.
+     * @param value - The preload flag.
+     */
+    set preload(value: boolean);
+    /**
+     * Gets the preload flag of the asset.
+     * @returns The preload flag.
+     */
+    get preload(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, _newValue: string): void;
+}
+export { AssetElement };

package/dist/components/camera-component.d.ts ADDED Viewed

@@ -0,0 +1,95 @@
+import { CameraComponent, Color } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a camera component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class CameraComponentElement extends ComponentElement {
+    private _clearColor;
+    private _farClip;
+    private _fov;
+    private _nearClip;
+    private _orthographic;
+    private _orthoHeight;
+    /**
+     * Creates a new CameraComponentElement.
+     */
+    constructor();
+    getInitialComponentData(): {
+        clearColor: Color;
+        farClip: number;
+        fov: number;
+        nearClip: number;
+        projection: number;
+        orthoHeight: number;
+    };
+    /**
+     * Gets the camera component.
+     * @returns The camera component.
+     */
+    get component(): CameraComponent | null;
+    /**
+     * Sets the clear color of the camera.
+     * @param value - The clear color.
+     */
+    set clearColor(value: Color);
+    /**
+     * Gets the clear color of the camera.
+     * @returns The clear color.
+     */
+    get clearColor(): Color;
+    /**
+     * Sets the far clip distance of the camera.
+     * @param value - The far clip distance.
+     */
+    set farClip(value: number);
+    /**
+     * Gets the far clip distance of the camera.
+     * @returns The far clip distance.
+     */
+    get farClip(): number;
+    /**
+     * Sets the field of view of the camera.
+     * @param value - The field of view.
+     */
+    set fov(value: number);
+    /**
+     * Gets the field of view of the camera.
+     * @returns The field of view.
+     */
+    get fov(): number;
+    /**
+     * Sets the near clip distance of the camera.
+     * @param value - The near clip distance.
+     */
+    set nearClip(value: number);
+    /**
+     * Gets the near clip distance of the camera.
+     * @returns The near clip distance.
+     */
+    get nearClip(): number;
+    /**
+     * Sets the orthographic projection of the camera.
+     * @param value - The orthographic projection.
+     */
+    set orthographic(value: boolean);
+    /**
+     * Gets the orthographic projection of the camera.
+     * @returns The orthographic projection.
+     */
+    get orthographic(): boolean;
+    /**
+     * Sets the orthographic height of the camera.
+     * @param value - The orthographic height.
+     */
+    set orthoHeight(value: number);
+    /**
+     * Gets the orthographic height of the camera.
+     * @returns The orthographic height.
+     */
+    get orthoHeight(): number;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { CameraComponentElement };

package/dist/components/collision-component.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { CollisionComponent, Vec3 } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a collision component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class CollisionComponentElement extends ComponentElement {
+    private _axis;
+    private _convexHull;
+    private _halfExtents;
+    private _height;
+    private _radius;
+    private _type;
+    /**
+     * Creates a new CollisionComponentElement.
+     */
+    constructor();
+    getInitialComponentData(): {
+        axis: number;
+        convexHull: boolean;
+        halfExtents: Vec3;
+        height: number;
+        radius: number;
+        type: string;
+    };
+    /**
+     * Gets the collision component.
+     * @returns The collision component.
+     */
+    get component(): CollisionComponent | null;
+    set axis(value: number);
+    get axis(): number;
+    set convexHull(value: boolean);
+    get convexHull(): boolean;
+    set halfExtents(value: Vec3);
+    get halfExtents(): Vec3;
+    set height(value: number);
+    get height(): number;
+    set radius(value: number);
+    get radius(): number;
+    set type(value: string);
+    get type(): string;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { CollisionComponentElement };

package/dist/components/component.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { Component } from 'playcanvas';
+/**
+ * Represents a component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class ComponentElement extends HTMLElement {
+    private _componentName;
+    private _enabled;
+    private _component;
+    /**
+     * Constructor for the ComponentElement.
+     * @param componentName - The name of the component.
+     */
+    constructor(componentName: string);
+    getInitialComponentData(): {};
+    connectedCallback(): Promise<void>;
+    addComponent(): void;
+    disconnectedCallback(): void;
+    get component(): Component | null;
+    /**
+     * Sets the enabled state of the component.
+     * @param value - The enabled state of the component.
+     */
+    set enabled(value: boolean);
+    /**
+     * Gets the enabled state of the component.
+     * @returns The enabled state of the component.
+     */
+    get enabled(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { ComponentElement };

package/dist/components/element-component.d.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents an element component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class ElementComponentElement extends ComponentElement {
+    private _anchor;
+    private _asset;
+    private _autoWidth;
+    private _color;
+    private _fontSize;
+    private _lineHeight;
+    private _pivot;
+    private _text;
+    private _type;
+    private _width;
+    private _wrapLines;
+    constructor();
+    connectedCallback(): Promise<void>;
+    getAsset(): import("playcanvas").Asset | null;
+    getInitialComponentData(): {
+        anchor: Vec4;
+        autoWidth: boolean;
+        color: Color;
+        fontAsset: number;
+        fontSize: number;
+        lineHeight: number;
+        pivot: Vec2;
+        type: "text" | "image" | "group";
+        text: string;
+        width: number;
+        wrapLines: boolean;
+    };
+    /**
+     * Gets the element component.
+     * @returns The element component.
+     */
+    get component(): ElementComponent | null;
+    set anchor(value: Vec4);
+    get anchor(): Vec4;
+    set asset(value: string);
+    get asset(): string;
+    set autoWidth(value: boolean);
+    get autoWidth(): boolean;
+    set color(value: Color);
+    get color(): Color;
+    set fontSize(value: number);
+    get fontSize(): number;
+    set lineHeight(value: number);
+    get lineHeight(): number;
+    set pivot(value: Vec2);
+    get pivot(): Vec2;
+    set text(value: string);
+    get text(): string;
+    /**
+     * Sets the type of the element component.
+     * @param value - The type.
+     */
+    set type(value: 'group' | 'image' | 'text');
+    /**
+     * Gets the type of the element component.
+     * @returns The type.
+     */
+    get type(): 'group' | 'image' | 'text';
+    set width(value: number);
+    get width(): number;
+    set wrapLines(value: boolean);
+    get wrapLines(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { ElementComponentElement };

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

@@ -0,0 +1,25 @@
+import { GSplatComponent } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a gsplat component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class GSplatComponentElement extends ComponentElement {
+    private _asset;
+    constructor();
+    getAsset(): import("playcanvas").Asset | null;
+    getInitialComponentData(): {
+        asset: import("playcanvas").Asset | null;
+    };
+    /**
+     * Gets the gsplat component.
+     * @returns The gsplat component.
+     */
+    get component(): GSplatComponent | null;
+    set asset(value: string);
+    get asset(): string;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { GSplatComponentElement };

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

@@ -0,0 +1,143 @@
+import { Color, LightComponent } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a light component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class LightComponentElement extends ComponentElement {
+    private _castShadows;
+    private _color;
+    private _innerConeAngle;
+    private _intensity;
+    private _normalOffsetBias;
+    private _outerConeAngle;
+    private _range;
+    private _shadowBias;
+    private _shadowDistance;
+    private _type;
+    /**
+     * Creates a new LightComponentElement.
+     */
+    constructor();
+    getInitialComponentData(): {
+        castShadows: boolean;
+        color: Color;
+        innerConeAngle: number;
+        intensity: number;
+        normalOffsetBias: number;
+        outerConeAngle: number;
+        range: number;
+        shadowBias: number;
+        shadowDistance: number;
+        type: string;
+    };
+    /**
+     * Gets the light component.
+     * @returns The light component.
+     */
+    get component(): LightComponent | null;
+    /**
+     * Sets the cast shadows flag of the light.
+     * @param value - The cast shadows flag.
+     */
+    set castShadows(value: boolean);
+    /**
+     * Gets the cast shadows flag of the light.
+     * @returns The cast shadows flag.
+     */
+    get castShadows(): boolean;
+    /**
+     * Sets the color of the light.
+     * @param value - The color.
+     */
+    set color(value: Color);
+    /**
+     * Gets the color of the light.
+     * @returns The color.
+     */
+    get color(): Color;
+    /**
+     * Sets the inner cone angle of the light.
+     * @param value - The inner cone angle.
+     */
+    set innerConeAngle(value: number);
+    /**
+     * Gets the inner cone angle of the light.
+     * @returns The inner cone angle.
+     */
+    get innerConeAngle(): number;
+    /**
+     * Sets the intensity of the light.
+     * @param value - The intensity.
+     */
+    set intensity(value: number);
+    /**
+     * Gets the intensity of the light.
+     * @returns The intensity.
+     */
+    get intensity(): number;
+    /**
+     * Sets the normal offset bias of the light.
+     * @param value - The normal offset bias.
+     */
+    set normalOffsetBias(value: number);
+    /**
+     * Gets the normal offset bias of the light.
+     * @returns The normal offset bias.
+     */
+    get normalOffsetBias(): number;
+    /**
+     * Sets the outer cone angle of the light.
+     * @param value - The outer cone angle.
+     */
+    set outerConeAngle(value: number);
+    /**
+     * Gets the outer cone angle of the light.
+     * @returns The outer cone angle.
+     */
+    get outerConeAngle(): number;
+    /**
+     * Sets the range of the light.
+     * @param value - The range.
+     */
+    set range(value: number);
+    /**
+     * Gets the range of the light.
+     * @returns The range.
+     */
+    get range(): number;
+    /**
+     * Sets the shadow bias of the light.
+     * @param value - The shadow bias.
+     */
+    set shadowBias(value: number);
+    /**
+     * Gets the shadow bias of the light.
+     * @returns The shadow bias.
+     */
+    get shadowBias(): number;
+    /**
+     * Sets the shadow distance of the light.
+     * @param value - The shadow distance.
+     */
+    set shadowDistance(value: number);
+    /**
+     * Gets the shadow distance of the light.
+     * @returns The shadow distance.
+     */
+    get shadowDistance(): number;
+    /**
+     * Sets the type of the light.
+     * @param value - The type.
+     */
+    set type(value: string);
+    /**
+     * Gets the type of the light.
+     * @returns The type.
+     */
+    get type(): string;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { LightComponentElement };

package/dist/components/listener-component.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { AudioListenerComponent } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a audio listener component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class ListenerComponentElement extends ComponentElement {
+    constructor();
+    /**
+     * Gets the audio listener component.
+     * @returns The audio listener component.
+     */
+    get component(): AudioListenerComponent | null;
+}
+export { ListenerComponentElement };

package/dist/components/render-component.d.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import { RenderComponent } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a render component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class RenderComponentElement extends ComponentElement {
+    private _type;
+    private _castShadows;
+    private _receiveShadows;
+    constructor();
+    getInitialComponentData(): {
+        type: "box" | "asset" | "capsule" | "cone" | "cylinder" | "plane" | "sphere";
+        castShadows: boolean;
+        receiveShadows: boolean;
+    };
+    /**
+     * Gets the render component.
+     * @returns The render component.
+     */
+    get component(): RenderComponent | null;
+    /**
+     * Sets the type of the render component.
+     * @param value - The type.
+     */
+    set type(value: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere');
+    /**
+     * Gets the type of the render component.
+     * @returns The type.
+     */
+    get type(): 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere';
+    /**
+     * Sets the cast shadows flag of the render component.
+     * @param value - The cast shadows flag.
+     */
+    set castShadows(value: boolean);
+    /**
+     * Gets the cast shadows flag of the render component.
+     * @returns The cast shadows flag.
+     */
+    get castShadows(): boolean;
+    /**
+     * Sets the receive shadows flag of the render component.
+     * @param value - The receive shadows flag.
+     */
+    set receiveShadows(value: boolean);
+    /**
+     * Gets the receive shadows flag of the render component.
+     * @returns The receive shadows flag.
+     */
+    get receiveShadows(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { RenderComponentElement };