@playcanvas/web-components 0.1.0 → 0.1.1

package/src/scene.ts

@@ -0,0 +1,188 @@
+import { Color, Scene } from 'playcanvas';
+
+import { AppElement } from './app';
+import { parseColor } from './utils';
+
+/**
+ * Represents a scene in the PlayCanvas engine.
+ */
+class SceneElement extends HTMLElement {
+    /**
+     * The fog type of the scene.
+     */
+    private _fog = 'none'; // possible values: 'none', 'linear', 'exp', 'exp2'
+
+    /**
+     * The color of the fog.
+     */
+    private _fogColor = new Color(1, 1, 1);
+
+    /**
+     * The density of the fog.
+     */
+    private _fogDensity = 0;
+
+    /**
+     * The start distance of the fog.
+     */
+    private _fogStart = 0;
+
+    /**
+     * The end distance of the fog.
+     */
+    private _fogEnd = 1000;
+
+    /**
+     * The PlayCanvas scene instance.
+     */
+    scene: Scene | null = null;
+
+    async connectedCallback() {
+        // Get the application
+        const appElement = this.closest('pc-app') as AppElement;
+        if (!appElement) {
+            console.warn(`${this.tagName} must be a child of pc-app`);
+            return;
+        }
+
+        const app = await appElement.getApplication();
+
+        this.scene = app.scene;
+        this.updateSceneSettings();
+    }
+
+    updateSceneSettings() {
+        if (this.scene) {
+            this.scene.rendering.fog = this._fog;
+            this.scene.rendering.fogColor = this._fogColor;
+            this.scene.rendering.fogDensity = this._fogDensity;
+            this.scene.rendering.fogStart = this._fogStart;
+            this.scene.rendering.fogEnd = this._fogEnd;
+            // ... set other properties on the scene as well
+        }
+    }
+
+    /**
+     * Sets the fog type of the scene.
+     * @param value - The fog type.
+     */
+    set fog(value) {
+        this._fog = value;
+        if (this.scene) {
+            this.scene.rendering.fog = value;
+        }
+    }
+
+    /**
+     * Gets the fog type of the scene.
+     * @returns The fog type.
+     */
+    get fog() {
+        return this._fog;
+    }
+
+    /**
+     * Sets the fog color of the scene.
+     * @param value - The fog color.
+     */
+    set fogColor(value: Color) {
+        this._fogColor = value;
+        if (this.scene) {
+            this.scene.rendering.fogColor = value;
+        }
+    }
+
+    /**
+     * Gets the fog color of the scene.
+     * @returns The fog color.
+     */
+    get fogColor() {
+        return this._fogColor;
+    }
+
+    /**
+     * Sets the fog density of the scene.
+     * @param value - The fog density.
+     */
+    set fogDensity(value: number) {
+        this._fogDensity = value;
+        if (this.scene) {
+            this.scene.rendering.fogDensity = value;
+        }
+    }
+
+    /**
+     * Gets the fog density of the scene.
+     * @returns The fog density.
+     */
+    get fogDensity() {
+        return this._fogDensity;
+    }
+
+    /**
+     * Sets the fog start distance of the scene.
+     * @param value - The fog start distance.
+     */
+    set fogStart(value: number) {
+        this._fogStart = value;
+        if (this.scene) {
+            this.scene.rendering.fogStart = value;
+        }
+    }
+
+    /**
+     * Gets the fog start distance of the scene.
+     * @returns The fog start distance.
+     */
+    get fogStart() {
+        return this._fogStart;
+    }
+
+    /**
+     * Sets the fog end distance of the scene.
+     * @param value - The fog end distance.
+     */
+    set fogEnd(value: number) {
+        this._fogEnd = value;
+        if (this.scene) {
+            this.scene.rendering.fogEnd = value;
+        }
+    }
+
+    /**
+     * Gets the fog end distance of the scene.
+     * @returns The fog end distance.
+     */
+    get fogEnd() {
+        return this._fogEnd;
+    }
+
+    static get observedAttributes() {
+        return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'fog':
+                this.fog = newValue;
+                break;
+            case 'fog-color':
+                this.fogColor = parseColor(newValue);
+                break;
+            case 'fog-density':
+                this.fogDensity = parseFloat(newValue);
+                break;
+            case 'fog-start':
+                this.fogStart = parseFloat(newValue);
+                break;
+            case 'fog-end':
+                this.fogEnd = parseFloat(newValue);
+                break;
+            // ... handle other attributes as well
+        }
+    }
+}
+
+customElements.define('pc-scene', SceneElement);
+
+export { SceneElement };

package/src/sky.ts

