@playcanvas/web-components 0.1.7 → 0.1.9

package/src/components/gsplat-component.ts

@@ -4,13 +4,16 @@ import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
 
 /**
- * Represents a gsplat component in the PlayCanvas engine.
+ * The GSplatComponentElement interface provides properties and methods for manipulating
+ * `<pc-splat>` elements. The GSplatComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class GSplatComponentElement extends ComponentElement {
     private _asset: string = '';
 
+    /** @ignore */
     constructor() {
         super('gsplat');
     }

package/src/components/light-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseColor } from '../utils';
 
 /**
- * Represents a light component in the PlayCanvas engine.
+ * The LightComponentElement interface provides properties and methods for manipulating
+ * `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -27,11 +29,11 @@ class LightComponentElement extends ComponentElement {
 
     private _shadowDistance = 16;
 
+    private _shadowResolution = 1024;
+
     private _type = 'directional';
 
-    /**
-     * Creates a new LightComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('light');
     }
@@ -47,6 +49,7 @@ class LightComponentElement extends ComponentElement {
             range: this._range,
             shadowBias: this._shadowBias,
             shadowDistance: this._shadowDistance,
+            shadowResolution: this._shadowResolution,
             type: this._type
         };
     }
@@ -230,6 +233,25 @@ class LightComponentElement extends ComponentElement {
         return this._shadowDistance;
     }
 
+    /**
+     * Sets the shadow resolution of the light.
+     * @param value - The shadow resolution.
+     */
+    set shadowResolution(value: number) {
+        this._shadowResolution = value;
+        if (this.component) {
+            this.component.shadowResolution = value;
+        }
+    }
+
+    /**
+     * Gets the shadow resolution of the light.
+     * @returns The shadow resolution.
+     */
+    get shadowResolution() {
+        return this._shadowResolution;
+    }
+
     /**
      * Sets the type of the light.
      * @param value - The type.
@@ -266,6 +288,7 @@ class LightComponentElement extends ComponentElement {
             'range',
             'shadow-bias',
             'shadow-distance',
+            'shadow-resolution',
             'type'
         ];
     }
@@ -301,6 +324,9 @@ class LightComponentElement extends ComponentElement {
             case 'shadow-distance':
                 this.shadowDistance = Number(newValue);
                 break;
+            case 'shadow-resolution':
+                this.shadowResolution = Number(newValue);
+                break;
             case 'type':
                 this.type = newValue;
                 break;

package/src/components/listener-component.ts

@@ -3,11 +3,14 @@ import { AudioListenerComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 
 /**
- * Represents a audio listener component in the PlayCanvas engine.
+ * The ListenerComponentElement interface provides properties and methods for manipulating
+ * `<pc-listener>` elements. The ListenerComponentElement interface also inherits the properties
+ * and methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ListenerComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('audiolistener');
     }

package/src/components/render-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
 
 /**
- * Represents a render component in the PlayCanvas engine.
+ * The RenderComponentElement interface provides properties and methods for manipulating
+ * `<pc-render>` elements. The RenderComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -17,6 +19,7 @@ class RenderComponentElement extends ComponentElement {
 
     private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
 
+    /** @ignore */
     constructor() {
         super('render');
     }

package/src/components/rigidbody-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseVec3 } from '../utils';
 
 /**
- * Represents a rigidbody component in the PlayCanvas engine.
+ * The RigidBodyComponentElement interface provides properties and methods for manipulating
+ * `<pc-rigidbody>` elements. The RigidBodyComponentElement interface also inherits the properties
+ * and methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -54,9 +56,7 @@ class RigidBodyComponentElement extends ComponentElement {
      */
     private _type: string = 'static';
 
