@playcanvas/web-components 0.10.0 → 0.11.0

package/src/asset.ts

@@ -99,6 +99,13 @@ const processBufferView = (
  * @attribute {number} pixels-per-unit - For a `sprite` asset, the number of pixels per world unit.
  * @attribute {'simple' | 'sliced' | 'tiled'} render-mode - For a `sprite` asset, how the sprite is
  * rendered when resized.
+ *
+ * @fires {Event} load - Fired each time the asset finishes loading, including a `lazy` asset
+ * loaded later and any subsequent reloads. Does not bubble — listen on this element, or use a
+ * capture-phase listener on an ancestor to observe every asset.
+ * @fires {ErrorEvent} error - Fired when the asset fails to load, with the engine's error in
+ * `message`. Does not bubble. The element still becomes ready — readiness means the load settled,
+ * not that it succeeded.
  */
 class AssetElement extends AsyncElement {
     private _lazy: boolean = false;
@@ -149,6 +156,16 @@ class AssetElement extends AsyncElement {
         this.destroyAsset();
     }
 
+    private _onAssetLoad() {
+        this.dispatchEvent(new Event('load'));
+    }
+
+    private _onAssetError(err: string | Error) {
+        this.dispatchEvent(new ErrorEvent('error', {
+            message: err instanceof Error ? err.message : String(err)
+        }));
+    }
+
     createAsset() {
         const id = this.getAttribute('id') || '';
         const src = this.getAttribute('src') || '';
@@ -186,6 +203,11 @@ class AssetElement extends AsyncElement {
         }
 
         this.asset.preload = !this._lazy;
+
+        // Forward the engine asset's load outcome as DOM events on this element, like <img>.
+        // Attached before the asset joins the registry, which is what starts a preloaded load.
+        this.asset.on('load', this._onAssetLoad, this);
+        this.asset.on('error', this._onAssetError, this);
     }
 
     /**
@@ -249,6 +271,9 @@ class AssetElement extends AsyncElement {
 
     destroyAsset() {
         if (this.asset) {
+            // A caller that keeps the Asset alive must not dispatch on a removed element
+            this.asset.off('load', this._onAssetLoad, this);
+            this.asset.off('error', this._onAssetError, this);
             // Deregister first so unload() can still notify the registry
             this.asset.registry?.remove(this.asset);
             this.asset.unload();

package/src/async-element.ts

@@ -20,12 +20,22 @@ class AsyncElement extends HTMLElement {
         });
     }
 
-    get closestApp(): AppElement {
-        return this.parentElement?.closest('pc-app') as AppElement;
+    /**
+     * The nearest ancestor `<pc-app>` element, or `null` if this element has no `<pc-app>`
+     * ancestor. The search starts at the parent, so an element never resolves to itself.
+     * @returns The closest app element, or `null`.
+     */
+    get closestApp(): AppElement | null {
+        return this.parentElement?.closest('pc-app') as AppElement | null ?? null;
     }
 
-    get closestEntity(): EntityElement {
-        return this.parentElement?.closest('pc-entity') as EntityElement;
+    /**
+     * The nearest ancestor `<pc-entity>` element, or `null` if this element has no `<pc-entity>`
+     * ancestor. The search starts at the parent, so an element never resolves to itself.
+     * @returns The closest entity element, or `null`.
+     */
+    get closestEntity(): EntityElement | null {
+        return this.parentElement?.closest('pc-entity') as EntityElement | null ?? null;
     }
 
     /**

package/src/components/camera-component.ts

@@ -3,6 +3,11 @@ import { CameraComponent, Color, Vec4, GAMMA_NONE, GAMMA_SRGB, PROJECTION_ORTHOG
 import { ComponentElement } from './component';
 import { parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../parse';
 
+const projections = new Map<'perspective' | 'orthographic', number>([
+    ['perspective', PROJECTION_PERSPECTIVE],
+    ['orthographic', PROJECTION_ORTHOGRAPHIC]
+]);
+
 const tonemaps = new Map<'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral', number>([
     ['none', TONEMAP_NONE],
     ['linear', TONEMAP_LINEAR],
@@ -46,7 +51,7 @@ class CameraComponentElement extends ComponentElement {
 
     private _nearClip = 0.1;
 
-    private _orthographic = false;
+    private _projection: 'perspective' | 'orthographic' = 'perspective';
 
     private _orthoHeight = 10;
 
@@ -77,12 +82,12 @@ class CameraComponentElement extends ComponentElement {
             gammaCorrection: this._gamma === 'srgb' ? GAMMA_SRGB : GAMMA_NONE,
             horizontalFov: this._horizontalFov,
             nearClip: this._nearClip,
-            projection: this._orthographic ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE,
+            projection: projections.get(this._projection) ?? PROJECTION_PERSPECTIVE,
             orthoHeight: this._orthoHeight,
             priority: this._priority,
             rect: this._rect,
             scissorRect: this._scissorRect,
-            toneMapping: tonemaps.get(this._tonemap)
+            toneMapping: tonemaps.get(this._tonemap) ?? TONEMAP_NONE
         };
     }
 
@@ -352,25 +357,6 @@ class CameraComponentElement extends ComponentElement {
         return this._nearClip;
     }
 
-    /**
-     * Sets the orthographic projection of the camera.
-     * @param value - The orthographic projection.
-     */
-    set orthographic(value) {
-        this._orthographic = value;
-        if (this.component) {
-            this.component.projection = value ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE;
-        }
-    }
-
-    /**
-     * Gets the orthographic projection of the camera.
-     * @returns The orthographic projection.
-     */
-    get orthographic(): boolean {
-        return this._orthographic;
-    }
-
     /**
      * Sets the orthographic height of the camera.
      * @param value - The orthographic height.
@@ -409,6 +395,25 @@ class CameraComponentElement extends ComponentElement {
         return this._priority;
     }
 
+    /**
+     * Sets the projection of the camera. Use `orthoHeight` to size an orthographic projection.
+     * @param value - The projection ('perspective' or 'orthographic').
+     */
+    set projection(value: 'perspective' | 'orthographic') {
+        this._projection = value;
+        if (this.component) {
+            this.component.projection = projections.get(value) ?? PROJECTION_PERSPECTIVE;
+        }
+    }
+
+    /**
+     * Gets the projection of the camera.
+     * @returns The projection.
+     */
+    get projection() {
+        return this._projection;
+    }
+
     /**
      * Sets the rect of the camera.
      * @param value - The rect.
@@ -481,9 +486,9 @@ class CameraComponentElement extends ComponentElement {
             'gamma',
             'horizontal-fov',
             'near-clip',
-            'orthographic',
             'ortho-height',
             'priority',
+            'projection',
             'rect',
             'scissor-rect',
             'tonemap'
@@ -530,15 +535,15 @@ class CameraComponentElement extends ComponentElement {
             case 'near-clip':
                 this.nearClip = parseNumber(newValue, 0.1, name);
                 break;
-            case 'orthographic':
-                this.orthographic = parseBool(newValue, false);
-                break;
             case 'ortho-height':
                 this.orthoHeight = parseNumber(newValue, 10, name);
                 break;
             case 'priority':
                 this.priority = parseNumber(newValue, 0, name);
                 break;
+            case 'projection':
+                this.projection = parseEnum(newValue, projections, 'perspective', name);
+                break;
             case 'rect':
                 this.rect = parseVec4(newValue, new Vec4(0, 0, 1, 1), name);
                 break;

package/src/components/component.ts

@@ -73,12 +73,13 @@ class ComponentElement extends AsyncElement {
     }
 
     /**
-     * The PlayCanvas component instance. Available once the element is ready — await
-     * {@link whenReady} or the element's `ready()` promise before accessing it.
-     * @returns The component instance.
+     * The PlayCanvas component instance. `null` until the element is ready, and also for an
+     * element that is not a descendant of a `<pc-entity>` — await {@link whenReady} or the
+     * element's `ready()` promise before accessing it.
+     * @returns The component instance, or `null`.
      */
-    get component(): Component {
-        return this._component!;
+    get component(): Component | null {
+        return this._component;
     }
 
     /**

package/src/components/screen-component.ts

@@ -1,7 +1,16 @@
 import { SCALEMODE_BLEND, SCALEMODE_NONE, ScreenComponent, Vec2 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseNumber, parseVec2 } from '../parse';
+import { parseBool, parseEnum, parseNumber, parseVec2 } from '../parse';
+
+// The engine's SCALEMODE_* constants are the strings 'none' and 'blend', so this map happens to be
+// an identity. It is still the right shape: it supplies parseEnum's valid-name list, it is what the
+// manifest generator reads the enum values from, and it keeps the attribute vocabulary independent
+// of constants the engine is free to change.
+const scaleModes = new Map<'none' | 'blend', string>([
+    ['none', SCALEMODE_NONE],
+    ['blend', SCALEMODE_BLEND]
+]);
 
 /**
  * The ScreenComponentElement interface provides properties and methods for manipulating
@@ -20,7 +29,7 @@ class ScreenComponentElement extends ComponentElement {
 
     private _priority = 0;
 
-    private _blend = false;
+    private _scaleMode: 'none' | 'blend' = 'none';
 
     private _scaleBlend = 0.5;
 
@@ -35,7 +44,7 @@ class ScreenComponentElement extends ComponentElement {
             referenceResolution: this._referenceResolution,
             resolution: this._resolution,
             scaleBlend: this._scaleBlend,
-            scaleMode: this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE,
+            scaleMode: scaleModes.get(this._scaleMode) ?? SCALEMODE_NONE,
             screenSpace: this._screenSpace
         };
     }
@@ -81,6 +90,12 @@ class ScreenComponentElement extends ComponentElement {
         return this._resolution;
     }
 
+    /**
+     * Sets how the screen's `resolution` and `referenceResolution` are weighted against each other
+     * when `scaleMode` is `blend`, from 0 (follow the resolution) to 1 (follow the reference
+     * resolution). Ignored while `scaleMode` is `none`.
+     * @param value - The scale blend factor.
+     */
     set scaleBlend(value: number) {
         this._scaleBlend = value;
         if (this.component) {
@@ -88,19 +103,34 @@ class ScreenComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets how the screen's resolutions are weighted against each other.
+     * @returns The scale blend factor.
+     */
     get scaleBlend() {
         return this._scaleBlend;
     }
 
-    set blend(value: boolean) {
-        this._blend = value;
+    /**
+     * Sets how the screen scales its contents. `none` renders at `resolution` and ignores
+     * `referenceResolution`; `blend` scales between the two, weighted by `scaleBlend`, which is what
+     * keeps a UI laid out at one resolution usable at another. Requires `screenSpace` - the engine
+     * forces `none` on a world-space screen, which does not support scaling.
+     * @param value - The scale mode ('none' or 'blend').
+     */
+    set scaleMode(value: 'none' | 'blend') {
+        this._scaleMode = value;
         if (this.component) {
-            this.component.scaleMode = this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE;
+            this.component.scaleMode = scaleModes.get(value) ?? SCALEMODE_NONE;
         }
     }
 
-    get blend() {
-        return this._blend;
+    /**
+     * Gets how the screen scales its contents.
+     * @returns The scale mode.
+     */
+    get scaleMode() {
+        return this._scaleMode;
     }
 
     set screenSpace(value: boolean) {
@@ -117,12 +147,12 @@ class ScreenComponentElement extends ComponentElement {
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
-            'blend',
             'screen-space',
             'resolution',
             'reference-resolution',
             'priority',
-            'scale-blend'
+            'scale-blend',
+            'scale-mode'
         ];
     }
 
@@ -142,8 +172,8 @@ class ScreenComponentElement extends ComponentElement {
             case 'scale-blend':
                 this.scaleBlend = parseNumber(newValue, 0.5, name);
                 break;
-            case 'blend':
-                this.blend = parseBool(newValue, false);
+            case 'scale-mode':
+                this.scaleMode = parseEnum(newValue, scaleModes, 'none', name);
                 break;
             case 'screen-space':
                 this.screenSpace = parseBool(newValue, false);

package/src/components/scrollview-component.ts

@@ -99,7 +99,8 @@ class ScrollViewComponentElement extends ComponentElement {
     }
 
     /**
-     * Sets whether horizontal scrolling is enabled.
+     * Sets whether scrolling along the horizontal axis is enabled. This is a toggle, unlike the
+     * `orientation` of a `<pc-scrollbar>`, for which `horizontal` is one of the accepted values.
      * @param value - Whether horizontal scrolling is enabled.
      */
     set horizontal(value: boolean) {
@@ -110,7 +111,7 @@ class ScrollViewComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets whether horizontal scrolling is enabled.
+     * Gets whether scrolling along the horizontal axis is enabled.
      * @returns Whether horizontal scrolling is enabled.
      */
     get horizontal() {
@@ -118,7 +119,8 @@ class ScrollViewComponentElement extends ComponentElement {
     }
 
     /**
-     * Sets whether vertical scrolling is enabled.
+     * Sets whether scrolling along the vertical axis is enabled. This is a toggle, unlike the
+     * `orientation` of a `<pc-scrollbar>`, for which `vertical` is one of the accepted values.
      * @param value - Whether vertical scrolling is enabled.
      */
     set vertical(value: boolean) {
@@ -129,7 +131,7 @@ class ScrollViewComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets whether vertical scrolling is enabled.
+     * Gets whether scrolling along the vertical axis is enabled.
      * @returns Whether vertical scrolling is enabled.
      */
     get vertical() {

package/src/entity.ts

@@ -1,5 +1,6 @@
 import { AppBase, Entity, Vec3 } from 'playcanvas';
 
+import type { AppElement } from './app';
 import { AsyncElement } from './async-element';
 import { parseBool, parseTags, parseVec3 } from './parse';
 
@@ -76,12 +77,19 @@ class EntityElement extends AsyncElement {
     private _entity: Entity | null = null;
 
     /**
-     * The PlayCanvas entity instance. Available once the element is ready — await
-     * {@link whenReady} or the element's `ready()` promise before accessing it.
-     * @returns The entity instance.
+     * The application element this entity is registered with, cached at creation time so the
+     * entity can be unregistered even once this element has left the DOM.
      */
-    get entity(): Entity {
-        return this._entity!;
+    private _appElement: AppElement | null = null;
+
+    /**
+     * The PlayCanvas entity instance. `null` until the element is ready, and again once it has
+     * been removed from the document — await {@link whenReady} or the element's `ready()`
+     * promise before accessing it.
+     * @returns The entity instance, or `null`.
+     */
+    get entity(): Entity | null {
+        return this._entity;
     }
 
     createEntity(app: AppBase) {
@@ -92,19 +100,44 @@ class EntityElement extends AsyncElement {
             return;
         }
 
-        // Create a new entity
-        const entity = new Entity(this.getAttribute('name') || this._name, app);
+        // Seed from the cached fields rather than re-reading the attributes. Every observed
+        // attribute is routed through its property setter by attributeChangedCallback, so the field
+        // already holds the parsed attribute value - and it also holds anything assigned through the
+        // property API before the app booted, which reading the attribute back would discard.
+        const entity = new Entity(this._name, app);
         this._entity = entity;
 
-        entity.enabled = parseBool(this.getAttribute('enabled'), true);
-        entity.setLocalPosition(parseVec3(this.getAttribute('position'), Vec3.ZERO, 'position'));
-        entity.setLocalEulerAngles(parseVec3(this.getAttribute('rotation'), Vec3.ZERO, 'rotation'));
-        entity.setLocalScale(parseVec3(this.getAttribute('scale'), Vec3.ONE, 'scale'));
+        entity.enabled = this._enabled;
+        entity.setLocalPosition(this._position);
+        entity.setLocalEulerAngles(this._rotation);
+        entity.setLocalScale(this._scale);
 
-        const tags = parseTags(this.getAttribute('tags'));
-        if (tags.length > 0) {
-            entity.tags.add(tags);
+        if (this._tags.length > 0) {
+            entity.tags.add(this._tags);
         }
+
+        // Register with the owning application, which joins engine nodes back to elements by
+        // identity (never by name), and hook the entity's destruction. The engine fires 'destroy'
+        // for every entity in a destroyed subtree, so the element learns of its entity's death no
+        // matter who causes it: this element, an ancestor, the whole application, or a user
+        // script calling entity.destroy().
+        this._appElement = this.closestApp;
+        this._appElement?._registerEntityElement(entity, this);
+        entity.once('destroy', this._onEntityDestroy, this);
+    }
+
+    /**
+     * Handles the destruction of the backing entity. Resets the element so a later re-insertion
+     * starts clean: `_built` must be cleared alongside `_entity`, or buildHierarchy would bail
+     * and a re-created entity would never be parented.
+     *
+     * @param entity - The entity that was destroyed.
+     */
+    private _onEntityDestroy(entity: Entity) {
+        this._appElement?._unregisterEntityElement(entity);
+        this._appElement = null;
+        this._entity = null;
+        this._built = false;
     }
 
     buildHierarchy(app: AppBase) {
@@ -124,7 +157,15 @@ class EntityElement extends AsyncElement {
     connectedCallback() {
         // Wait for app to be ready
         const closestApp = this.closestApp;
-        if (!closestApp) return;
+        if (!closestApp) {
+            // An entity outside an application is inert and never becomes ready, so awaiting it
+            // hangs. Warn rather than fail silently, naming the parent it requires, as every other
+            // misplaced element does.
+            const name = this.getAttribute('name');
+            const label = name ? ` '${name}'` : '';
+            console.warn(`pc-entity${label} must be a descendant of pc-app - entity not created`);
+            return;
+        }
 
         // If app is already running, create entity immediately
         if (closestApp.hierarchyReady) {
@@ -145,18 +186,11 @@ class EntityElement extends AsyncElement {
     }
 
     disconnectedCallback() {
-        if (this.entity) {
-            // Notify all children that their entities are about to become invalid
-            const children = this.querySelectorAll('pc-entity');
-            children.forEach((child) => {
-                (child as EntityElement)._entity = null;
-            });
-
-            // Destroy the entity
-            this.entity.destroy();
-            this._entity = null;
-            this._built = false;
-        }
+        // Destroying the entity destroys its whole subtree, and the engine fires 'destroy' for
+        // every entity in it - so _onEntityDestroy resets this element AND every descendant
+        // element before the descendants' own disconnectedCallbacks run. Their entities are null
+        // by then, making this call a no-op for them.
+        this._entity?.destroy();
     }
 
     /**

package/src/loading-bar.ts

@@ -0,0 +1,122 @@
+/** Covers the 0.2s opacity transition; jsdom never fires transitionend, so removal is timed. */
+const REMOVAL_DELAY_MS = 250;
+
+/**
+ * The slim progress bar `<pc-app>` shows while it boots and preloads. An implementation detail of
+ * AppElement rather than a custom element, so its shape can change without a breaking change.
+ *
+ * All styling is inline, so the library injects no stylesheet. The colors and height resolve CSS
+ * custom properties — `--pc-loading-bar-color`, `--pc-loading-bar-background` and
+ * `--pc-loading-bar-height` — so a page can theme the bar from `pc-app` or `:root`.
+ */
+class LoadingBar {
+    private _track: HTMLDivElement;
+
+    private _fill: HTMLDivElement;
+
+    private _sweep: Animation | null = null;
+
+    private _removal: ReturnType<typeof setTimeout> | null = null;
+
+    /**
+     * Creates the bar and appends it to `parent`, starting in the indeterminate state.
+     * @param parent - The element to append the bar to.
+     */
+    constructor(parent: HTMLElement) {
+        this._track = document.createElement('div');
+        this._track.setAttribute('role', 'progressbar');
+        this._track.setAttribute('aria-label', 'Loading');
+        this._track.setAttribute('aria-valuemin', '0');
+        this._track.setAttribute('aria-valuemax', '100');
+        // Fixed positioning matches the canvas, which always fills the window (FILLMODE_FILL_WINDOW)
+        this._track.style.cssText = [
+            'position: fixed',
+            'top: 0',
+            'left: 0',
+            'width: 100%',
+            'height: var(--pc-loading-bar-height, 3px)',
+            'background: var(--pc-loading-bar-background, rgba(0, 0, 0, 0.1))',
+            'z-index: 10000',
+            'pointer-events: none',
+            'opacity: 1',
+            'transition: opacity 0.2s ease'
+        ].join('; ');
+
+        this._fill = document.createElement('div');
+        this._fill.style.cssText = [
+            'width: 100%',
+            'height: 100%',
+            'transform-origin: left center',
+            'transform: scaleX(0)',
+            'background: var(--pc-loading-bar-color, #f60)',
+            'transition: transform 0.2s ease'
+        ].join('; ');
+
+        this._track.appendChild(this._fill);
+        parent.appendChild(this._track);
+
+        // Indeterminate sweep until the first progress() call reports a real total. No
+        // aria-valuenow is set, which is what marks a progressbar indeterminate. jsdom has no Web
+        // Animations API, so the guard degrades to a static bar there rather than crashing boot.
+        if (typeof this._fill.animate === 'function') {
+            this._sweep = this._fill.animate([
+                { transform: 'scaleX(0.25) translateX(-100%)' },
+                { transform: 'scaleX(0.25) translateX(500%)' }
+            ], {
+                duration: 1000,
+                iterations: Infinity,
+                easing: 'ease-in-out'
+            });
+        }
+    }
+
+    /**
+     * Reflects preload progress, switching the bar from indeterminate to determinate on the first
+     * call.
+     * @param loaded - The number of assets that have finished loading.
+     * @param total - The number of assets being preloaded.
+     */
+    progress(loaded: number, total: number) {
+        if (this._sweep) {
+            this._sweep.cancel();
+            this._sweep = null;
+        }
+        const fraction = total === 0 ? 1 : loaded / total;
+        this._track.setAttribute('aria-valuenow', String(Math.round(fraction * 100)));
+        this._fill.style.transform = `scaleX(${fraction})`;
+    }
+
+    /**
+     * Fills the bar, fades it out and removes it. Idempotent.
+     */
+    complete() {
+        if (this._removal !== null) {
+            return;
+        }
+        if (this._sweep) {
+            this._sweep.cancel();
+            this._sweep = null;
+        }
+        this._track.setAttribute('aria-valuenow', '100');
+        this._fill.style.transform = 'scaleX(1)';
+        this._track.style.opacity = '0';
+        this._removal = setTimeout(() => this._track.remove(), REMOVAL_DELAY_MS);
+    }
+
+    /**
+     * Removes the bar immediately, cancelling any pending fade. Idempotent.
+     */
+    destroy() {
+        if (this._sweep) {
+            this._sweep.cancel();
+            this._sweep = null;
+        }
+        if (this._removal !== null) {
+            clearTimeout(this._removal);
+            this._removal = null;
+        }
+        this._track.remove();
+    }
+}
+
+export { LoadingBar };

package/src/material.ts

@@ -114,8 +114,14 @@ type TextureSlot = 'aoMap' | 'diffuseMap' | 'emissiveMap' | 'glossMap' | 'height
  * created on insertion.
  *
  * The element is metal/rough by default: unlike a bare `StandardMaterial` it enables the metalness
- * workflow, which is what the `metalness-*` attributes assume and what glTF means by PBR. The
- * `roughness` and `roughness-map` attributes are aliases for `gloss` and `gloss-map` that
+ * workflow, which is what the `metalness-*` attributes assume and what glTF means by PBR. It also
+ * defaults `metalness` to 0 rather than the engine's 1, because those two defaults have to be
+ * chosen together - the engine's 1 is unreachable under its own `useMetalness` of false, and with
+ * the workflow on it would make every material fully metallic, so `<pc-material diffuse="crimson">`
+ * would render as dark tinted reflections of an environment that may not exist rather than as a
+ * crimson surface. `metalness="1"` remains one attribute away.
+ *
+ * The `roughness` and `roughness-map` attributes are aliases for `gloss` and `gloss-map` that
  * additionally invert the gloss channel; do not mix the two families on one element.
  *
  * The two aliases are documented here rather than on an accessor, because they resolve to the
@@ -222,7 +228,7 @@ class MaterialElement extends HTMLElement {
 
     private _heightMapUv = 0;
 
-    private _metalness = 1;
+    private _metalness = 0;
 
     private _metalnessMap = '';
 
@@ -2386,7 +2392,7 @@ class MaterialElement extends HTMLElement {
                 this.heightMapUv = parseNumber(newValue, 0, name);
                 break;
             case 'metalness':
-                this.metalness = parseNumber(newValue, 1, name);
+                this.metalness = parseNumber(newValue, 0, name);
                 break;
             case 'metalness-map':
                 this.metalnessMap = newValue ?? '';