@playcanvas/web-components 0.1.6 → 0.1.8

package/src/components/script-component.ts

@@ -2,6 +2,7 @@ import { ScriptComponent, Script, Vec2, Vec3, Vec4 } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { ScriptElement } from './script';
+import { AssetElement } from '../asset';
 
 const tmpV2 = new Vec2();
 const tmpV3 = new Vec3();
@@ -59,24 +60,50 @@ class ScriptComponentElement extends ComponentElement {
 
     private applyAttributes(script: any, attributes: string | null) {
         try {
-            // Parse the attributes string into an object and set them on the script
             const attributesObject = attributes ? JSON.parse(attributes) : {};
-            for (const key in attributesObject) {
-                const value = attributesObject[key];
-                if (Array.isArray(value) && script[key] instanceof Vec2) {
-                    script[key] = tmpV2.set(value[0], value[1]);
-                    continue;
+
+            const applyValue = (target: any, key: string, value: any) => {
+                // Handle asset references
+                if (typeof value === 'string' && value.startsWith('asset:')) {
+                    const assetId = value.slice(6);
+                    const assetElement = document.querySelector(`pc-asset#${assetId}`) as AssetElement;
+                    if (assetElement) {
+                        target[key] = assetElement.asset;
+                        return;
+                    }
                 }
-                if (Array.isArray(value) && script[key] instanceof Vec3) {
-                    script[key] = tmpV3.set(value[0], value[1], value[2]);
-                    continue;
+
+                // Handle vectors
+                if (Array.isArray(value)) {
+                    if (target[key] instanceof Vec2) {
+                        target[key] = tmpV2.set(value[0], value[1]);
+                        return;
+                    }
+                    if (target[key] instanceof Vec3) {
+                        target[key] = tmpV3.set(value[0], value[1], value[2]);
+                        return;
+                    }
+                    if (target[key] instanceof Vec4) {
+                        target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                        return;
+                    }
                 }
-                if (Array.isArray(value) && script[key] instanceof Vec4) {
-                    script[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
-                    continue;
+
+                // 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;
                 }
+            };
 
-                script[key] = value;
+            for (const key in attributesObject) {
+                applyValue(script, key, attributesObject[key]);
             }
         } catch (error) {
             console.error(`Error parsing attributes JSON string ${attributes}:`, error);

package/src/entity.ts

@@ -55,12 +55,14 @@ class EntityElement extends AsyncElement {
         this.entity = new Entity(this._name, app);
 
         // Initialize from attributes
+        const enabledAttr = this.getAttribute('enabled');
         const nameAttr = this.getAttribute('name');
         const positionAttr = this.getAttribute('position');
         const rotationAttr = this.getAttribute('rotation');
         const scaleAttr = this.getAttribute('scale');
         const tagsAttr = this.getAttribute('tags');
 
+        if (enabledAttr) this.enabled = enabledAttr !== 'false';
         if (nameAttr) this.name = nameAttr;
         if (positionAttr) this.position = parseVec3(positionAttr);
         if (rotationAttr) this.rotation = parseVec3(rotationAttr);

package/src/model.ts

@@ -1,3 +1,5 @@
+import { ContainerResource, Entity } from 'playcanvas';
+
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 
@@ -7,51 +9,77 @@ import { AsyncElement } from './async-element';
 class ModelElement extends AsyncElement {
     private _asset: string = '';
 
-    async connectedCallback() {
-        await this.closestApp?.ready();
-
-        const asset = this.getAttribute('asset');
-        if (asset) {
-            this.asset = asset;
-        }
+    private _entity: Entity | null = null;
 
+    connectedCallback() {
+        this._loadModel();
         this._onReady();
     }
 
-    _loadModel() {
-        const asset = AssetElement.get(this._asset);
-        if (!asset) {
-            return;
-        }
-        const entity = asset.resource.instantiateRenderEntity();
+    disconnectedCallback() {
+        this._unloadModel();
+    }
+
+    private _instantiate(container: ContainerResource) {
+        this._entity = container.instantiateRenderEntity();
 
-        if (asset.resource.animations.length > 0) {
-            entity.addComponent('anim');
-            entity.anim.assignAnimation('animation', asset.resource.animations[0].resource);
+        // @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!);
                 });
             }
         }
     }
 
+    private async _loadModel() {
+        this._unloadModel();
+
+        const appElement = await this.closestApp?.ready();
+        const app = 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);
+        }
+    }
+
+    private _unloadModel() {
+        this._entity?.destroy();
+        this._entity = null;
+    }
+
     /**
      * Sets the asset ID of the model.
      * @param value - The asset ID.
      */
     set asset(value: string) {
         this._asset = value;
-        this._loadModel();
+        if (this.isConnected) {
+            this._loadModel();
+        }
     }
 
     /**

package/src/sky.ts

@@ -1,4 +1,4 @@
-import { EnvLighting, LAYERID_SKYBOX, Quat, Texture, Vec3 } from 'playcanvas';
+import { Asset, EnvLighting, LAYERID_SKYBOX, Quat, Scene, Texture, Vec3 } from 'playcanvas';
 
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
@@ -18,56 +18,90 @@ class SkyElement extends AsyncElement {
 
     private _level = 0;
 
+    private _lighting = false;
+
     private _scale = new Vec3(100, 100, 100);
 
     private _type: 'box' | 'dome' | 'infinite' | 'none' = 'infinite';
 
-    async connectedCallback() {
-        await this.closestApp?.ready();
-
-        this.asset = this.getAttribute('asset') || '';
+    private _scene: Scene | null = null;
 
+    connectedCallback() {
+        this._loadSkybox();
         this._onReady();
     }
 
-    getScene() {
-        const app = this.closestApp!.app;
+    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;
+    }
+
+    private async _loadSkybox() {
+        const appElement = await this.closestApp?.ready();
+        const app = appElement?.app;
         if (!app) {
             return;
         }
-        return app.scene;
-    }
 
-    private initSkybox(source: Texture) {
-        source.anisotropy = 4;
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return;
+        }
 
-        const skybox = EnvLighting.generateSkyboxCubemap(source);
-        const lighting = EnvLighting.generateLightingSource(source);
-        const envAtlas = EnvLighting.generateAtlas(lighting);
-        const app = this.closestApp!.app;
-        if (app) {
-            app.scene.envAtlas = envAtlas;
-            app.scene.skybox = skybox;
-
-            const layer = app.scene.layers.getLayerById(LAYERID_SKYBOX);
-            if (layer) {
-                layer.enabled = this._type !== 'none';
-            }
+        this._scene = app.scene;
 
-            app.scene.sky.type = this._type;
-            app.scene.sky.node.setLocalScale(this._scale);
-            app.scene.sky.center = this._center;
+        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;
+    }
+
     set asset(value: string) {
         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();
         }
     }
 
@@ -77,9 +111,8 @@ class SkyElement extends AsyncElement {
 
     set center(value: Vec3) {
         this._center = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.sky.center = this._center;
+        if (this._scene) {
+            this._scene.sky.center = this._center;
         }
     }
 
@@ -89,9 +122,8 @@ class SkyElement extends AsyncElement {
 
     set intensity(value: number) {
         this._intensity = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.skyboxIntensity = this._intensity;
+        if (this._scene) {
+            this._scene.skyboxIntensity = this._intensity;
         }
     }
 
@@ -99,11 +131,29 @@ class SkyElement extends AsyncElement {
         return this._intensity;
     }
 
+    set level(value: number) {
+        this._level = value;
+        if (this._scene) {
+            this._scene.skyboxMip = this._level;
+        }
+    }
+
+    get level() {
+        return this._level;
+    }
+
+    set lighting(value: boolean) {
+        this._lighting = value;
+    }
+
+    get lighting() {
+        return this._lighting;
+    }
+
     set rotation(value: Vec3) {
         this._rotation = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.skyboxRotation = new Quat().setFromEulerAngles(value);
+        if (this._scene) {
+            this._scene.skyboxRotation = new Quat().setFromEulerAngles(value);
         }
     }
 
@@ -113,9 +163,8 @@ class SkyElement extends AsyncElement {
 
     set scale(value: Vec3) {
         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);
         }
     }
 
@@ -123,24 +172,11 @@ class SkyElement extends AsyncElement {
         return this._scale;
     }
 
-    set level(value: number) {
-        this._level = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.skyboxMip = this._level;
-        }
-    }
-
-    get level() {
-        return this._level;
-    }
-
     set type(value: 'box' | 'dome' | 'infinite' | 'none') {
         this._type = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.sky.type = this._type;
-            const layer = scene.layers.getLayerById(LAYERID_SKYBOX);
+        if (this._scene) {
+            this._scene.sky.type = this._type;
+            const layer = this._scene.layers.getLayerById(LAYERID_SKYBOX);
             if (layer) {
                 layer.enabled = this._type !== 'none';
             }
@@ -152,7 +188,7 @@ class SkyElement extends AsyncElement {
     }
 
     static get observedAttributes() {
-        return ['asset', 'center', 'intensity', 'level', 'rotation', 'scale', 'type'];
+        return ['asset', 'center', 'intensity', 'level', 'lighting', 'rotation', 'scale', 'type'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -166,12 +202,15 @@ class SkyElement extends AsyncElement {
             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;

package/src/utils.ts

@@ -1,5 +1,7 @@
 import { Color, Quat, Vec2, Vec3, Vec4 } from 'playcanvas';
 
+import { CSS_COLORS } from './colors';
+
 /**
  * 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.
@@ -8,11 +10,17 @@ import { Color, Quat, Vec2, Vec3, Vec4 } from 'playcanvas';
  * @returns The parsed Color object.
  */
 export const parseColor = (value: string): Color => {
+    // Check if it's a CSS color name first
+    const hexColor = CSS_COLORS[value.toLowerCase()];
+    if (hexColor) {
+        return new Color().fromString(hexColor);
+    }
+
     if (value.startsWith('#')) {
         return new Color().fromString(value);
     }
 
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Color(components);
 };
 
@@ -23,7 +31,7 @@ export const parseColor = (value: string): Color => {
  * @returns The parsed Quat object.
  */
 export const parseQuat = (value: string): Quat => {
-    const [x, y, z] = value.split(',').map(Number);
+    const [x, y, z] = value.split(' ').map(Number);
     const q = new Quat();
     q.setFromEulerAngles(x, y, z);
     return q;
@@ -36,7 +44,7 @@ export const parseQuat = (value: string): Quat => {
  * @returns The parsed Vec2 object.
  */
 export const parseVec2 = (value: string): Vec2 => {
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Vec2(components);
 };
 
@@ -47,7 +55,7 @@ export const parseVec2 = (value: string): Vec2 => {
  * @returns The parsed Vec3 object.
  */
 export const parseVec3 = (value: string): Vec3 => {
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Vec3(components);
 };
 
@@ -58,6 +66,6 @@ export const parseVec3 = (value: string): Vec3 => {
  * @returns The parsed Vec4 object.
  */
 export const parseVec4 = (value: string): Vec4 => {
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Vec4(components);
 };