@playcanvas/web-components 0.1.2 → 0.1.3

package/src/material.ts

@@ -0,0 +1,138 @@
+import { Color, StandardMaterial } from 'playcanvas';
+
+import { AssetElement } from './asset';
+import { parseColor } from './utils';
+
+/**
+ * Represents a material in the PlayCanvas engine.
+ */
+class MaterialElement extends HTMLElement {
+    private _diffuse = new Color(1, 1, 1);
+
+    private _diffuseMap = '';
+
+    private _metalnessMap = '';
+
+    private _normalMap = '';
+
+    private _roughnessMap = '';
+
+    material: StandardMaterial | null = null;
+
+    createMaterial() {
+        this.material = new StandardMaterial();
+        this.material.glossInvert = true;
+        this.material.useMetalness = true;
+        this.material.diffuse = this._diffuse;
+        this.diffuseMap = this._diffuseMap;
+        this.metalnessMap = this._metalnessMap;
+        this.normalMap = this._normalMap;
+        this.roughnessMap = this._roughnessMap;
+        this.material.update();
+    }
+
+    disconnectedCallback() {
+        if (this.material) {
+            this.material.destroy();
+            this.material = null;
+        }
+    }
+
+    setMap(map: string, property: 'diffuseMap' | 'metalnessMap' | 'normalMap' | 'glossMap') {
+        if (this.material) {
+            const asset = AssetElement.get(map);
+            if (asset) {
+                if (asset.loaded) {
+                    this.material[property] = asset.resource;
+                    this.material[property]!.anisotropy = 4;
+                } else {
+                    asset.once('load', () => {
+                        this.material![property] = asset.resource;
+                        this.material![property]!.anisotropy = 4;
+                        this.material!.update();
+                    });
+                }
+            }
+        }
+    }
+
+    set diffuse(value: Color) {
+        this._diffuse = value;
+        if (this.material) {
+            this.material.diffuse = value;
+        }
+    }
+
+    get diffuse(): Color {
+        return this._diffuse;
+    }
+
+    set diffuseMap(value: string) {
+        this._diffuseMap = value;
+        this.setMap(value, 'diffuseMap');
+    }
+
+    get diffuseMap() {
+        return this._diffuseMap;
+    }
+
+    set metalnessMap(value: string) {
+        this._metalnessMap = value;
+        this.setMap(value, 'metalnessMap');
+    }
+
+    get metalnessMap() {
+        return this._metalnessMap;
+    }
+
+    set normalMap(value: string) {
+        this._normalMap = value;
+        this.setMap(value, 'normalMap');
+    }
+
+    get normalMap() {
+        return this._normalMap;
+    }
+
+    set roughnessMap(value: string) {
+        this._roughnessMap = value;
+        this.setMap(value, 'glossMap');
+    }
+
+    get roughnessMap() {
+        return this._roughnessMap;
+    }
+
+    static get(id: string) {
+        const materialElement = document.querySelector<MaterialElement>(`pc-material[id="${id}"]`);
+        return materialElement?.material;
+    }
+
+    static get observedAttributes() {
+        return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'diffuse':
+                this.diffuse = parseColor(newValue);
+                break;
+            case 'diffuse-map':
+                this.diffuseMap = newValue;
+                break;
+            case 'metalness-map':
+                this.metalnessMap = newValue;
+                break;
+            case 'normal-map':
+                this.normalMap = newValue;
+                break;
+            case 'roughness-map':
+                this.roughnessMap = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-material', MaterialElement);
+
+export { MaterialElement };

package/src/model.ts

@@ -24,13 +24,8 @@ class ModelElement extends HTMLElement {
         }
     }
 
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
-        return assetElement!.asset;
-    }
-
     _loadModel() {
-        const asset = this.getAsset();
+        const asset = AssetElement.get(this._asset);
         if (!asset) {
             return;
         }

package/src/sky.ts

@@ -31,11 +31,6 @@ class SkyElement extends HTMLElement {
         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) {
@@ -52,7 +47,7 @@ class SkyElement extends HTMLElement {
         this._asset = value;
         const scene = this.getScene();
         if (scene) {
-            const asset = this.getAsset();
+            const asset = AssetElement.get(value);
             if (asset) {
                 if (asset.resource) {
                     scene.envAtlas = asset.resource;