@playcanvas/web-components 0.1.4 → 0.1.5

package/src/components/element-component.ts

@@ -37,9 +37,7 @@ class ElementComponentElement extends ComponentElement {
         super('element');
     }
 
-    async connectedCallback() {
-        await super.connectedCallback();
-
+    initComponent() {
         this.component!._text._material.useFog = true;
     }
 
@@ -198,7 +196,20 @@ class ElementComponentElement extends ComponentElement {
     }
 
     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: string, _oldValue: string, newValue: string) {

package/src/components/render-component.ts

@@ -21,16 +21,11 @@ class RenderComponentElement extends ComponentElement {
         super('render');
     }
 
-    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
         };
     }

package/src/components/script-component.ts

@@ -42,9 +42,7 @@ class ScriptComponentElement extends ComponentElement {
         this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
     }
 
-    async connectedCallback() {
-        await super.connectedCallback();
-
+    initComponent() {
         // Handle initial script elements
         this.querySelectorAll<ScriptElement>(':scope > pc-script').forEach((scriptElement) => {
             const scriptName = scriptElement.getAttribute('name');

package/src/components/sound-slot.ts

@@ -1,13 +1,13 @@
 import { SoundSlot } from 'playcanvas';
 
-import { AppElement } from '../app';
-import { SoundComponentElement } from './sound-component';
 import { AssetElement } from '../asset';
+import { AsyncElement } from '../async-element';
+import { SoundComponentElement } from './sound-component';
 
 /**
  * Represents a sound slot in the PlayCanvas engine.
  */
-class SoundSlotElement extends HTMLElement {
+class SoundSlotElement extends AsyncElement {
     private _asset: string = '';
 
     private _autoPlay: boolean = false;
@@ -32,13 +32,7 @@ class SoundSlotElement extends HTMLElement {
     soundSlot: SoundSlot | null = null;
 
     async connectedCallback() {
-        const appElement = this.closest('pc-app') as AppElement | null;
-        if (!appElement) {
-            console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
-            return;
-        }
-
-        await appElement.getApplication();
+        await this.soundElement?.ready();
 
         const options = {
             autoPlay: this._autoPlay,
@@ -51,9 +45,12 @@ class SoundSlotElement extends HTMLElement {
         if (this._duration) {
             options.duration = this._duration;
         }
+
         this.soundSlot = this.soundElement!.component!.addSlot(this._name, options);
         this.asset = this._asset;
         this.soundSlot!.play();
+
+        this._onReady();
     }
 
     disconnectedCallback() {

package/src/entity.ts

@@ -1,12 +1,12 @@
 import { Entity, Vec3 } from 'playcanvas';
 
-import { AppElement } from './app';
+import { AsyncElement } from './async-element';
 import { parseVec3 } from './utils';
 
 /**
  * Represents an entity in the PlayCanvas engine.
  */
-class EntityElement extends HTMLElement {
+class EntityElement extends AsyncElement {
     /**
      * Whether the entity is enabled.
      */
@@ -37,38 +37,22 @@ class EntityElement extends HTMLElement {
      */
     private _tags: string[] = [];
 
-    private _resolveEntity!: (entity: Entity) => void;
-
-    private _entityReady = new Promise<Entity>((resolve) => {
-        this._resolveEntity = resolve;
-    });
-
     /**
      * The PlayCanvas entity instance.
      */
     entity: Entity | 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 closestApp = this.closestApp;
+        if (!closestApp) return;
+
+        // Wait for the app to complete initialization
+        await closestApp.ready();
 
-        const app = await appElement.getApplication();
+        const app = closestApp.app!;
 
         // Create a new entity
         this.entity = new Entity(this._name, app);
-        this._resolveEntity(this.entity);
-
-        if (this.parentElement &&
-            this.parentElement.tagName.toLowerCase() === 'pc-entity') {
-            const parentEntity = await (this.parentElement as EntityElement)._entityReady;
-            parentEntity.addChild(this.entity);
-        } else {
-            app.root.addChild(this.entity);
-        }
 
         // Initialize from attributes
         const nameAttr = this.getAttribute('name');
@@ -82,6 +66,17 @@ class EntityElement extends HTMLElement {
         if (rotationAttr) this.rotation = parseVec3(rotationAttr);
         if (scaleAttr) 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() {
@@ -95,11 +90,6 @@ class EntityElement extends HTMLElement {
             this.entity.destroy();
             this.entity = null;
         }
-
-        // Reset the promise for potential reconnection
-        this._entityReady = new Promise<Entity>((resolve) => {
-            this._resolveEntity = resolve;
-        });
     }
 
     /**

package/src/index.ts

@@ -1,6 +1,16 @@
+/**
+ * The Engine Web Components module provides a set of Web Components for the PlayCanvas Engine.
+ * While these components are normally instantiated in a declarative fashion using HTML, this
+ * reference covers the TypeScript/JavaScript API that allows these components to be created
+ * programmatically.
+ *
+ * @module EngineWebComponents
+ */
+
 /* eslint-disable import/order */
 
 // Note that order matters here (e.g. pc-entity must be defined before components)
+import { AsyncElement } from './async-element';
 import { ModuleElement } from './module';
 import { AppElement } from './app';
 import { EntityElement } from './entity';
@@ -25,6 +35,7 @@ import { SceneElement } from './scene';
 import { SkyElement } from './sky';
 
 export {
+    AsyncElement,
     ModuleElement,
     AppElement,
     EntityElement,

package/src/model.ts

@@ -1,27 +1,21 @@
-import { AppElement } from './app';
 import { AssetElement } from './asset';
-import { EntityElement } from './entity';
+import { AsyncElement } from './async-element';
 
 /**
  * Represents a model in the PlayCanvas engine.
  */
-class ModelElement extends HTMLElement {
+class ModelElement extends AsyncElement {
     private _asset: string = '';
 
     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();
+        await this.closestApp?.ready();
 
         const asset = this.getAttribute('asset');
         if (asset) {
             this.asset = asset;
         }
+
+        this._onReady();
     }
 
     _loadModel() {
@@ -31,12 +25,23 @@ class ModelElement extends HTMLElement {
         }
         const entity = asset.resource.instantiateRenderEntity();
 
-        const parentEntityElement = this.closest('pc-entity') as EntityElement | null;
+        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') as AppElement;
-            appElement.app!.root.addChild(entity);
+            const appElement = this.closestApp;
+            if (appElement) {
+                appElement.ready().then(() => {
+                    appElement.app!.root.addChild(entity);
+                });
+            }
         }
     }
 

package/src/scene.ts

@@ -1,12 +1,12 @@
 import { Color, Scene } from 'playcanvas';
 
-import { AppElement } from './app';
+import { AsyncElement } from './async-element';
 import { parseColor } from './utils';
 
 /**
  * Represents a scene in the PlayCanvas engine.
  */
-class SceneElement extends HTMLElement {
+class SceneElement extends AsyncElement {
     /**
      * The fog type of the scene.
      */
@@ -38,17 +38,12 @@ class SceneElement extends HTMLElement {
     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();
+        await this.closestApp?.ready();
 
-        this.scene = app.scene;
+        this.scene = this.closestApp!.app!.scene;
         this.updateSceneSettings();
+
+        this._onReady();
     }
 
     updateSceneSettings() {

package/src/sky.ts

@@ -1,61 +1,72 @@
-import { LAYERID_SKYBOX, Quat } from 'playcanvas';
+import { EnvLighting, LAYERID_SKYBOX, Quat, Texture, Vec3 } from 'playcanvas';
 
-import { AppElement } from './app';
 import { AssetElement } from './asset';
+import { AsyncElement } from './async-element';
+import { parseVec3 } from './utils';
 
 /**
  * Represents a sky in the PlayCanvas engine.
  */
-class SkyElement extends HTMLElement {
+class SkyElement extends AsyncElement {
     private _asset = '';
 
+    private _center = new Vec3(0, 0.01, 0);
+
     private _intensity = 1;
 
-    private _rotation = [0, 0, 0];
+    private _rotation = new Vec3();
 
     private _level = 0;
 
-    private _solidColor = false;
+    private _scale = new Vec3(100, 100, 100);
 
-    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;
-        }
+    private _type: 'box' | 'dome' | 'infinite' | 'none' = 'infinite';
 
-        await appElement.getApplication();
+    async connectedCallback() {
+        await this.closestApp?.ready();
 
         this.asset = this.getAttribute('asset') || '';
-        this.solidColor = this.hasAttribute('solid-color');
+
+        this._onReady();
     }
 
     getScene() {
-        const appElement = this.closest('pc-app') as AppElement | null;
-        if (!appElement) {
-            return;
-        }
-        const app = appElement.app;
+        const app = this.closestApp!.app;
         if (!app) {
             return;
         }
         return app.scene;
     }
 
+    private initSkybox(source: Texture) {
+        source.anisotropy = 4;
+
+        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';
+            }
+
+            app.scene.sky.type = this._type;
+            app.scene.sky.node.setLocalScale(this._scale);
+            app.scene.sky.center = this._center;
+        }
+    }
+
     set asset(value: string) {
         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);
             }
         }
     }
@@ -64,6 +75,18 @@ class SkyElement extends HTMLElement {
         return this._asset;
     }
 
+    set center(value: Vec3) {
+        this._center = value;
+        const scene = this.getScene();
+        if (scene) {
+            scene.sky.center = this._center;
+        }
+    }
+
+    get center() {
+        return this._center;
+    }
+
     set intensity(value: number) {
         this._intensity = value;
         const scene = this.getScene();
@@ -76,11 +99,11 @@ class SkyElement extends HTMLElement {
         return this._intensity;
     }
 
-    set rotation(value: number[]) {
+    set rotation(value: Vec3) {
         this._rotation = value;
         const scene = this.getScene();
         if (scene) {
-            scene.skyboxRotation = new Quat().setFromEulerAngles(this._rotation[0], this._rotation[1], this._rotation[2]);
+            scene.skyboxRotation = new Quat().setFromEulerAngles(value);
         }
     }
 
@@ -88,19 +111,16 @@ class SkyElement extends HTMLElement {
         return this._rotation;
     }
 
-    set solidColor(value: boolean) {
-        this._solidColor = value;
+    set scale(value: Vec3) {
+        this._scale = value;
         const scene = this.getScene();
         if (scene) {
-            const layer = scene.layers.getLayerById(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: number) {
@@ -115,8 +135,24 @@ class SkyElement extends HTMLElement {
         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 (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: string, _oldValue: string, newValue: string) {
@@ -124,17 +160,23 @@ class SkyElement extends HTMLElement {
             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 as 'box' | 'dome' | 'infinite' | 'none';
                 break;
         }
     }