-    /**
-     * Creates a new RigidBodyComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('rigidbody');
     }

package/src/components/screen-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseVec2 } from '../utils';
 
 /**
- * Represents a screen component in the PlayCanvas engine.
+ * The ScreenComponentElement interface provides properties and methods for manipulating
+ * `<pc-screen>` elements. The ScreenComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -21,6 +23,7 @@ class ScreenComponentElement extends ComponentElement {
 
     private _scaleBlend = 0.5;
 
+    /** @ignore */
     constructor() {
         super('screen');
     }

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();
@@ -25,13 +26,16 @@ declare global {
 }
 
 /**
- * Represents a script component in the PlayCanvas engine.
+ * The ScriptComponentElement interface provides properties and methods for manipulating
+ * `<pc-scripts>` elements. The ScriptComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ScriptComponentElement extends ComponentElement {
     private observer: MutationObserver;
 
+    /** @ignore */
     constructor() {
         super('script');
 
@@ -62,6 +66,16 @@ class ScriptComponentElement extends ComponentElement {
             const attributesObject = attributes ? JSON.parse(attributes) : {};
 
             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;
+                    }
+                }
+
                 // Handle vectors
                 if (Array.isArray(value)) {
                     if (target[key] instanceof Vec2) {

package/src/components/script.ts

@@ -1,5 +1,7 @@
 /**
- * Represents a script in the PlayCanvas engine.
+ * The ScriptElement interface provides properties and methods for manipulating
+ * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class ScriptElement extends HTMLElement {
     private _attributes: string = '{}';

package/src/components/sound-component.ts

@@ -3,7 +3,9 @@ import { SoundComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 
 /**
- * Represents a sound component in the PlayCanvas engine.
+ * The SoundComponentElement interface provides properties and methods for manipulating
+ * `<pc-sounds>` elements. The SoundComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -22,6 +24,7 @@ class SoundComponentElement extends ComponentElement {
 
     private _volume: number = 1;
 
+    /** @ignore */
     constructor() {
         super('sound');
     }

package/src/components/sound-slot.ts

@@ -5,7 +5,9 @@ import { AsyncElement } from '../async-element';
 import { SoundComponentElement } from './sound-component';
 
 /**
- * Represents a sound slot in the PlayCanvas engine.
+ * The SoundSlotElement interface provides properties and methods for manipulating
+ * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
+ * methods of the {@link AsyncElement} interface.
  */
 class SoundSlotElement extends AsyncElement {
     private _asset: string = '';

package/src/entity.ts

@@ -1,10 +1,12 @@
-import { Entity, Vec3 } from 'playcanvas';
+import { Application, Entity, Vec3 } from 'playcanvas';
 
 import { AsyncElement } from './async-element';
 import { parseVec3 } from './utils';
 
 /**
- * Represents an entity in the PlayCanvas engine.
+ * The EntityElement interface provides properties and methods for manipulating
+ * `<pc-entity>` elements. The EntityElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class EntityElement extends AsyncElement {
     /**
@@ -42,40 +44,69 @@ class EntityElement extends AsyncElement {
      */
     entity: Entity | null = null;
 
-    async connectedCallback() {
-        const closestApp = this.closestApp;
-        if (!closestApp) return;
+    createEntity(app: Application) {
+        // Create a new entity
+        this.entity = new Entity(this.getAttribute('name') || this._name, app);
 
-        // Wait for the app to complete initialization
-        await closestApp.ready();
+        const enabled = this.getAttribute('enabled');
+        if (enabled) {
+            this.entity.enabled = enabled !== 'false';
+        }
 
-        const app = closestApp.app!;
+        const position = this.getAttribute('position');
+        if (position) {
+            this.entity.setLocalPosition(parseVec3(position));
+        }
 
-        // Create a new entity
-        this.entity = new Entity(this._name, app);
+        const rotation = this.getAttribute('rotation');
+        if (rotation) {
+            this.entity.setLocalEulerAngles(parseVec3(rotation));
+        }
+
+        const scale = this.getAttribute('scale');
+        if (scale) {
+            this.entity.setLocalScale(parseVec3(scale));
+        }
 
-        // Initialize from attributes
-        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');
+        const tags = this.getAttribute('tags');
+        if (tags) {
+            this.entity.tags.add(tags.split(',').map(tag => tag.trim()));
+        }
+    }
 
-        if (nameAttr) this.name = nameAttr;
-        if (positionAttr) this.position = parseVec3(positionAttr);
-        if (rotationAttr) this.rotation = parseVec3(rotationAttr);
-        if (scaleAttr) this.scale = parseVec3(scaleAttr);
-        if (tagsAttr) this.tags = tagsAttr.split(',').map(tag => tag.trim());
+    buildHierarchy(app: Application) {
+        if (!this.entity) return;
 
         const closestEntity = this.closestEntity;
-        if (closestEntity) {
-            closestEntity.ready().then(() => {
-                closestEntity.entity!.addChild(this.entity!);
-                this._onReady();
-            });
+        if (closestEntity?.entity) {
+            closestEntity.entity.addChild(this.entity);
         } else {
             app.root.addChild(this.entity);
-            this._onReady();
+        }
+
+        this._onReady();
+    }
+
+    connectedCallback() {
+        // Wait for app to be ready
+        const closestApp = this.closestApp;
+        if (!closestApp) return;
+
+        // If app is already running, create entity immediately
+        if (closestApp.hierarchyReady) {
+            const app = closestApp.app!;
+
+            this.createEntity(app);
+            this.buildHierarchy(app);
+
+            // Handle any child entities that might exist
+            const childEntities = this.querySelectorAll<EntityElement>('pc-entity');
+            childEntities.forEach((child) => {
+                child.createEntity(app);
+            });
+            childEntities.forEach((child) => {
+                child.buildHierarchy(app);
+            });
         }
     }
 
@@ -87,6 +118,7 @@ class EntityElement extends AsyncElement {
                 (child as EntityElement).entity = null;
             });
 
+            // Destroy the entity
             this.entity.destroy();
             this.entity = null;
         }

package/src/material.ts

@@ -4,7 +4,9 @@ import { AssetElement } from './asset';
 import { parseColor } from './utils';
 
 /**
- * Represents a material in the PlayCanvas engine.
+ * The MaterialElement interface provides properties and methods for manipulating
+ * `<pc-material>` elements. The MaterialElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class MaterialElement extends HTMLElement {
     private _diffuse = new Color(1, 1, 1);

package/src/model.ts

@@ -4,7 +4,9 @@ import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 
 /**
- * Represents a model in the PlayCanvas engine.
+ * The ModelElement interface provides properties and methods for manipulating
+ * `<pc-model>` elements. The ModelElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class ModelElement extends AsyncElement {
     private _asset: string = '';

package/src/module.ts

@@ -1,8 +1,14 @@
 import { basisInitialize, WasmModule } from 'playcanvas';
 
+/**
+ * The ModuleElement interface provides properties and methods for manipulating
+ * `<pc-module>` elements. The ModuleElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
+ */
 class ModuleElement extends HTMLElement {
     private loadPromise: Promise<void>;
 
+    /** @ignore */
     constructor() {
         super();
         this.loadPromise = this.loadModule();

package/src/scene.ts

@@ -4,7 +4,9 @@ import { AsyncElement } from './async-element';
 import { parseColor } from './utils';
 
 /**
- * Represents a scene in the PlayCanvas engine.
+ * The SceneElement interface provides properties and methods for manipulating
+ * `<pc-scene>` elements. The SceneElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class SceneElement extends AsyncElement {
     /**
@@ -48,11 +50,11 @@ class SceneElement extends AsyncElement {
 
     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;
+            this.scene.fog.type = this._fog;
+            this.scene.fog.color = this._fogColor;
+            this.scene.fog.density = this._fogDensity;
+            this.scene.fog.start = this._fogStart;
+            this.scene.fog.end = this._fogEnd;
             // ... set other properties on the scene as well
         }
     }
@@ -64,7 +66,7 @@ class SceneElement extends AsyncElement {
     set fog(value) {
         this._fog = value;
         if (this.scene) {
-            this.scene.rendering.fog = value;
+            this.scene.fog.type = value;
         }
     }
 
@@ -83,7 +85,7 @@ class SceneElement extends AsyncElement {
     set fogColor(value: Color) {
         this._fogColor = value;
         if (this.scene) {
-            this.scene.rendering.fogColor = value;
+            this.scene.fog.color = value;
         }
     }
 
@@ -102,7 +104,7 @@ class SceneElement extends AsyncElement {
     set fogDensity(value: number) {
         this._fogDensity = value;
         if (this.scene) {
-            this.scene.rendering.fogDensity = value;
+            this.scene.fog.density = value;
         }
     }
 
@@ -121,7 +123,7 @@ class SceneElement extends AsyncElement {
     set fogStart(value: number) {
         this._fogStart = value;
         if (this.scene) {
-            this.scene.rendering.fogStart = value;
+            this.scene.fog.start = value;
         }
     }
 
@@ -140,7 +142,7 @@ class SceneElement extends AsyncElement {
     set fogEnd(value: number) {
         this._fogEnd = value;
         if (this.scene) {
-            this.scene.rendering.fogEnd = value;
+            this.scene.fog.end = value;
         }
     }
 

package/src/sky.ts

@@ -5,7 +5,9 @@ import { AsyncElement } from './async-element';
 import { parseVec3 } from './utils';
 
 /**
- * Represents a sky in the PlayCanvas engine.
+ * 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 = '';
@@ -39,9 +41,9 @@ class SkyElement extends AsyncElement {
         if (!this._scene) return;
 
         const source = asset.resource as Texture;
-        source.anisotropy = 4;
 
         const skybox = EnvLighting.generateSkyboxCubemap(source);
+        skybox.anisotropy = 4;
         this._scene.skybox = skybox;
 
         if (this._lighting) {
@@ -58,6 +60,7 @@ class SkyElement extends AsyncElement {
         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() {