@playcanvas/web-components 0.1.5 → 0.1.7

package/dist/pwc.js

@@ -49,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;
@@ -77,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.
@@ -96,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
@@ -145,6 +162,48 @@
                 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.
@@ -163,19 +222,196 @@
         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;
             }
         }
     }
     customElements.define('pc-app', AppElement);
 
+    const CSS_COLORS = {
+        aliceblue: '#f0f8ff',
+        antiquewhite: '#faebd7',
+        aqua: '#00ffff',
+        aquamarine: '#7fffd4',
+        azure: '#f0ffff',
+        beige: '#f5f5dc',
+        bisque: '#ffe4c4',
+        black: '#000000',
+        blanchedalmond: '#ffebcd',
+        blue: '#0000ff',
+        blueviolet: '#8a2be2',
+        brown: '#a52a2a',
+        burlywood: '#deb887',
+        cadetblue: '#5f9ea0',
+        chartreuse: '#7fff00',
+        chocolate: '#d2691e',
+        coral: '#ff7f50',
+        cornflowerblue: '#6495ed',
+        cornsilk: '#fff8dc',
+        crimson: '#dc143c',
+        cyan: '#00ffff',
+        darkblue: '#00008b',
+        darkcyan: '#008b8b',
+        darkgoldenrod: '#b8860b',
+        darkgray: '#a9a9a9',
+        darkgreen: '#006400',
+        darkgrey: '#a9a9a9',
+        darkkhaki: '#bdb76b',
+        darkmagenta: '#8b008b',
+        darkolivegreen: '#556b2f',
+        darkorange: '#ff8c00',
+        darkorchid: '#9932cc',
+        darkred: '#8b0000',
+        darksalmon: '#e9967a',
+        darkseagreen: '#8fbc8f',
+        darkslateblue: '#483d8b',
+        darkslategray: '#2f4f4f',
+        darkslategrey: '#2f4f4f',
+        darkturquoise: '#00ced1',
+        darkviolet: '#9400d3',
+        deeppink: '#ff1493',
+        deepskyblue: '#00bfff',
+        dimgray: '#696969',
+        dimgrey: '#696969',
+        dodgerblue: '#1e90ff',
+        firebrick: '#b22222',
+        floralwhite: '#fffaf0',
+        forestgreen: '#228b22',
+        fuchsia: '#ff00ff',
+        gainsboro: '#dcdcdc',
+        ghostwhite: '#f8f8ff',
+        gold: '#ffd700',
+        goldenrod: '#daa520',
+        gray: '#808080',
+        green: '#008000',
+        greenyellow: '#adff2f',
+        grey: '#808080',
+        honeydew: '#f0fff0',
+        hotpink: '#ff69b4',
+        indianred: '#cd5c5c',
+        indigo: '#4b0082',
+        ivory: '#fffff0',
+        khaki: '#f0e68c',
+        lavender: '#e6e6fa',
+        lavenderblush: '#fff0f5',
+        lawngreen: '#7cfc00',
+        lemonchiffon: '#fffacd',
+        lightblue: '#add8e6',
+        lightcoral: '#f08080',
+        lightcyan: '#e0ffff',
+        lightgoldenrodyellow: '#fafad2',
+        lightgray: '#d3d3d3',
+        lightgreen: '#90ee90',
+        lightgrey: '#d3d3d3',
+        lightpink: '#ffb6c1',
+        lightsalmon: '#ffa07a',
+        lightseagreen: '#20b2aa',
+        lightskyblue: '#87cefa',
+        lightslategray: '#778899',
+        lightslategrey: '#778899',
+        lightsteelblue: '#b0c4de',
+        lightyellow: '#ffffe0',
+        lime: '#00ff00',
+        limegreen: '#32cd32',
+        linen: '#faf0e6',
+        magenta: '#ff00ff',
+        maroon: '#800000',
+        mediumaquamarine: '#66cdaa',
+        mediumblue: '#0000cd',
+        mediumorchid: '#ba55d3',
+        mediumpurple: '#9370db',
+        mediumseagreen: '#3cb371',
+        mediumslateblue: '#7b68ee',
+        mediumspringgreen: '#00fa9a',
+        mediumturquoise: '#48d1cc',
+        mediumvioletred: '#c71585',
+        midnightblue: '#191970',
+        mintcream: '#f5fffa',
+        mistyrose: '#ffe4e1',
+        moccasin: '#ffe4b5',
+        navajowhite: '#ffdead',
+        navy: '#000080',
+        oldlace: '#fdf5e6',
+        olive: '#808000',
+        olivedrab: '#6b8e23',
+        orange: '#ffa500',
+        orangered: '#ff4500',
+        orchid: '#da70d6',
+        palegoldenrod: '#eee8aa',
+        palegreen: '#98fb98',
+        paleturquoise: '#afeeee',
+        palevioletred: '#db7093',
+        papayawhip: '#ffefd5',
+        peachpuff: '#ffdab9',
+        peru: '#cd853f',
+        pink: '#ffc0cb',
+        plum: '#dda0dd',
+        powderblue: '#b0e0e6',
+        purple: '#800080',
+        rebeccapurple: '#663399',
+        red: '#ff0000',
+        rosybrown: '#bc8f8f',
+        royalblue: '#4169e1',
+        saddlebrown: '#8b4513',
+        salmon: '#fa8072',
+        sandybrown: '#f4a460',
+        seagreen: '#2e8b57',
+        seashell: '#fff5ee',
+        sienna: '#a0522d',
+        silver: '#c0c0c0',
+        skyblue: '#87ceeb',
+        slateblue: '#6a5acd',
+        slategray: '#708090',
+        slategrey: '#708090',
+        snow: '#fffafa',
+        springgreen: '#00ff7f',
+        steelblue: '#4682b4',
+        tan: '#d2b48c',
+        teal: '#008080',
+        thistle: '#d8bfd8',
+        tomato: '#ff6347',
+        turquoise: '#40e0d0',
+        violet: '#ee82ee',
+        wheat: '#f5deb3',
+        white: '#ffffff',
+        whitesmoke: '#f5f5f5',
+        yellow: '#ffff00',
+        yellowgreen: '#9acd32'
+    };
+
     /**
      * Parse a color string into a Color object. String can be in the format of '#rgb', '#rgba',
      * '#rrggbb', '#rrggbbaa', or a string of 3 or 4 comma-delimited numbers.
@@ -184,10 +420,15 @@
      * @returns The parsed Color object.
      */
     const parseColor = (value) => {
+        // Check if it's a CSS color name first
+        const hexColor = CSS_COLORS[value.toLowerCase()];
+        if (hexColor) {
+            return new playcanvas.Color().fromString(hexColor);
+        }
         if (value.startsWith('#')) {
             return new playcanvas.Color().fromString(value);
         }
-        const components = value.split(',').map(Number);
+        const components = value.split(' ').map(Number);
         return new playcanvas.Color(components);
     };
     /**
@@ -197,7 +438,7 @@
      * @returns The parsed Quat object.
      */
     const parseQuat = (value) => {
-        const [x, y, z] = value.split(',').map(Number);
+        const [x, y, z] = value.split(' ').map(Number);
         const q = new playcanvas.Quat();
         q.setFromEulerAngles(x, y, z);
         return q;
@@ -209,7 +450,7 @@
      * @returns The parsed Vec2 object.
      */
     const parseVec2 = (value) => {
-        const components = value.split(',').map(Number);
+        const components = value.split(' ').map(Number);
         return new playcanvas.Vec2(components);
     };
     /**
@@ -219,7 +460,7 @@
      * @returns The parsed Vec3 object.
      */
     const parseVec3 = (value) => {
-        const components = value.split(',').map(Number);
+        const components = value.split(' ').map(Number);
         return new playcanvas.Vec3(components);
     };
     /**
@@ -229,7 +470,7 @@
      * @returns The parsed Vec4 object.
      */
     const parseVec4 = (value) => {
-        const components = value.split(',').map(Number);
+        const components = value.split(' ').map(Number);
         return new playcanvas.Vec4(components);
     };
 
@@ -2247,6 +2488,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.
      *
@@ -2276,9 +2520,39 @@
         }
         applyAttributes(script, attributes) {
             try {
-                // Parse the attributes string into an object and set them on the script
                 const attributesObject = attributes ? JSON.parse(attributes) : {};
-                Object.assign(script, attributesObject);
+                const applyValue = (target, key, value) => {
+                    // Handle vectors
+                    if (Array.isArray(value)) {
+                        if (target[key] instanceof playcanvas.Vec2) {
+                            target[key] = tmpV2.set(value[0], value[1]);
+                            return;
+                        }
+                        if (target[key] instanceof playcanvas.Vec3) {
+                            target[key] = tmpV3.set(value[0], value[1], value[2]);
+                            return;
+                        }
+                        if (target[key] instanceof playcanvas.Vec4) {
+                            target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                            return;
+                        }
+                    }
+                    // Handle nested objects
+                    if (value && typeof value === 'object' && !Array.isArray(value)) {
+                        if (!target[key] || typeof target[key] !== 'object') {
+                            target[key] = {};
+                        }
+                        for (const nestedKey in value) {
+                            applyValue(target[key], nestedKey, value[nestedKey]);
+                        }
+                    }
+                    else {
+                        target[key] = value;
+                    }
+                };
+                for (const key in attributesObject) {
+                    applyValue(script, key, attributesObject[key]);
+                }
             }
             catch (error) {
                 console.error(`Error parsing attributes JSON string ${attributes}:`, error);
@@ -2442,14 +2716,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
             };
         }
