@playcanvas/web-components 0.1.4 → 0.1.6

package/dist/pwc.js

@@ -4,6 +4,41 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.pd = {}, global.pc));
 })(this, (function (exports, playcanvas) { 'use strict';
 
+    /**
+     * 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();
@@ -14,14 +49,23 @@
             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;
@@ -32,7 +76,7 @@
     /**
      * The main application element.
      */
-    class AppElement extends HTMLElement {
+    class AppElement extends AsyncElement {
         /**
          * Creates a new AppElement.
          */
@@ -42,6 +86,10 @@
              * 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.
@@ -49,9 +97,6 @@
             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
@@ -64,11 +109,15 @@
             // 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
@@ -91,7 +140,7 @@
                 this.app.start();
                 // Handle window resize to keep the canvas responsive
                 window.addEventListener('resize', this._onWindowResize);
-                this.appReadyResolve(this.app);
+                this._onReady();
             });
         }
         disconnectedCallback() {
@@ -108,31 +157,104 @@
                 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;
             }
         }
@@ -199,7 +321,7 @@
     /**
      * Represents an entity in the PlayCanvas engine.
      */
-    class EntityElement extends HTMLElement {
+    class EntityElement extends AsyncElement {
         constructor() {
             super(...arguments);
             /**
@@ -226,33 +348,20 @@
              * 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');
@@ -269,6 +378,17 @@
                 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) {
@@ -280,10 +400,6 @@
                 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.
@@ -422,6 +538,7 @@
         ['frag', 'shader'],
         ['glb', 'container'],
         ['glsl', 'shader'],
+        ['hdr', 'texture'],
         ['html', 'html'],
         ['jpg', 'texture'],
         ['js', 'script'],
@@ -446,8 +563,6 @@
              */
             this.asset = null;
         }
-        async connectedCallback() {
-        }
         disconnectedCallback() {
             this.destroyAsset();
         }
@@ -511,7 +626,7 @@
      *
      * @category Components
      */
-    class ComponentElement extends HTMLElement {
+    class ComponentElement extends AsyncElement {
         /**
          * Constructor for the ComponentElement.
          * @param componentName - The name of the component.
@@ -526,27 +641,23 @@
         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) {
@@ -651,6 +762,26 @@
                 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.
@@ -1152,8 +1283,7 @@
             this._width = 0;
             this._wrapLines = false;
         }
-        async connectedCallback() {
-            await super.connectedCallback();
+        initComponent() {
             this.component._text._material.useFog = true;
         }
         getInitialComponentData() {
@@ -1287,7 +1417,20 @@
             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);
@@ -1773,14 +1916,11 @@
             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
             };
         }
@@ -2192,6 +2332,9 @@
     }
     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.
      *
@@ -2209,8 +2352,7 @@
             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');
@@ -2224,7 +2366,22 @@
             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);
@@ -2388,14 +2545,22 @@
     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
             };
         }
@@ -2406,6 +2571,40 @@
         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.
@@ -2440,6 +2639,40 @@
         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.
@@ -2458,17 +2691,38 @@
             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;
@@ -2480,7 +2734,7 @@
     /**
      * Represents a sound slot in the PlayCanvas engine.
      */
-    class SoundSlotElement extends HTMLElement {
+    class SoundSlotElement extends AsyncElement {
         constructor() {
             super(...arguments);
             this._asset = '';
@@ -2498,12 +2752,8 @@
             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,
@@ -2518,6 +2768,7 @@
             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);
@@ -2724,23 +2975,19 @@
     /**
      * 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);
@@ -2748,13 +2995,23 @@
                 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);
+                    });
+                }
             }
         }
         /**
@@ -2788,7 +3045,7 @@
     /**
      * Represents a scene in the PlayCanvas engine.
      */
-    class SceneElement extends HTMLElement {
+    class SceneElement extends AsyncElement {
         constructor() {
             super(...arguments);
             /**
@@ -2817,15 +3074,11 @@
             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) {
@@ -2951,57 +3204,71 @@
     /**
      * 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();
@@ -3016,24 +3283,21 @@
             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;
@@ -3045,25 +3309,45 @@
         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;
             }
         }
@@ -3072,6 +3356,7 @@
 
     exports.AppElement = AppElement;
     exports.AssetElement = AssetElement;
+    exports.AsyncElement = AsyncElement;
     exports.CameraComponentElement = CameraComponentElement;
     exports.CollisionComponentElement = CollisionComponentElement;
     exports.ComponentElement = ComponentElement;