@playcanvas/web-components 0.3.0 → 0.5.0

package/src/sky.ts

@@ -1,293 +1,293 @@
-import { Asset, EnvLighting, LAYERID_SKYBOX, Quat, Scene, Texture, Vec3 } from 'playcanvas';
-
-import { AssetElement } from './asset';
-import { AsyncElement } from './async-element';
-import { parseVec3 } from './utils';
-
-/**
- * The SkyElement interface provides properties and methods for manipulating
- * `<pc-sky>` elements. The SkyElement interface also inherits the properties and
- * methods of the {@link HTMLElement} interface.
- */
-class SkyElement extends AsyncElement {
-    private _asset = '';
-
-    private _center = new Vec3(0, 0.01, 0);
-
-    private _intensity = 1;
-
-    private _rotation = new Vec3();
-
-    private _level = 0;
-
-    private _lighting = false;
-
-    private _scale = new Vec3(100, 100, 100);
-
-    private _type: 'box' | 'dome' | 'infinite' | 'none' = 'infinite';
-
-    private _scene: Scene | null = null;
-
-    connectedCallback() {
-        this._loadSkybox();
-        this._onReady();
-    }
-
-    disconnectedCallback() {
-        this._unloadSkybox();
-    }
-
-    private _generateSkybox(asset: Asset) {
-        if (!this._scene) return;
-
-        const source = asset.resource as Texture;
-
-        const skybox = EnvLighting.generateSkyboxCubemap(source);
-        skybox.anisotropy = 4;
-        this._scene.skybox = skybox;
-
-        if (this._lighting) {
-            const lighting = EnvLighting.generateLightingSource(source);
-            const envAtlas = EnvLighting.generateAtlas(lighting);
-            this._scene.envAtlas = envAtlas;
-        }
-
-        const layer = this._scene.layers.getLayerById(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;
-        this._scene.skyboxIntensity = this._intensity;
-        this._scene.skyboxMip = this._level;
-    }
-
-    private async _loadSkybox() {
-        const appElement = await this.closestApp?.ready();
-        const app = 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);
-        }
-    }
-
-    private _unloadSkybox() {
-        if (!this._scene) return;
-
-        this._scene.skybox?.destroy();
-        // @ts-ignore
-        this._scene.skybox = null;
-        this._scene.envAtlas?.destroy();
-        // @ts-ignore
-        this._scene.envAtlas = null;
-
-        this._scene = null;
-    }
-
-    /**
-     * Sets the id of the `pc-asset` to use for the skybox.
-     * @param value - The asset ID.
-     */
-    set asset(value: string) {
-        this._asset = value;
-        if (this.isConnected) {
-            this._loadSkybox();
-        }
-    }
-
-    /**
-     * Gets the id of the `pc-asset` to use for the skybox.
-     * @returns The asset ID.
-     */
-    get asset() {
-        return this._asset;
-    }
-
-    /**
-     * Sets the center of the skybox.
-     * @param value - The center.
-     */
-    set center(value: Vec3) {
-        this._center = value;
-        if (this._scene) {
-            this._scene.sky.center = this._center;
-        }
-    }
-
-    /**
-     * Gets the center of the skybox.
-     * @returns The center.
-     */
-    get center() {
-        return this._center;
-    }
-
-    /**
-     * Sets the intensity of the skybox.
-     * @param value - The intensity.
-     */
-    set intensity(value: number) {
-        this._intensity = value;
-        if (this._scene) {
-            this._scene.skyboxIntensity = this._intensity;
-        }
-    }
-
-    /**
-     * Gets the intensity of the skybox.
-     * @returns The intensity.
-     */
-    get intensity() {
-        return this._intensity;
-    }
-
-    /**
-     * Sets the mip level of the skybox.
-     * @param value - The mip level.
-     */
-    set level(value: number) {
-        this._level = value;
-        if (this._scene) {
-            this._scene.skyboxMip = this._level;
-        }
-    }
-
-    /**
-     * Gets the mip level of the skybox.
-     * @returns The mip level.
-     */
-    get level() {
-        return this._level;
-    }
-
-    /**
-     * Sets whether the skybox is used as a light source.
-     * @param value - Whether to use lighting.
-     */
-    set lighting(value: boolean) {
-        this._lighting = value;
-    }
-
-    /**
-     * Gets whether the skybox is used as a light source.
-     * @returns Whether to use lighting.
-     */
-    get lighting() {
-        return this._lighting;
-    }
-
-    /**
-     * Sets the Euler rotation of the skybox.
-     * @param value - The rotation.
-     */
-    set rotation(value: Vec3) {
-        this._rotation = value;
-        if (this._scene) {
-            this._scene.skyboxRotation = new Quat().setFromEulerAngles(value);
-        }
-    }
-
-    /**
-     * Gets the Euler rotation of the skybox.
-     * @returns The rotation.
-     */
-    get rotation() {
-        return this._rotation;
-    }
-
-    /**
-     * Sets the scale of the skybox.
-     * @param value - The scale.
-     */
-    set scale(value: Vec3) {
-        this._scale = value;
-        if (this._scene) {
-            this._scene.sky.node.setLocalScale(this._scale);
-        }
-    }
-
-    /**
-     * Gets the scale of the skybox.
-     * @returns The scale.
-     */
-    get scale() {
-        return this._scale;
-    }
-
-    /**
-     * Sets the type of the skybox.
-     * @param value - The type.
-     */
-    set type(value: 'box' | 'dome' | 'infinite' | 'none') {
-        this._type = value;
-        if (this._scene) {
-            this._scene.sky.type = this._type;
-            const layer = this._scene.layers.getLayerById(LAYERID_SKYBOX);
-            if (layer) {
-                layer.enabled = this._type !== 'none';
-            }
-        }
-    }
-
-    /**
-     * Gets the type of the skybox.
-     * @returns The type.
-     */
-    get type() {
-        return this._type;
-    }
-
-    static get observedAttributes() {
-        return ['asset', 'center', 'intensity', 'level', 'lighting', 'rotation', 'scale', 'type'];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        switch (name) {
-            case 'asset':
-                this.asset = newValue;
-                break;
-            case 'center':
-                this.center = parseVec3(newValue);
-                break;
-            case 'intensity':
-                this.intensity = parseFloat(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;
-            case 'type':
-                this.type = newValue as 'box' | 'dome' | 'infinite' | 'none';
-                break;
-        }
-    }
-}
-
-customElements.define('pc-sky', SkyElement);
-
-export { SkyElement };
+import { Asset, EnvLighting, LAYERID_SKYBOX, Quat, Scene, Texture, Vec3 } from 'playcanvas';
+
+import { AssetElement } from './asset';
+import { AsyncElement } from './async-element';
+import { parseVec3 } from './utils';
+
+/**
+ * The SkyElement interface provides properties and methods for manipulating
+ * `<pc-sky>` elements. The SkyElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
+ */
+class SkyElement extends AsyncElement {
+    private _asset = '';
+
+    private _center = new Vec3(0, 0.01, 0);
+
+    private _intensity = 1;
+
+    private _rotation = new Vec3();
+
+    private _level = 0;
+
+    private _lighting = false;
+
+    private _scale = new Vec3(100, 100, 100);
+
+    private _type: 'box' | 'dome' | 'infinite' | 'none' = 'infinite';
+
+    private _scene: Scene | null = null;
+
+    connectedCallback() {
+        this._loadSkybox();
+        this._onReady();
+    }
+
+    disconnectedCallback() {
+        this._unloadSkybox();
+    }
+
+    private _generateSkybox(asset: Asset) {
+        if (!this._scene) return;
+
+        const source = asset.resource as Texture;
+
+        const skybox = EnvLighting.generateSkyboxCubemap(source);
+        skybox.anisotropy = 4;
+        this._scene.skybox = skybox;
+
+        if (this._lighting) {
+            const lighting = EnvLighting.generateLightingSource(source);
+            const envAtlas = EnvLighting.generateAtlas(lighting);
+            this._scene.envAtlas = envAtlas;
+        }
+
+        const layer = this._scene.layers.getLayerById(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;
+        this._scene.skyboxIntensity = this._intensity;
+        this._scene.skyboxMip = this._level;
+    }
+
+    private async _loadSkybox() {
+        const appElement = await this.closestApp?.ready();
+        const app = 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);
+        }
+    }
+
+    private _unloadSkybox() {
+        if (!this._scene) return;
+
+        this._scene.skybox?.destroy();
+        // @ts-ignore
+        this._scene.skybox = null;
+        this._scene.envAtlas?.destroy();
+        // @ts-ignore
+        this._scene.envAtlas = null;
+
+        this._scene = null;
+    }
+
+    /**
+     * Sets the id of the `pc-asset` to use for the skybox.
+     * @param value - The asset ID.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        if (this.isConnected) {
+            this._loadSkybox();
+        }
+    }
+
+    /**
+     * Gets the id of the `pc-asset` to use for the skybox.
+     * @returns The asset ID.
+     */
+    get asset() {
+        return this._asset;
+    }
+
+    /**
+     * Sets the center of the skybox.
+     * @param value - The center.
+     */
+    set center(value: Vec3) {
+        this._center = value;
+        if (this._scene) {
+            this._scene.sky.center = this._center;
+        }
+    }
+
+    /**
+     * Gets the center of the skybox.
+     * @returns The center.
+     */
+    get center() {
+        return this._center;
+    }
+
+    /**
+     * Sets the intensity of the skybox.
+     * @param value - The intensity.
+     */
+    set intensity(value: number) {
+        this._intensity = value;
+        if (this._scene) {
+            this._scene.skyboxIntensity = this._intensity;
+        }
+    }
+
+    /**
+     * Gets the intensity of the skybox.
+     * @returns The intensity.
+     */
+    get intensity() {
+        return this._intensity;
+    }
+
+    /**
+     * Sets the mip level of the skybox.
+     * @param value - The mip level.
+     */
+    set level(value: number) {
+        this._level = value;
+        if (this._scene) {
+            this._scene.skyboxMip = this._level;
+        }
+    }
+
+    /**
+     * Gets the mip level of the skybox.
+     * @returns The mip level.
+     */
+    get level() {
+        return this._level;
+    }
+
+    /**
+     * Sets whether the skybox is used as a light source.
+     * @param value - Whether to use lighting.
+     */
+    set lighting(value: boolean) {
+        this._lighting = value;
+    }
+
+    /**
+     * Gets whether the skybox is used as a light source.
+     * @returns Whether to use lighting.
+     */
+    get lighting() {
+        return this._lighting;
+    }
+
+    /**
+     * Sets the Euler rotation of the skybox.
+     * @param value - The rotation.
+     */
+    set rotation(value: Vec3) {
+        this._rotation = value;
+        if (this._scene) {
+            this._scene.skyboxRotation = new Quat().setFromEulerAngles(value);
+        }
+    }
+
+    /**
+     * Gets the Euler rotation of the skybox.
+     * @returns The rotation.
+     */
+    get rotation() {
+        return this._rotation;
+    }
+
+    /**
+     * Sets the scale of the skybox.
+     * @param value - The scale.
+     */
+    set scale(value: Vec3) {
+        this._scale = value;
+        if (this._scene) {
+            this._scene.sky.node.setLocalScale(this._scale);
+        }
+    }
+
+    /**
+     * Gets the scale of the skybox.
+     * @returns The scale.
+     */
+    get scale() {
+        return this._scale;
+    }
+
+    /**
+     * Sets the type of the skybox.
+     * @param value - The type.
+     */
+    set type(value: 'box' | 'dome' | 'infinite' | 'none') {
+        this._type = value;
+        if (this._scene) {
+            this._scene.sky.type = this._type;
+            const layer = this._scene.layers.getLayerById(LAYERID_SKYBOX);
+            if (layer) {
+                layer.enabled = this._type !== 'none';
+            }
+        }
+    }
+
+    /**
+     * Gets the type of the skybox.
+     * @returns The type.
+     */
+    get type() {
+        return this._type;
+    }
+
+    static get observedAttributes() {
+        return ['asset', 'center', 'intensity', 'level', 'lighting', 'rotation', 'scale', 'type'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+            case 'center':
+                this.center = parseVec3(newValue);
+                break;
+            case 'intensity':
+                this.intensity = parseFloat(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;
+            case 'type':
+                this.type = newValue as 'box' | 'dome' | 'infinite' | 'none';
+                break;
+        }
+    }
+}
+
+customElements.define('pc-sky', SkyElement);
+
+export { SkyElement };