@wonder-partners/model-viewer-stats 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# @wonder/model-viewer-stats
+# `<model-viewer-stats>`
 
 A lightweight web component that displays comprehensive statistics for 3D models rendered with Google's `<model-viewer>`.
 
@@ -19,7 +19,7 @@ A lightweight web component that displays comprehensive statistics for 3D models
 ## Installation
 
 ```bash
-npm install @wonder/model-viewer-stats
+npm install @wonder-partners/model-viewer-stats
 ```
 
 ### Peer Dependencies
@@ -33,7 +33,7 @@ Import the package and use the `<model-stats>` element inside your `<model-viewe
 ```html
 <script type="module">
   import '@google/model-viewer';
-  import '@wonder/model-viewer-stats';
+  import '@wonder-partners/model-viewer-stats';
 </script>
 
 <model-viewer src="/path/to/model.glb" camera-controls>
@@ -45,13 +45,13 @@ Import the package and use the `<model-stats>` element inside your `<model-viewe
 ### ES Module Import
 
 ```javascript
-import { ModelStats } from '@wonder/model-viewer-stats';
+import { ModelStats } from '@wonder-partners/model-viewer-stats';
 ```
 
 ### UMD (CommonJS)
 
 ```javascript
-const { ModelStats } = require('@wonder/model-viewer-stats');
+const { ModelStats } = require('@wonder-partners/model-viewer-stats');
 ```
 
 ## API & Interaction

package/dist/model-viewer-stats.js

@@ -0,0 +1,133 @@
+import { Box3 as u, Vector3 as v } from "three";
+const f = String.raw;
+class x extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.viewer = null;
+  }
+  connectedCallback() {
+    this.render(), this.viewer = this.closest("model-viewer"), this.viewer && this.viewer.addEventListener("load", () => {
+      console.log("Model Viewer loaded"), this.calculateStats();
+    });
+  }
+  toggle() {
+    this.hasAttribute("visible") ? this.removeAttribute("visible") : this.setAttribute("visible", "");
+  }
+  render() {
+    this.shadowRoot.innerHTML = f`
+		<style>
+			:host {
+				position: absolute;
+				top: 1rem;
+				left: 1rem;
+				z-index: 1000;
+				background-color: rgba(0, 0, 0, 0.33);
+				color: white;
+				padding: 1rem;
+				border-radius: 0.5rem;
+				pointer-events: none;
+				opacity: 0;
+				transition: opacity 0.3s;
+				font-family: sans-serif;
+				font-size: 0.9rem;
+			}
+			
+			:host([visible]) { 
+				opacity: 1; 
+			}
+			
+			.row { 
+				display: flex;
+				justify-content: space-between; 
+				gap: 20px; 
+				margin-bottom: 4px; 
+			}
+			
+			.row:last-child { 
+				margin-bottom: 0; 
+			}
+			
+			.label { 
+				opacity: 0.8; 
+			}
+			
+			.val { 
+				font-weight: bold; 
+				font-family: monospace; 
+			}
+		</style>
+
+		<div class="row"><span class="label">File size:</span><span class="val" id="file">-</span></div>
+		<div class="row"><span class="label">Dimensions (W x H x D):</span><span class="val" id="size">-</span></div>
+		<div class="row"><span class="label">Triangles:</span><span class="val" id="tri">-</span></div>
+		<div class="row"><span class="label">Meshes:</span><span class="val" id="mesh">-</span></div>
+		<div class="row"><span class="label">Materials:</span><span class="val" id="mat">-</span></div>
+		<div class="row"><span class="label">Textures:</span><span class="val" id="tex">-</span></div>
+		<div class="row"><span class="label">Animations:</span><span class="val" id="anim">-</span></div>
+    	`;
+  }
+  async calculateStats() {
+    if (!this.viewer) return;
+    const t = this.viewer.src;
+    t && fetch(t, { method: "HEAD" }).then((e) => {
+      const a = e.headers.get("content-length");
+      a ? this.updateText("file", this.formatBytes(Number(a))) : this.updateText("file", "N/A");
+    }).catch(() => {
+      this.updateText("file", "Unknown");
+    });
+    const i = this.getInternalScene(this.viewer);
+    if (!i) {
+      console.warn("[ModelStats] Could not access internal Three.js scene.");
+      return;
+    }
+    let s = 0, n = 0;
+    const o = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), r = new u();
+    if (i.traverse((e) => {
+      if (e.isMesh && e.geometry) {
+        n++;
+        const a = e.geometry;
+        s += a.index ? a.index.count / 3 : a.attributes.position.count / 3, r.expandByObject(e), (Array.isArray(e.material) ? e.material : [e.material]).forEach((c) => {
+          o.add(c);
+          for (const m in c) {
+            const p = c[m];
+            p?.isTexture && l.add(p.uuid);
+          }
+        });
+      }
+    }), r.isEmpty())
+      this.updateText("size", "0m");
+    else {
+      const e = new v();
+      r.getSize(e);
+      const a = (d) => `${d.toFixed(2)}`;
+      this.updateText("size", `${a(e.x)} x ${a(e.y)} x ${a(e.z)}`);
+    }
+    const h = this.viewer.availableAnimations ? this.viewer.availableAnimations.length : 0;
+    this.updateText("tri", Math.round(s).toLocaleString()), this.updateText("mesh", n.toLocaleString()), this.updateText("mat", o.size.toString()), this.updateText("tex", l.size.toString()), this.updateText("anim", h.toString());
+  }
+  updateText(t, i) {
+    const s = this.shadowRoot.getElementById(t);
+    s && (s.innerText = i);
+  }
+  formatBytes(t, i = 2) {
+    if (!+t) return "0 Bytes";
+    const s = 1024, n = i < 0 ? 0 : i, o = ["Bytes", "KB", "MB", "GB", "TB"], l = Math.floor(Math.log(t) / Math.log(s));
+    return `${parseFloat((t / s ** l).toFixed(n))} ${o[l]}`;
+  }
+  /**
+   * Retrieves the internal Three.js Scene from a <model-viewer> instance.
+   * * This function bypasses the public API to access the underlying symbol
+   * that holds the scene context. It is robust against minification and
+   * internal naming changes (e.g., 'model-viewer-scene' vs 'model-viewer-artboard').
+   * * @param {HTMLElement} viewer - The <model-viewer> DOM element.
+   * @returns {Object|null} The THREE.Scene object, or null if not found.
+   */
+  getInternalScene(t) {
+    if (!t) return null;
+    const s = Object.getOwnPropertySymbols(t).find((n) => t[n]?.scene?.isScene);
+    return s ? t[s].scene : null;
+  }
+}
+customElements.get("model-stats") || customElements.define("model-stats", x);
+export {
+  x as ModelStats
+};

package/dist/model-viewer-stats.umd.cjs

@@ -0,0 +1,51 @@
+(function(a,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],o):(a=typeof globalThis<"u"?globalThis:a||self,o(a["Model Viewer Stats"]={},a.THREE))})(this,(function(a,o){"use strict";const f=String.raw;class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.viewer=null}connectedCallback(){this.render(),this.viewer=this.closest("model-viewer"),this.viewer&&this.viewer.addEventListener("load",()=>{console.log("Model Viewer loaded"),this.calculateStats()})}toggle(){this.hasAttribute("visible")?this.removeAttribute("visible"):this.setAttribute("visible","")}render(){this.shadowRoot.innerHTML=f`
+		<style>
+			:host {
+				position: absolute;
+				top: 1rem;
+				left: 1rem;
+				z-index: 1000;
+				background-color: rgba(0, 0, 0, 0.33);
+				color: white;
+				padding: 1rem;
+				border-radius: 0.5rem;
+				pointer-events: none;
+				opacity: 0;
+				transition: opacity 0.3s;
+				font-family: sans-serif;
+				font-size: 0.9rem;
+			}
+			
+			:host([visible]) { 
+				opacity: 1; 
+			}
+			
+			.row { 
+				display: flex;
+				justify-content: space-between; 
+				gap: 20px; 
+				margin-bottom: 4px; 
+			}
+			
+			.row:last-child { 
+				margin-bottom: 0; 
+			}
+			
+			.label { 
+				opacity: 0.8; 
+			}
+			
+			.val { 
+				font-weight: bold; 
+				font-family: monospace; 
+			}
+		</style>
+
+		<div class="row"><span class="label">File size:</span><span class="val" id="file">-</span></div>
+		<div class="row"><span class="label">Dimensions (W x H x D):</span><span class="val" id="size">-</span></div>
+		<div class="row"><span class="label">Triangles:</span><span class="val" id="tri">-</span></div>
+		<div class="row"><span class="label">Meshes:</span><span class="val" id="mesh">-</span></div>
+		<div class="row"><span class="label">Materials:</span><span class="val" id="mat">-</span></div>
+		<div class="row"><span class="label">Textures:</span><span class="val" id="tex">-</span></div>
+		<div class="row"><span class="label">Animations:</span><span class="val" id="anim">-</span></div>
+    	`}async calculateStats(){if(!this.viewer)return;const t=this.viewer.src;t&&fetch(t,{method:"HEAD"}).then(e=>{const i=e.headers.get("content-length");i?this.updateText("file",this.formatBytes(Number(i))):this.updateText("file","N/A")}).catch(()=>{this.updateText("file","Unknown")});const n=this.getInternalScene(this.viewer);if(!n){console.warn("[ModelStats] Could not access internal Three.js scene.");return}let s=0,l=0;const r=new Set,c=new Set,d=new o.Box3;if(n.traverse(e=>{if(e.isMesh&&e.geometry){l++;const i=e.geometry;s+=i.index?i.index.count/3:i.attributes.position.count/3,d.expandByObject(e),(Array.isArray(e.material)?e.material:[e.material]).forEach(p=>{r.add(p);for(const x in p){const m=p[x];m?.isTexture&&c.add(m.uuid)}})}}),d.isEmpty())this.updateText("size","0m");else{const e=new o.Vector3;d.getSize(e);const i=u=>`${u.toFixed(2)}`;this.updateText("size",`${i(e.x)} x ${i(e.y)} x ${i(e.z)}`)}const v=this.viewer.availableAnimations?this.viewer.availableAnimations.length:0;this.updateText("tri",Math.round(s).toLocaleString()),this.updateText("mesh",l.toLocaleString()),this.updateText("mat",r.size.toString()),this.updateText("tex",c.size.toString()),this.updateText("anim",v.toString())}updateText(t,n){const s=this.shadowRoot.getElementById(t);s&&(s.innerText=n)}formatBytes(t,n=2){if(!+t)return"0 Bytes";const s=1024,l=n<0?0:n,r=["Bytes","KB","MB","GB","TB"],c=Math.floor(Math.log(t)/Math.log(s));return`${parseFloat((t/s**c).toFixed(l))} ${r[c]}`}getInternalScene(t){if(!t)return null;const s=Object.getOwnPropertySymbols(t).find(l=>t[l]?.scene?.isScene);return s?t[s].scene:null}}customElements.get("model-stats")||customElements.define("model-stats",h),a.ModelStats=h,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@wonder-partners/model-viewer-stats",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/wonder-partners/model-viewer-stats.git"
   },
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "./dist/model-viewer-stats.umd.cjs",
   "module": "./dist/model-viewer-stats.js",
+  "types": "./src/index.d.ts",
   "exports": {
     ".": {
+      "types": "./src/index.d.ts",
       "import": "./dist/model-viewer-stats.js",
       "require": "./dist/model-viewer-stats.umd.cjs"
     }

package/src/ModelStats.d.ts

@@ -0,0 +1,19 @@
+export class ModelStats extends HTMLElement {
+	constructor();
+	viewer: HTMLElement | null;
+	connectedCallback(): void;
+	toggle(): void;
+	render(): void;
+	calculateStats(): Promise<void>;
+	updateText(id: string, text: string): void;
+	formatBytes(bytes: number, decimals?: number): string;
+	/**
+	 * Retrieves the internal Three.js Scene from a <model-viewer> instance.
+	 * * This function bypasses the public API to access the underlying symbol
+	 * that holds the scene context. It is robust against minification and
+	 * internal naming changes (e.g., 'model-viewer-scene' vs 'model-viewer-artboard').
+	 * * @param {HTMLElement} viewer - The <model-viewer> DOM element.
+	 * @returns {Object|null} The THREE.Scene object, or null if not found.
+	 */
+	getInternalScene(viewer: HTMLElement): any;
+}

package/src/ModelStats.js

@@ -0,0 +1,212 @@
+import { Box3, Vector3 } from "three";
+
+const html = String.raw;
+
+export class ModelStats extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.viewer = null;
+	}
+
+	connectedCallback() {
+		this.render();
+		this.viewer = this.closest("model-viewer");
+
+		if (this.viewer) {
+			this.viewer.addEventListener("load", () => {
+				console.log("Model Viewer loaded");
+				this.calculateStats();
+			});
+		}
+	}
+
+	toggle() {
+		if (this.hasAttribute("visible")) {
+			this.removeAttribute("visible");
+		} else {
+			this.setAttribute("visible", "");
+		}
+	}
+
+	render() {
+		this.shadowRoot.innerHTML = html`
+		<style>
+			:host {
+				position: absolute;
+				top: 1rem;
+				left: 1rem;
+				z-index: 1000;
+				background-color: rgba(0, 0, 0, 0.33);
+				color: white;
+				padding: 1rem;
+				border-radius: 0.5rem;
+				pointer-events: none;
+				opacity: 0;
+				transition: opacity 0.3s;
+				font-family: sans-serif;
+				font-size: 0.9rem;
+			}
+			
+			:host([visible]) { 
+				opacity: 1; 
+			}
+			
+			.row { 
+				display: flex;
+				justify-content: space-between; 
+				gap: 20px; 
+				margin-bottom: 4px; 
+			}
+			
+			.row:last-child { 
+				margin-bottom: 0; 
+			}
+			
+			.label { 
+				opacity: 0.8; 
+			}
+			
+			.val { 
+				font-weight: bold; 
+				font-family: monospace; 
+			}
+		</style>
+
+		<div class="row"><span class="label">File size:</span><span class="val" id="file">-</span></div>
+		<div class="row"><span class="label">Dimensions (W x H x D):</span><span class="val" id="size">-</span></div>
+		<div class="row"><span class="label">Triangles:</span><span class="val" id="tri">-</span></div>
+		<div class="row"><span class="label">Meshes:</span><span class="val" id="mesh">-</span></div>
+		<div class="row"><span class="label">Materials:</span><span class="val" id="mat">-</span></div>
+		<div class="row"><span class="label">Textures:</span><span class="val" id="tex">-</span></div>
+		<div class="row"><span class="label">Animations:</span><span class="val" id="anim">-</span></div>
+    	`;
+	}
+
+	async calculateStats() {
+		if (!this.viewer) return;
+
+		// --- File Size ---
+		const src = this.viewer.src;
+		if (src) {
+			fetch(src, { method: "HEAD" })
+				.then((res) => {
+					const size = res.headers.get("content-length");
+					if (size) {
+						this.updateText("file", this.formatBytes(Number(size)));
+					} else {
+						this.updateText("file", "N/A");
+					}
+				})
+				.catch(() => {
+					this.updateText("file", "Unknown");
+				});
+		}
+
+		// --- Scene traversal for geometry stats ---
+		const scene = this.getInternalScene(this.viewer);
+
+		if (!scene) {
+			console.warn("[ModelStats] Could not access internal Three.js scene.");
+			return;
+		}
+
+		let triCount = 0;
+		let meshCount = 0;
+		const materials = new Set();
+		const textures = new Set();
+		const box = new Box3();
+
+		scene.traverse((obj) => {
+			if (obj.isMesh && obj.geometry) {
+				meshCount++;
+				const geom = obj.geometry;
+				triCount += geom.index ? geom.index.count / 3 : geom.attributes.position.count / 3;
+
+				// Bounding Box
+				// We assume the object is part of the model.
+				// expandByObject computes the world-axis-aligned box
+				box.expandByObject(obj);
+
+				// Materials
+				const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
+				mats.forEach((m) => {
+					materials.add(m);
+					// Textures
+					for (const key in m) {
+						const val = m[key];
+						if (val?.isTexture) {
+							textures.add(val.uuid);
+						}
+					}
+				});
+			}
+		});
+
+		// Size
+		if (!box.isEmpty()) {
+			const size = new Vector3();
+			box.getSize(size);
+			// Format as W x H x D
+			// box.getSize returns width, height, depth.
+			// Let's assume Y is up, but just printing dimensions is fine.
+			const fmt = (n) => `${n.toFixed(2)}`;
+			this.updateText("size", `${fmt(size.x)} x ${fmt(size.y)} x ${fmt(size.z)}`);
+		} else {
+			this.updateText("size", "0m");
+		}
+
+		const animationCount = this.viewer.availableAnimations
+			? this.viewer.availableAnimations.length
+			: 0;
+
+		this.updateText("tri", Math.round(triCount).toLocaleString());
+		this.updateText("mesh", meshCount.toLocaleString());
+		this.updateText("mat", materials.size.toString());
+		this.updateText("tex", textures.size.toString());
+		this.updateText("anim", animationCount.toString());
+	}
+
+	updateText(id, text) {
+		const el = this.shadowRoot.getElementById(id);
+		if (el) el.innerText = text;
+	}
+
+	formatBytes(bytes, decimals = 2) {
+		if (!+bytes) return "0 Bytes";
+		const k = 1024;
+		const dm = decimals < 0 ? 0 : decimals;
+		const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+	}
+
+	/**
+	 * Retrieves the internal Three.js Scene from a <model-viewer> instance.
+	 * * This function bypasses the public API to access the underlying symbol
+	 * that holds the scene context. It is robust against minification and
+	 * internal naming changes (e.g., 'model-viewer-scene' vs 'model-viewer-artboard').
+	 * * @param {HTMLElement} viewer - The <model-viewer> DOM element.
+	 * @returns {Object|null} The THREE.Scene object, or null if not found.
+	 */
+	getInternalScene(viewer) {
+		if (!viewer) return null;
+
+		// We cannot rely on the symbol name (e.g., 'model-viewer-scene') because
+		// it changes between versions (v3.0 vs v3.4) and is stripped in minified builds.
+		// Instead, we inspect the symbols to find the one holding a valid Three.js scene.
+
+		// 1. Get all symbols from the element
+		const symbols = Object.getOwnPropertySymbols(viewer);
+
+		// 2. Find the symbol that points to an object containing a valid THREE scene.
+		const sceneSymbol = symbols.find((sym) => {
+			const value = viewer[sym];
+			return value?.scene?.isScene;
+		});
+
+		if (!sceneSymbol) return null;
+
+		return viewer[sceneSymbol].scene;
+	}
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+import { ModelStats } from "./ModelStats.js";
+export { ModelStats };

package/src/index.js

@@ -0,0 +1,7 @@
+import { ModelStats } from "./ModelStats.js";
+
+export { ModelStats };
+
+if (!customElements.get("model-stats")) {
+	customElements.define("model-stats", ModelStats);
+}