@playcanvas/web-components 0.1.4 → 0.1.6

package/dist/pwc.cjs

@@ -2,6 +2,41 @@
 
 var playcanvas = require('playcanvas');
 
+/**
+ * Base class for all PlayCanvas web components that initialize asynchronously.
+ */
+class AsyncElement extends HTMLElement {
+    constructor() {
+        super();
+        this._readyPromise = new Promise((resolve) => {
+            this._readyResolve = resolve;
+        });
+    }
+    get closestApp() {
+        var _a;
+        return (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pc-app');
+    }
+    get closestEntity() {
+        var _a;
+        return (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pc-entity');
+    }
+    /**
+     * Called when the element is fully initialized and ready.
+     * Subclasses should call this when they're ready.
+     */
+    _onReady() {
+        this._readyResolve();
+        this.dispatchEvent(new CustomEvent('ready'));
+    }
+    /**
+     * Returns a promise that resolves with this element when it's ready.
+     * @returns A promise that resolves with this element when it's ready.
+     */
+    ready() {
+        return this._readyPromise.then(() => this);
+    }
+}
+
 class ModuleElement extends HTMLElement {
     constructor() {
         super();
@@ -12,14 +47,23 @@ class ModuleElement extends HTMLElement {
         const glue = this.getAttribute('glue');
         const wasm = this.getAttribute('wasm');
         const fallback = this.getAttribute('fallback');
-        playcanvas.WasmModule.setConfig(name, {
-            glueUrl: glue,
-            wasmUrl: wasm,
-            fallbackUrl: fallback
-        });
-        await new Promise((resolve) => {
-            playcanvas.WasmModule.getInstance(name, () => resolve());
-        });
+        if (name === 'Basis') {
+            playcanvas.basisInitialize({
+                glueUrl: glue,
+                wasmUrl: wasm,
+                fallbackUrl: fallback
+            });
+        }
+        else {
+            playcanvas.WasmModule.setConfig(name, {
+                glueUrl: glue,
+                wasmUrl: wasm,
+                fallbackUrl: fallback
+            });
+            await new Promise((resolve) => {
+                playcanvas.WasmModule.getInstance(name, () => resolve());
+            });
+        }
     }
     getLoadPromise() {
         return this.loadPromise;
@@ -30,7 +74,7 @@ customElements.define('pc-module', ModuleElement);
 /**
  * The main application element.
  */
-class AppElement extends HTMLElement {
+class AppElement extends AsyncElement {
     /**
      * Creates a new AppElement.
      */
@@ -40,6 +84,10 @@ class AppElement extends HTMLElement {
          * The canvas element.
          */
         this._canvas = null;
+        this._alpha = true;
+        this._antialias = true;
+        this._depth = true;
+        this._stencil = true;
         this._highResolution = false;
         /**
          * The PlayCanvas application instance.
@@ -47,9 +95,6 @@ class AppElement extends HTMLElement {
         this.app = null;
         // Bind methods to maintain 'this' context
         this._onWindowResize = this._onWindowResize.bind(this);
-        this.appReadyPromise = new Promise((resolve) => {
-            this.appReadyResolve = resolve;
-        });
     }
     async connectedCallback() {
         // Get all pc-module elements that are direct children of the pc-app element
@@ -62,11 +107,15 @@ class AppElement extends HTMLElement {
         // Initialize the PlayCanvas application
         this.app = new playcanvas.Application(this._canvas, {
             graphicsDeviceOptions: {
-                devicePixelRatio: this._highResolution ? window.devicePixelRatio : 1
+                alpha: this._alpha,
+                antialias: this._antialias,
+                depth: this._depth,
+                stencil: this._stencil
             },
             keyboard: new playcanvas.Keyboard(window),
             mouse: new playcanvas.Mouse(this._canvas)
         });
+        this.app.graphicsDevice.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
         this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
         this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
         // Get all pc-asset elements that are direct children of the pc-app element
@@ -89,7 +138,7 @@ class AppElement extends HTMLElement {
             this.app.start();
             // Handle window resize to keep the canvas responsive
             window.addEventListener('resize', this._onWindowResize);
-            this.appReadyResolve(this.app);
+            this._onReady();
         });
     }
     disconnectedCallback() {
@@ -106,31 +155,104 @@ class AppElement extends HTMLElement {
             this._canvas = null;
         }
     }
-    async getApplication() {
-        await this.appReadyPromise;
-        return this.app;
-    }
     _onWindowResize() {
         if (this.app) {
             this.app.resizeCanvas();
         }
     }
+    /**
+     * Sets the alpha flag.
+     * @param value - The alpha flag.
+     */
+    set alpha(value) {
+        this._alpha = value;
+    }
+    /**
+     * Gets the alpha flag.
+     * @returns The alpha flag.
+     */
+    get alpha() {
+        return this._alpha;
+    }
+    /**
+     * Sets the antialias flag.
+     * @param value - The antialias flag.
+     */
+    set antialias(value) {
+        this._antialias = value;
+    }
+    /**
+     * Gets the antialias flag.
+     * @returns The antialias flag.
+     */
+    get antialias() {
+        return this._antialias;
+    }
+    /**
+     * Sets the depth flag.
+     * @param value - The depth flag.
+     */
+    set depth(value) {
+        this._depth = value;
+    }
+    /**
+     * Gets the depth flag.
+     * @returns The depth flag.
+     */
+    get depth() {
+        return this._depth;
+    }
+    /**
+     * Sets the high resolution flag. When true, the application will render at the device's
+     * physical resolution. When false, the application will render at CSS resolution.
+     * @param value - The high resolution flag.
+     */
     set highResolution(value) {
         this._highResolution = value;
         if (this.app) {
             this.app.graphicsDevice.maxPixelRatio = value ? window.devicePixelRatio : 1;
         }
     }
+    /**
+     * Gets the high resolution flag.
+     * @returns The high resolution flag.
+     */
     get highResolution() {
         return this._highResolution;
     }
+    /**
+     * Sets the stencil flag.
+     * @param value - The stencil flag.
+     */
+    set stencil(value) {
+        this._stencil = value;
+    }
+    /**
+     * Gets the stencil flag.
+     * @returns The stencil flag.
+     */
+    get stencil() {
+        return this._stencil;
+    }
     static get observedAttributes() {
-        return ['high-resolution'];
+        return ['alpha', 'antialias', 'depth', 'stencil', 'high-resolution'];
     }
-    attributeChangedCallback(name, _oldValue, _newValue) {
+    attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
+            case 'alpha':
+                this.alpha = newValue !== 'false';
+                break;
+            case 'antialias':
+                this.antialias = newValue !== 'false';
+                break;
+            case 'depth':
+                this.depth = newValue !== 'false';
+                break;
             case 'high-resolution':
-                this.highResolution = this.hasAttribute(name);
+                this.highResolution = newValue !== 'false';
+                break;
+            case 'stencil':
+                this.stencil = newValue !== 'false';
                 break;
         }
     }
@@ -197,7 +319,7 @@ const parseVec4 = (value) => {
 /**
  * Represents an entity in the PlayCanvas engine.
  */
-class EntityElement extends HTMLElement {
+class EntityElement extends AsyncElement {
     constructor() {
         super(...arguments);
         /**
@@ -224,33 +346,20 @@ class EntityElement extends HTMLElement {
          * The tags of the entity.
          */
         this._tags = [];
-        this._entityReady = new Promise((resolve) => {
-            this._resolveEntity = resolve;
-        });
         /**
          * The PlayCanvas entity instance.
          */
         this.entity = null;
     }
     async connectedCallback() {
-        // Get the application
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            console.warn(`${this.tagName} must be a child of pc-app`);
+        const closestApp = this.closestApp;
+        if (!closestApp)
             return;
-        }
-        const app = await appElement.getApplication();
+        // Wait for the app to complete initialization
+        await closestApp.ready();
+        const app = closestApp.app;
         // Create a new entity
         this.entity = new playcanvas.Entity(this._name, app);
-        this._resolveEntity(this.entity);
-        if (this.parentElement &&
-            this.parentElement.tagName.toLowerCase() === 'pc-entity') {
-            const parentEntity = await this.parentElement._entityReady;
-            parentEntity.addChild(this.entity);
-        }
-        else {
-            app.root.addChild(this.entity);
-        }
         // Initialize from attributes
         const nameAttr = this.getAttribute('name');
         const positionAttr = this.getAttribute('position');
@@ -267,6 +376,17 @@ class EntityElement extends HTMLElement {
             this.scale = parseVec3(scaleAttr);
         if (tagsAttr)
             this.tags = tagsAttr.split(',').map(tag => tag.trim());
+        const closestEntity = this.closestEntity;
+        if (closestEntity) {
+            closestEntity.ready().then(() => {
+                closestEntity.entity.addChild(this.entity);
+                this._onReady();
+            });
+        }
+        else {
+            app.root.addChild(this.entity);
+            this._onReady();
+        }
     }
     disconnectedCallback() {
         if (this.entity) {
@@ -278,10 +398,6 @@ class EntityElement extends HTMLElement {
             this.entity.destroy();
             this.entity = null;
         }
-        // Reset the promise for potential reconnection
-        this._entityReady = new Promise((resolve) => {
-            this._resolveEntity = resolve;
-        });
     }
     /**
      * Sets the enabled state of the entity.
@@ -420,6 +536,7 @@ const extToType = new Map([
     ['frag', 'shader'],
     ['glb', 'container'],
     ['glsl', 'shader'],
+    ['hdr', 'texture'],
     ['html', 'html'],
     ['jpg', 'texture'],
     ['js', 'script'],
@@ -444,8 +561,6 @@ class AssetElement extends HTMLElement {
          */
         this.asset = null;
     }
-    async connectedCallback() {
-    }
     disconnectedCallback() {
         this.destroyAsset();
     }
@@ -509,7 +624,7 @@ customElements.define('pc-asset', AssetElement);
  *
  * @category Components
  */
-class ComponentElement extends HTMLElement {
+class ComponentElement extends AsyncElement {
     /**
      * Constructor for the ComponentElement.
      * @param componentName - The name of the component.
@@ -524,27 +639,23 @@ class ComponentElement extends HTMLElement {
     getInitialComponentData() {
         return {};
     }
-    async connectedCallback() {
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
-            return;
-        }
-        await appElement.getApplication();
-        this.addComponent();
-    }
-    addComponent() {
-        // Access the parent pc-entity's 'entity' property
-        const entityElement = this.closest('pc-entity');
-        if (!entityElement) {
-            console.error(`${this.tagName.toLowerCase()} should be a child of pc-entity`);
-            return;
-        }
-        if (entityElement && entityElement.entity) {
+    async addComponent() {
+        const entityElement = this.closestEntity;
+        if (entityElement) {
+            await entityElement.ready();
             // Add the component to the entity
-            this._component = entityElement.entity.addComponent(this._componentName, this.getInitialComponentData());
+            const data = this.getInitialComponentData();
+            this._component = entityElement.entity.addComponent(this._componentName, data);
         }
     }
+    initComponent() { }
+    async connectedCallback() {
+        var _a;
+        await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+        await this.addComponent();
+        this.initComponent();
+        this._onReady();
+    }
     disconnectedCallback() {
         // Remove the component when the element is disconnected
         if (this.component && this.component.entity) {
@@ -649,6 +760,26 @@ class CameraComponentElement extends ComponentElement {
             scissorRect: this._scissorRect
         };
     }
+    get xrAvailable() {
+        var _a;
+        const xrManager = (_a = this.component) === null || _a === void 0 ? void 0 : _a.system.app.xr;
+        return xrManager && xrManager.supported && xrManager.isAvailable(playcanvas.XRTYPE_VR);
+    }
+    startXr(type, space) {
+        if (this.component && this.xrAvailable) {
+            this.component.startXr(type, space, {
+                callback: (err) => {
+                    if (err)
+                        console.error(`WebXR Immersive VR failed to start: ${err.message}`);
+                }
+            });
+        }
+    }
+    endXr() {
+        if (this.component) {
+            this.component.endXr();
+        }
+    }
     /**
      * Gets the camera component.
      * @returns The camera component.
@@ -1150,8 +1281,7 @@ class ElementComponentElement extends ComponentElement {
         this._width = 0;
         this._wrapLines = false;
     }
-    async connectedCallback() {
-        await super.connectedCallback();
+    initComponent() {
         this.component._text._material.useFog = true;
     }
     getInitialComponentData() {
@@ -1285,7 +1415,20 @@ class ElementComponentElement extends ComponentElement {
         return this._wrapLines;
     }
     static get observedAttributes() {
-        return [...super.observedAttributes, 'anchor', 'asset', 'auto-width', 'color', 'font-size', 'line-height', 'pivot', 'text', 'type', 'width', 'wrap-lines'];
+        return [
+            ...super.observedAttributes,
+            'anchor',
+            'asset',
+            'auto-width',
+            'color',
+            'font-size',
+            'line-height',
+            'pivot',
+            'text',
+            'type',
+            'width',
+            'wrap-lines'
+        ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
@@ -1771,14 +1914,11 @@ class RenderComponentElement extends ComponentElement {
         this._receiveShadows = true;
         this._type = 'asset';
     }
-    async connectedCallback() {
-        await super.connectedCallback();
-        this.material = this._material;
-    }
     getInitialComponentData() {
         return {
             type: this._type,
             castShadows: this._castShadows,
+            material: MaterialElement.get(this._material),
             receiveShadows: this._receiveShadows
         };
     }
@@ -2190,6 +2330,9 @@ class ScreenComponentElement extends ComponentElement {
 }
 customElements.define('pc-screen', ScreenComponentElement);
 
+const tmpV2 = new playcanvas.Vec2();
+const tmpV3 = new playcanvas.Vec3();
+const tmpV4 = new playcanvas.Vec4();
 /**
  * Represents a script component in the PlayCanvas engine.
  *
@@ -2207,8 +2350,7 @@ class ScriptComponentElement extends ComponentElement {
         this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
         this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
     }
-    async connectedCallback() {
-        await super.connectedCallback();
+    initComponent() {
         // Handle initial script elements
         this.querySelectorAll(':scope > pc-script').forEach((scriptElement) => {
             const scriptName = scriptElement.getAttribute('name');
@@ -2222,7 +2364,22 @@ class ScriptComponentElement extends ComponentElement {
         try {
             // Parse the attributes string into an object and set them on the script
             const attributesObject = attributes ? JSON.parse(attributes) : {};
-            Object.assign(script, attributesObject);
+            for (const key in attributesObject) {
+                const value = attributesObject[key];
+                if (Array.isArray(value) && script[key] instanceof playcanvas.Vec2) {
+                    script[key] = tmpV2.set(value[0], value[1]);
+                    continue;
+                }
+                if (Array.isArray(value) && script[key] instanceof playcanvas.Vec3) {
+                    script[key] = tmpV3.set(value[0], value[1], value[2]);
+                    continue;
+                }
+                if (Array.isArray(value) && script[key] instanceof playcanvas.Vec4) {
+                    script[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                    continue;
+                }
+                script[key] = value;
+            }
         }
         catch (error) {
             console.error(`Error parsing attributes JSON string ${attributes}:`, error);
@@ -2386,14 +2543,22 @@ customElements.define('pc-script', ScriptElement);
 class SoundComponentElement extends ComponentElement {
     constructor() {
         super('sound');
+        this._distanceModel = 'linear';
+        this._maxDistance = 10000;
         this._pitch = 1;
         this._positional = false;
+        this._refDistance = 1;
+        this._rollOffFactor = 1;
         this._volume = 1;
     }
     getInitialComponentData() {
         return {
+            distanceModel: this._distanceModel,
+            maxDistance: this._maxDistance,
             pitch: this._pitch,
             positional: this._positional,
+            refDistance: this._refDistance,
+            rollOffFactor: this._rollOffFactor,
             volume: this._volume
         };
     }
@@ -2404,6 +2569,40 @@ class SoundComponentElement extends ComponentElement {
     get component() {
         return super.component;
     }
+    /**
+     * 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) {
+        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() {
+        return this._distanceModel;
+    }
+    /**
+     * Sets the maximum distance from the listener at which audio falloff stops.
+     * @param value - The max distance.
+     */
+    set maxDistance(value) {
+        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.
@@ -2438,6 +2637,40 @@ class SoundComponentElement extends ComponentElement {
     get positional() {
         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) {
+        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) {
+        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.
@@ -2456,17 +2689,38 @@ class SoundComponentElement extends ComponentElement {
         return this._volume;
     }
     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, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
+            case 'distance-model':
+                this.distanceModel = newValue;
+                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;
@@ -2478,7 +2732,7 @@ customElements.define('pc-sounds', SoundComponentElement);
 /**
  * Represents a sound slot in the PlayCanvas engine.
  */
-class SoundSlotElement extends HTMLElement {
+class SoundSlotElement extends AsyncElement {
     constructor() {
         super(...arguments);
         this._asset = '';
@@ -2496,12 +2750,8 @@ class SoundSlotElement extends HTMLElement {
         this.soundSlot = null;
     }
     async connectedCallback() {
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
-            return;
-        }
-        await appElement.getApplication();
+        var _a;
+        await ((_a = this.soundElement) === null || _a === void 0 ? void 0 : _a.ready());
         const options = {
             autoPlay: this._autoPlay,
             loop: this._loop,
@@ -2516,6 +2766,7 @@ class SoundSlotElement extends HTMLElement {
         this.soundSlot = this.soundElement.component.addSlot(this._name, options);
         this.asset = this._asset;
         this.soundSlot.play();
+        this._onReady();
     }
     disconnectedCallback() {
         this.soundElement.component.removeSlot(this._name);
@@ -2722,23 +2973,19 @@ customElements.define('pc-sound', SoundSlotElement);
 /**
  * Represents a model in the PlayCanvas engine.
  */
-class ModelElement extends HTMLElement {
+class ModelElement extends AsyncElement {
     constructor() {
         super(...arguments);
         this._asset = '';
     }
     async connectedCallback() {
-        // Get the application
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            console.warn(`${this.tagName} must be a child of pc-app`);
-            return;
-        }
-        await appElement.getApplication();
+        var _a;
+        await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
         const asset = this.getAttribute('asset');
         if (asset) {
             this.asset = asset;
         }
+        this._onReady();
     }
     _loadModel() {
         const asset = AssetElement.get(this._asset);
@@ -2746,13 +2993,23 @@ class ModelElement extends HTMLElement {
             return;
         }
         const entity = asset.resource.instantiateRenderEntity();
-        const parentEntityElement = this.closest('pc-entity');
+        if (asset.resource.animations.length > 0) {
+            entity.addComponent('anim');
+            entity.anim.assignAnimation('animation', asset.resource.animations[0].resource);
+        }
+        const parentEntityElement = this.closestEntity;
         if (parentEntityElement) {
-            parentEntityElement.entity.addChild(entity);
+            parentEntityElement.ready().then(() => {
+                parentEntityElement.entity.addChild(entity);
+            });
         }
         else {
-            const appElement = this.closest('pc-app');
-            appElement.app.root.addChild(entity);
+            const appElement = this.closestApp;
+            if (appElement) {
+                appElement.ready().then(() => {
+                    appElement.app.root.addChild(entity);
+                });
+            }
         }
     }
     /**
@@ -2786,7 +3043,7 @@ customElements.define('pc-model', ModelElement);
 /**
  * Represents a scene in the PlayCanvas engine.
  */
-class SceneElement extends HTMLElement {
+class SceneElement extends AsyncElement {
     constructor() {
         super(...arguments);
         /**
@@ -2815,15 +3072,11 @@ class SceneElement extends HTMLElement {
         this.scene = null;
     }
     async connectedCallback() {
-        // Get the application
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            console.warn(`${this.tagName} must be a child of pc-app`);
-            return;
-        }
-        const app = await appElement.getApplication();
-        this.scene = app.scene;
+        var _a;
+        await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+        this.scene = this.closestApp.app.scene;
         this.updateSceneSettings();
+        this._onReady();
     }
     updateSceneSettings() {
         if (this.scene) {
@@ -2949,57 +3202,71 @@ customElements.define('pc-scene', SceneElement);
 /**
  * Represents a sky in the PlayCanvas engine.
  */
-class SkyElement extends HTMLElement {
+class SkyElement extends AsyncElement {
     constructor() {
         super(...arguments);
         this._asset = '';
+        this._center = new playcanvas.Vec3(0, 0.01, 0);
         this._intensity = 1;
-        this._rotation = [0, 0, 0];
+        this._rotation = new playcanvas.Vec3();
         this._level = 0;
-        this._solidColor = false;
+        this._scale = new playcanvas.Vec3(100, 100, 100);
+        this._type = 'infinite';
     }
     async connectedCallback() {
-        // Get the application
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            console.warn(`${this.tagName} must be a child of pc-app`);
-            return;
-        }
-        await appElement.getApplication();
+        var _a;
+        await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
         this.asset = this.getAttribute('asset') || '';
-        this.solidColor = this.hasAttribute('solid-color');
+        this._onReady();
     }
     getScene() {
-        const appElement = this.closest('pc-app');
-        if (!appElement) {
-            return;
-        }
-        const app = appElement.app;
+        const app = this.closestApp.app;
         if (!app) {
             return;
         }
         return app.scene;
     }
+    initSkybox(source) {
+        source.anisotropy = 4;
+        const skybox = playcanvas.EnvLighting.generateSkyboxCubemap(source);
+        const lighting = playcanvas.EnvLighting.generateLightingSource(source);
+        const envAtlas = playcanvas.EnvLighting.generateAtlas(lighting);
+        const app = this.closestApp.app;
+        if (app) {
+            app.scene.envAtlas = envAtlas;
+            app.scene.skybox = skybox;
+            const layer = app.scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
+            if (layer) {
+                layer.enabled = this._type !== 'none';
+            }
+            app.scene.sky.type = this._type;
+            app.scene.sky.node.setLocalScale(this._scale);
+            app.scene.sky.center = this._center;
+        }
+    }
     set asset(value) {
         this._asset = value;
         const scene = this.getScene();
         if (scene) {
             const asset = AssetElement.get(value);
             if (asset) {
-                if (asset.resource) {
-                    scene.envAtlas = asset.resource;
-                }
-                else {
-                    asset.once('load', () => {
-                        scene.envAtlas = asset.resource;
-                    });
-                }
+                this.initSkybox(asset.resource);
             }
         }
     }
     get asset() {
         return this._asset;
     }
+    set center(value) {
+        this._center = value;
+        const scene = this.getScene();
+        if (scene) {
+            scene.sky.center = this._center;
+        }
+    }
+    get center() {
+        return this._center;
+    }
     set intensity(value) {
         this._intensity = value;
         const scene = this.getScene();
@@ -3014,24 +3281,21 @@ class SkyElement extends HTMLElement {
         this._rotation = value;
         const scene = this.getScene();
         if (scene) {
-            scene.skyboxRotation = new playcanvas.Quat().setFromEulerAngles(this._rotation[0], this._rotation[1], this._rotation[2]);
+            scene.skyboxRotation = new playcanvas.Quat().setFromEulerAngles(value);
         }
     }
     get rotation() {
         return this._rotation;
     }
-    set solidColor(value) {
-        this._solidColor = value;
+    set scale(value) {
+        this._scale = value;
         const scene = this.getScene();
         if (scene) {
-            const layer = scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
-            if (layer) {
-                layer.enabled = !this._solidColor;
-            }
+            scene.sky.node.setLocalScale(this._scale);
         }
     }
-    get solidColor() {
-        return this._solidColor;
+    get scale() {
+        return this._scale;
     }
     set level(value) {
         this._level = value;
@@ -3043,25 +3307,45 @@ class SkyElement extends HTMLElement {
     get level() {
         return this._level;
     }
+    set type(value) {
+        this._type = value;
+        const scene = this.getScene();
+        if (scene) {
+            scene.sky.type = this._type;
+            const layer = scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
+            if (layer) {
+                layer.enabled = this._type !== 'none';
+            }
+        }
+    }
+    get type() {
+        return this._type;
+    }
     static get observedAttributes() {
-        return ['asset', 'intensity', 'level', 'rotation', 'solid-color'];
+        return ['asset', 'center', 'intensity', 'level', 'rotation', 'scale', 'type'];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
             case 'asset':
                 this.asset = newValue;
                 break;
+            case 'center':
+                this.center = parseVec3(newValue);
+                break;
             case 'intensity':
                 this.intensity = parseFloat(newValue);
                 break;
             case 'rotation':
-                this.rotation = newValue.split(',').map(Number);
+                this.rotation = parseVec3(newValue);
                 break;
             case 'level':
                 this.level = parseInt(newValue, 10);
                 break;
-            case 'solid-color':
-                this.solidColor = this.hasAttribute('solid-color');
+            case 'scale':
+                this.scale = parseVec3(newValue);
+                break;
+            case 'type':
+                this.type = newValue;
                 break;
         }
     }
@@ -3070,6 +3354,7 @@ customElements.define('pc-sky', SkyElement);
 
 exports.AppElement = AppElement;
 exports.AssetElement = AssetElement;
+exports.AsyncElement = AsyncElement;
 exports.CameraComponentElement = CameraComponentElement;
 exports.CollisionComponentElement = CollisionComponentElement;
 exports.ComponentElement = ComponentElement;