@@ -0,0 +1,150 @@
+import { LAYERID_SKYBOX, Quat } from 'playcanvas';
+
+import { AppElement } from './app';
+import { AssetElement } from './asset';
+
+/**
+ * Represents a sky in the PlayCanvas engine.
+ */
+class SkyElement extends HTMLElement {
+    private _asset = '';
+
+    private _intensity = 1;
+
+    private _rotation = [0, 0, 0];
+
+    private _level = 0;
+
+    private _solidColor = false;
+
+    async connectedCallback() {
+        // Get the application
+        const appElement = this.closest('pc-app') as AppElement;
+        if (!appElement) {
+            console.warn(`${this.tagName} must be a child of pc-app`);
+            return;
+        }
+
+        await appElement.getApplication();
+
+        this.asset = this.getAttribute('asset') || '';
+        this.solidColor = this.hasAttribute('solid-color');
+    }
+
+    getAsset() {
+        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
+        return assetElement!.asset;
+    }
+
+    getScene() {
+        const appElement = this.closest('pc-app') as AppElement | null;
+        if (!appElement) {
+            return;
+        }
+        const app = appElement.app;
+        if (!app) {
+            return;
+        }
+        return app.scene;
+    }
+
+    set asset(value: string) {
+        this._asset = value;
+        const scene = this.getScene();
+        if (scene) {
+            const asset = this.getAsset();
+            if (asset) {
+                if (asset.resource) {
+                    scene.envAtlas = asset.resource;
+                } else {
+                    asset.once('load', () => {
+                        scene.envAtlas = asset.resource;
+                    });
+                }
+            }
+        }
+    }
+
+    get asset() {
+        return this._asset;
+    }
+
+    set intensity(value: number) {
+        this._intensity = value;
+        const scene = this.getScene();
+        if (scene) {
+            scene.skyboxIntensity = this._intensity;
+        }
+    }
+
+    get intensity() {
+        return this._intensity;
+    }
+
+    set rotation(value: number[]) {
+        this._rotation = value;
+        const scene = this.getScene();
+        if (scene) {
+            scene.skyboxRotation = new Quat().setFromEulerAngles(this._rotation[0], this._rotation[1], this._rotation[2]);
+        }
+    }
+
+    get rotation() {
+        return this._rotation;
+    }
+
+    set solidColor(value: boolean) {
+        this._solidColor = value;
+        const scene = this.getScene();
+        if (scene) {
+            const layer = scene.layers.getLayerById(LAYERID_SKYBOX);
+            if (layer) {
+                layer.enabled = !this._solidColor;
+            }
+        }
+    }
+
+    get solidColor() {
+        return this._solidColor;
+    }
+
+    set level(value: number) {
+        this._level = value;
+        const scene = this.getScene();
+        if (scene) {
+            scene.skyboxMip = this._level;
+        }
+    }
+
+    get level() {
+        return this._level;
+    }
+
+    static get observedAttributes() {
+        return ['asset', 'intensity', 'level', 'rotation', 'solid-color'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+            case 'intensity':
+                this.intensity = parseFloat(newValue);
+                break;
+            case 'rotation':
+                this.rotation = newValue.split(',').map(Number);
+                break;
+            case 'level':
+                this.level = parseInt(newValue, 10);
+                break;
+            case 'solid-color':
+                this.solidColor = this.hasAttribute('solid-color');
+                break;
+        }
+    }
+}
+
+customElements.define('pc-sky', SkyElement);
+
+export { SkyElement };

package/src/utils.ts

@@ -0,0 +1,50 @@
+import { Color, Vec2, Vec3, Vec4 } from 'playcanvas';
+
+/**
+ * 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.
+ *
+ * @param value - The color string to parse.
+ * @returns The parsed Color object.
+ */
+export const parseColor = (value: string): Color => {
+    if (value.startsWith('#')) {
+        return new Color().fromString(value);
+    }
+
+    const components = value.split(',').map(Number);
+    return new Color(components);
+};
+
+/**
+ * Parse a Vec2 string into a Vec2 object. String can be in the format of 'x,y'.
+ *
+ * @param value - The Vec2 string to parse.
+ * @returns The parsed Vec2 object.
+ */
+export const parseVec2 = (value: string): Vec2 => {
+    const components = value.split(',').map(Number);
+    return new Vec2(components);
+};
+
+/**
+ * Parse a Vec3 string into a Vec3 object. String can be in the format of 'x,y,z'.
+ *
+ * @param value - The Vec3 string to parse.
+ * @returns The parsed Vec3 object.
+ */
+export const parseVec3 = (value: string): Vec3 => {
+    const components = value.split(',').map(Number);
+    return new Vec3(components);
+};
+
+/**
+ * Parse a Vec4 string into a Vec4 object. String can be in the format of 'x,y,z,w'.
+ *
+ * @param value - The Vec4 string to parse.
+ * @returns The parsed Vec4 object.
+ */
+export const parseVec4 = (value: string): Vec4 => {
+    const components = value.split(',').map(Number);
+    return new Vec4(components);
+};