@preference-sl/pref-viewer 2.1.8 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "license": "MIT",

package/src/index.js

@@ -0,0 +1,165 @@
+import { Engine, Scene, ArcRotateCamera, Vector3, SceneLoader, Color4, HemisphericLight, DirectionalLight } from "@babylonjs/core";
+import "@babylonjs/loaders";
+
+class PrefViewer extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Crear y envolver canvas
+    this.canvas = document.createElement('canvas');
+    Object.assign(this.canvas.style, {
+      width: '100%',
+      height: '100%',
+      display: 'block',
+    });
+    const wrapper = document.createElement('div');
+    Object.assign(wrapper.style, {
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+    });
+    wrapper.appendChild(this.canvas);
+    this.shadowRoot.append(wrapper);
+
+    // Estado inicial
+    this.engine = null;
+    this.scene = null;
+    this.camera = null;
+    this.hemiLight = null;
+    this.dirLight = null;
+    this._onWindowResize = null;
+    this.modelFile = null;
+    this._hasInitialized = false;
+  }
+
+  static get observedAttributes() {
+    return ['model'];
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === 'model' && newValue && this._hasInitialized) {
+      this._reloadModel(newValue);
+    }
+  }
+
+  connectedCallback() {
+    this._initializeBabylon();
+    this._hasInitialized = true;
+  }
+
+  disconnectedCallback() {
+    this._disposeEngine();
+    if (this._onWindowResize) {
+      window.removeEventListener('resize', this._onWindowResize);
+    }
+  }
+
+  /**
+   * API pública: cargar bytes como modelo (.gltf/.glb)
+   * @param {Uint8Array} bytes
+   * @param {boolean} isJson - true si el contenido es glTF JSON
+   */
+  loadFromBytes(bytes, isJson) {
+    // Detectar GLB por magic number
+    const isGlb = bytes.length > 4
+      && bytes[0] === 0x67
+      && bytes[1] === 0x6c
+      && bytes[2] === 0x54
+      && bytes[3] === 0x46;
+    const mimeType = isGlb
+      ? 'model/gltf-binary'
+      : isJson
+        ? 'model/gltf+json'
+        : 'application/octet-stream';
+    const extension = isGlb ? 'glb' : 'gltf';
+
+    // Empaquetar en File con nombre
+    const file = new File([bytes], `model.${extension}`, { type: mimeType });
+    this.modelFile = file;
+
+    // Recargar modelo usando el File
+    this._reloadModel(file);
+  }
+
+  _initializeBabylon() {
+    this.engine = new Engine(this.canvas, true, { alpha: true });
+    this.scene = new Scene(this.engine);
+    this.scene.clearColor = new Color4(1, 1, 1, 1);
+
+    // Cámara orbitadora
+    this.camera = new ArcRotateCamera(
+      'camera', Math.PI / 2, Math.PI / 3, 10,
+      Vector3.Zero(), this.scene
+    );
+    this.camera.attachControl(this.canvas, true);
+
+    // Iluminación básica
+    this.hemiLight = new HemisphericLight('hemi', new Vector3(0, 1, 0), this.scene);
+    this.hemiLight.intensity = 0.6;
+    this.dirLight = new DirectionalLight('dir', new Vector3(-0.5, -1, -0.5), this.scene);
+    this.dirLight.position = new Vector3(0, 5, 0);
+    this.dirLight.intensity = 0.8;
+
+    // Zoom con rueda apuntando al punto
+    this.canvas.addEventListener('wheel', evt => {
+      if (!this.scene || !this.camera) return;
+      const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
+      const pivot = pick.hit ? pick.pickedPoint.clone() : this.camera.target.clone();
+      this.camera.target = pivot;
+      this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
+      evt.preventDefault();
+    });
+
+    // Render loop
+    this.engine.runRenderLoop(() => this.scene && this.scene.render());
+
+    // Ajuste en resize
+    this._onWindowResize = () => this.engine.resize();
+    window.addEventListener('resize', this._onWindowResize);
+  }
+
+  /**
+   * Recarga el modelo desde URL string o File
+   * @param {string|File} source
+   */
+  async _reloadModel(source) {
+    if (!this.scene) return;
+
+    // Dispose de mallas anteriores
+    this.scene.meshes.slice().forEach(m => {
+      if (m.getClassName() === 'Mesh') m.dispose();
+    });
+
+    try {
+      const result = await SceneLoader.ImportMeshAsync(
+        null, '', source, this.scene
+      );
+      this.scene.createDefaultCameraOrLight(true, true, true);
+      this.dispatchEvent(new CustomEvent('model-loaded', {
+        detail: { meshes: result.meshes, particleSystems: result.particleSystems },
+        bubbles: true,
+        composed: true
+      }));
+    } catch (err) {
+      console.error('PrefViewer: Error loading model:', err);
+      this.dispatchEvent(new CustomEvent('model-error', {
+        detail: { error: err },
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+
+  _disposeEngine() {
+    if (!this.engine) return;
+    this.engine.dispose();
+    this.engine = null;
+    this.scene = null;
+    this.camera = null;
+    this.hemiLight = null;
+    this.dirLight = null;
+  }
+}
+
+customElements.define('pref-viewer', PrefViewer);

package/src/index.ts

@@ -1,174 +0,0 @@
-import {  Engine,  Scene,  ArcRotateCamera,  Vector3,  SceneLoader,  Color4,  HemisphericLight,  DirectionalLight,} from "@babylonjs/core";
-import "@babylonjs/loaders";
-
-class PrefViewer extends HTMLElement {
-  private canvas!: HTMLCanvasElement;
-  private engine: Engine | null = null;
-  private scene: Scene | null = null;
-  private camera: ArcRotateCamera | null = null;
-  private hemiLight: HemisphericLight | null = null;
-  private dirLight: DirectionalLight | null = null;
-  private _onWindowResize: (() => void) | null = null;
-  private modelFile: File | null = null;
-  private _hasInitialized = false;
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    // Canvas + wrapper
-    this.canvas = document.createElement("canvas");
-    Object.assign(this.canvas.style, {
-      width: "100%",
-      height: "100%",
-      display: "block",
-    });
-    const wrapper = document.createElement("div");
-    Object.assign(wrapper.style, {
-      width: "100%",
-      height: "100%",
-      position: "relative",
-    });
-    wrapper.appendChild(this.canvas);
-    this.shadowRoot!.append(wrapper);
-  }
-
-  static get observedAttributes() {
-    return ["model"];
-  }
-
-  attributeChangedCallback(name: string, _old: string|null, newVal: string|null) {
-    if (name === "model" && newVal && this._hasInitialized) {
-      // si alguien cambia el atributo model, recargamos desde URL
-      this._reloadModel(newVal);
-    }
-  }
-
-  connectedCallback() {
-    this._initializeBabylon();
-    this._hasInitialized = true;
-  }
-
-  disconnectedCallback() {
-    this._disposeEngine();
-    if (this._onWindowResize) {
-      window.removeEventListener("resize", this._onWindowResize);
-    }
-  }
-
-  /** API pública: recibe bytes + flag isJson, empaqueta y carga */
-  public loadFromBytes(bytes: Uint8Array, isJson: boolean) {
-    // 1) crear Blob + URL
-    const isGlb =
-      bytes.length > 4 &&
-      bytes[0] === 0x67 &&
-      bytes[1] === 0x6c &&
-      bytes[2] === 0x54 &&
-      bytes[3] === 0x46;
-    const mimeType = isGlb
-      ? "model/gltf-binary"
-      : isJson
-      ? "model/gltf+json"
-      : "application/octet-stream";
-
-    const file = new File([bytes], isGlb ? "model.glb" : "model.gltf", { type: mimeType });
-    this.modelFile = file;
-
-    // 2) Llamar internamente a _reloadModel con el File
-    this._reloadModel(file);
-  }
-
-  private _initializeBabylon() {
-    this.engine = new Engine(this.canvas, true, { alpha: true });
-    this.scene = new Scene(this.engine);
-    this.scene.clearColor = new Color4(1, 1, 1, 1);
-
-    this.camera = new ArcRotateCamera(
-      "camera",
-      Math.PI / 2,
-      Math.PI / 3,
-      10,
-      Vector3.Zero(),
-      this.scene
-    );
-    this.camera.attachControl(this.canvas, true);
-
-    this.hemiLight = new HemisphericLight("hemi", new Vector3(0, 1, 0), this.scene);
-    this.hemiLight.intensity = 0.6;
-    this.dirLight = new DirectionalLight("dir", new Vector3(-0.5, -1, -0.5), this.scene);
-    this.dirLight.position = new Vector3(0, 5, 0);
-    this.dirLight.intensity = 0.8;
-
-    this.canvas.addEventListener("wheel", (evt) => {
-      if (!this.scene || !this.camera) return;
-      const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
-      const pivot = pick.hit ? pick.pickedPoint.clone() : this.camera.target.clone();
-      this.camera.target = pivot;
-      this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
-      evt.preventDefault();
-    });
-
-    this.engine.runRenderLoop(() => {
-      if (this.scene) {
-        this.scene.render();
-      }
-    });
-    this._onWindowResize = () => this.engine!.resize();
-    window.addEventListener("resize", this._onWindowResize);
-  }
-
-  /**
-   * Carga desde URL (string) o File
-   */
-  private async _reloadModel(source: string|File) {
-    if (!this.scene) return;
-    // Dispose anteriores
-    this.scene.meshes.slice().forEach((m) => {
-      if (m.getClassName() === "Mesh") m.dispose();
-    });
-
-    try {
-      const result = await SceneLoader.ImportMeshAsync(
-        null,
-        "",
-        source,
-        this.scene
-      );
-      this.scene.createDefaultCameraOrLight(true, true, true);
-      this.dispatchEvent(
-        new CustomEvent("model-loaded", {
-          detail: { meshes: result.meshes, particleSystems: result.particleSystems },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    } catch (err) {
-      console.error("PrefViewer: Error loading model:", err);
-      this.dispatchEvent(
-        new CustomEvent("model-error", {
-          detail: { error: err },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    } finally {
-      // revoke URL si venía de File
-      if (source instanceof File) {
-        // no tenemos la URL directa, pero Babylon la creó internamente
-        // y la revocará al dispose del engine
-      }
-    }
-  }
-
-  private _disposeEngine() {
-    if (this.engine) {
-      this.engine.dispose();
-      this.engine = null;
-      this.scene = null;
-      this.camera = null;
-      this.hemiLight = null;
-      this.dirLight = null;
-    }
-  }
-}
-
-customElements.define("pref-viewer", PrefViewer);