@@ -2460,6 +2742,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.
@@ -2494,6 +2810,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.
@@ -2512,17 +2862,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;
@@ -2779,48 +3150,71 @@
         constructor() {
             super(...arguments);
             this._asset = '';
+            this._entity = null;
         }
-        async connectedCallback() {
-            var _a;
-            await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
-            const asset = this.getAttribute('asset');
-            if (asset) {
-                this.asset = asset;
-            }
+        connectedCallback() {
+            this._loadModel();
             this._onReady();
         }
-        _loadModel() {
-            const asset = AssetElement.get(this._asset);
-            if (!asset) {
-                return;
-            }
-            const entity = asset.resource.instantiateRenderEntity();
-            if (asset.resource.animations.length > 0) {
-                entity.addComponent('anim');
-                entity.anim.assignAnimation('animation', asset.resource.animations[0].resource);
+        disconnectedCallback() {
+            this._unloadModel();
+        }
+        _instantiate(container) {
+            this._entity = container.instantiateRenderEntity();
+            // @ts-ignore
+            if (container.animations.length > 0) {
+                this._entity.addComponent('anim');
+                // @ts-ignore
+                this._entity.anim.assignAnimation('animation', container.animations[0].resource);
             }
             const parentEntityElement = this.closestEntity;
             if (parentEntityElement) {
                 parentEntityElement.ready().then(() => {
-                    parentEntityElement.entity.addChild(entity);
+                    parentEntityElement.entity.addChild(this._entity);
                 });
             }
             else {
                 const appElement = this.closestApp;
                 if (appElement) {
                     appElement.ready().then(() => {
-                        appElement.app.root.addChild(entity);
+                        appElement.app.root.addChild(this._entity);
                     });
                 }
             }
         }
+        async _loadModel() {
+            var _a;
+            this._unloadModel();
+            const appElement = await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+            const app = appElement === null || appElement === void 0 ? void 0 : appElement.app;
+            const asset = AssetElement.get(this._asset);
+            if (!asset) {
+                return;
+            }
+            if (asset.loaded) {
+                this._instantiate(asset.resource);
+            }
+            else {
+                asset.once('load', () => {
+                    this._instantiate(asset.resource);
+                });
+                app.assets.load(asset);
+            }
+        }
+        _unloadModel() {
+            var _a;
+            (_a = this._entity) === null || _a === void 0 ? void 0 : _a.destroy();
+            this._entity = null;
+        }
         /**
          * Sets the asset ID of the model.
          * @param value - The asset ID.
          */
         set asset(value) {
             this._asset = value;
-            this._loadModel();
+            if (this.isConnected) {
+                this._loadModel();
+            }
         }
         /**
          * Gets the source URL of the model.
@@ -3012,48 +3406,76 @@
             this._intensity = 1;
             this._rotation = new playcanvas.Vec3();
             this._level = 0;
+            this._lighting = false;
             this._scale = new playcanvas.Vec3(100, 100, 100);
             this._type = 'infinite';
+            this._scene = null;
         }
-        async connectedCallback() {
-            var _a;
-            await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
-            this.asset = this.getAttribute('asset') || '';
+        connectedCallback() {
+            this._loadSkybox();
             this._onReady();
         }
-        getScene() {
-            const app = this.closestApp.app;
-            if (!app) {
-                return;
-            }
-            return app.scene;
+        disconnectedCallback() {
+            this._unloadSkybox();
         }
-        initSkybox(source) {
+        _generateSkybox(asset) {
+            if (!this._scene)
+                return;
+            const source = asset.resource;
             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;
+            this._scene.skybox = skybox;
+            if (this._lighting) {
+                const lighting = playcanvas.EnvLighting.generateLightingSource(source);
+                const envAtlas = playcanvas.EnvLighting.generateAtlas(lighting);
+                this._scene.envAtlas = envAtlas;
             }
+            const layer = this._scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
+            if (layer) {
+                layer.enabled = this._type !== 'none';
+            }
+            this._scene.sky.type = this._type;
+            this._scene.sky.node.setLocalScale(this._scale);
+            this._scene.sky.center = this._center;
+        }
+        async _loadSkybox() {
+            var _a;
+            const appElement = await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+            const app = appElement === null || appElement === void 0 ? void 0 : appElement.app;
+            if (!app) {
+                return;
+            }
+            const asset = AssetElement.get(this._asset);
+            if (!asset) {
+                return;
+            }
+            this._scene = app.scene;
+            if (asset.loaded) {
+                this._generateSkybox(asset);
+            }
+            else {
+                asset.once('load', () => {
+                    this._generateSkybox(asset);
+                });
+                app.assets.load(asset);
+            }
+        }
+        _unloadSkybox() {
+            var _a, _b;
+            if (!this._scene)
+                return;
+            (_a = this._scene.skybox) === null || _a === void 0 ? void 0 : _a.destroy();
+            // @ts-ignore
+            this._scene.skybox = null;
+            (_b = this._scene.envAtlas) === null || _b === void 0 ? void 0 : _b.destroy();
+            // @ts-ignore
+            this._scene.envAtlas = null;
+            this._scene = null;
         }
         set asset(value) {
             this._asset = value;
-            const scene = this.getScene();
-            if (scene) {
-                const asset = AssetElement.get(value);
-                if (asset) {
-                    this.initSkybox(asset.resource);
-                }
+            if (this.isConnected) {
+                this._loadSkybox();
             }
         }
         get asset() {
@@ -3061,9 +3483,8 @@
         }
         set center(value) {
             this._center = value;
-            const scene = this.getScene();
-            if (scene) {
-                scene.sky.center = this._center;
+            if (this._scene) {
+                this._scene.sky.center = this._center;
             }
         }
         get center() {
@@ -3071,19 +3492,32 @@
         }
         set intensity(value) {
             this._intensity = value;
-            const scene = this.getScene();
-            if (scene) {
-                scene.skyboxIntensity = this._intensity;
+            if (this._scene) {
+                this._scene.skyboxIntensity = this._intensity;
             }
         }
         get intensity() {
             return this._intensity;
         }
+        set level(value) {
+            this._level = value;
+            if (this._scene) {
+                this._scene.skyboxMip = this._level;
+            }
+        }
+        get level() {
+            return this._level;
+        }
+        set lighting(value) {
+            this._lighting = value;
+        }
+        get lighting() {
+            return this._lighting;
+        }
         set rotation(value) {
             this._rotation = value;
-            const scene = this.getScene();
-            if (scene) {
-                scene.skyboxRotation = new playcanvas.Quat().setFromEulerAngles(value);
+            if (this._scene) {
+                this._scene.skyboxRotation = new playcanvas.Quat().setFromEulerAngles(value);
             }
         }
         get rotation() {
@@ -3091,30 +3525,18 @@
         }
         set scale(value) {
             this._scale = value;
-            const scene = this.getScene();
-            if (scene) {
-                scene.sky.node.setLocalScale(this._scale);
+            if (this._scene) {
+                this._scene.sky.node.setLocalScale(this._scale);
             }
         }
         get scale() {
             return this._scale;
         }
-        set level(value) {
-            this._level = value;
-            const scene = this.getScene();
-            if (scene) {
-                scene.skyboxMip = this._level;
-            }
-        }
-        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 (this._scene) {
+                this._scene.sky.type = this._type;
+                const layer = this._scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
                 if (layer) {
                     layer.enabled = this._type !== 'none';
                 }
@@ -3124,7 +3546,7 @@
             return this._type;
         }
         static get observedAttributes() {
-            return ['asset', 'center', 'intensity', 'level', 'rotation', 'scale', 'type'];
+            return ['asset', 'center', 'intensity', 'level', 'lighting', 'rotation', 'scale', 'type'];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
@@ -3137,12 +3559,15 @@
                 case 'intensity':
                     this.intensity = parseFloat(newValue);
                     break;
-                case 'rotation':
-                    this.rotation = parseVec3(newValue);
-                    break;
                 case 'level':
                     this.level = parseInt(newValue, 10);
                     break;
+                case 'lighting':
+                    this.lighting = this.hasAttribute(name);
+                    break;
+                case 'rotation':
+                    this.rotation = parseVec3(newValue);
+                    break;
                 case 'scale':
                     this.scale = parseVec3(newValue);
                     break;